Akses lebih banyak warna dan ruang baru

Dokumen ini adalah bagian dari panduan warna CSS definisi tinggi.

CSS Color 4 menguraikan banyak fitur dan alat untuk CSS dan warna. Codepen berikut menunjukkan semua dan sintaks warna lama bersama-sama:

Baca ringkasan ruang warna klasik.

Spesifikasi level 4 memperkenalkan 12 ruang warna baru untuk mencari warna, mulai dari 7 gamut baru yang dibagikan sebelumnya:

• Linear sRGB
• LCH
• okLCH
• LAB
• okLAB
• Layar P3
• Rec2020
• RGB a98
• RGB ProPhoto
• XYZ
• XYZ d50
• XYZ d65

Lihat ruang warna web baru

Ruang warna berikut menawarkan akses ke gamut yang lebih besar daripada sRGB. Tujuan ruang warna display-p3 menawarkan warna hampir dua kali lebih banyak dari RGB, sedangkan Rec2020 menawarkan hampir dua kali lipat display-p3. Banyak sekali warna.

Fungsi color()

Yang baru color() fungsi yang dapat digunakan untuk ruang warna apa pun yang menentukan warna dengan R, G, dan B saluran TV Anda. color() mengambil parameter ruang warna terlebih dahulu, lalu serangkaian nilai saluran untuk RGB dan opsional beberapa alfa.

Anda akan menemukan banyak ruang warna baru menggunakan fungsi ini karena memiliki fungsi khusus seperti rgb, srgb, hsl, hwb, dll., berkembang menjadi daftar panjang, lebih mudah untuk mengatur ruang warna menjadi parameter.

Kelebihan

• Ruang yang dinormalkan untuk mengakses ruang warna yang menggunakan saluran RGB.
• Dapat menskalakan hingga ruang warna berbasis RGB gamut yang luas.

Kekurangan

• Tidak berfungsi dengan HSL, HWB, LCH, okLCH, atau okLAB

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

sRGB melalui color()

Ruang warna ini menawarkan fitur yang sama dengan rgb(). Alat ini juga menawarkan desimal antara 0 dan 1, digunakan tepat seperti 0% hingga 100%.

Kelebihan

• Hampir semua layar mendukung rentang ruang warna ini.
• Dukungan alat desain.

Kekurangan

• Tidak linear secara persepsi (seperti lch() adalah)
• Tidak ada warna gamut yang luas.
• Gradien sering kali melewati zona mati.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRGB linear melalui color() {#linear-sRGB}

Alternatif linier untuk RGB ini menawarkan intensitas saluran yang dapat diprediksi.

Kelebihan

• Akses langsung ke saluran RGB, berguna untuk berbagai hal seperti game engine atau pertunjukan cahaya.

Kekurangan

• Tidak linear secara persepsi.
• Warna hitam dan putih memenuhi bagian tepi.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

Gradien akan dibahas secara mendetail nanti, tetapi dengan cepat itu berarti melihat srgb dan linear-srgb dari hitam ke putih gradien untuk menggambarkan perbedaannya:

LCH

LCH memperkenalkan sintaksis untuk mengakses warna di luar gamut RGB. Hal ini juga yang pertama membuat proses pembuatan di luar gamut warna untuk tampilan. Hal ini terjadi karena warna ruang CIE (lch, oklch, lab, oklab) dapat mewakili seluruh spektrum warna yang terlihat manusia.

Ruang warna ini dimodelkan berdasarkan penglihatan manusia dan menawarkan sintaks untuk menentukan salah satu dari warna itu dan banyak lagi. Saluran LCH bersifat ringan, kroma dan rona. Rona adalah sudut, seperti dalam HSL dan HWB. Pencahayaan adalah nilai antara 0 dan 100. Ini adalah visualisasi khusus {i>human-centric<i} ringan. Kroma mirip dengan saturasi; dapat berkisar dari 0 hingga 230, tetapi secara teknis tidak terbatas.

Kelebihan

• Manipulasi warna yang dapat diprediksi berkat sifatnya yang linier secara persepsi, sebagian besar (lihat oklch).
• Menggunakan saluran yang sudah dikenal.
• Sering kali memiliki gradien yang cerah.

Kekurangan

• Mudah diselesaikan.
• Terkadang, gradien memerlukan titik tengah penyesuaian untuk mencegah pergeseran hue.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

LAB

Ruang warna lain yang dibuat untuk mengakses gamut CIE, sekali lagi dengan dimensi kecerahan linear (L). A dan B di LAB mewakili sumbu unik dari penglihatan warna manusia: merah-hijau, dan biru-kuning. Ketika A diberi nilai positif maka akan menambahkan warna merah, dan hijau ketika berada di bawah 0. Ketika B diberi bilangan positif warna kuning ditambahkan, di mana nilai negatif mendekati biru.

Kelebihan

• Gradien yang konsisten secara persepsi.
• Rentang dinamis tinggi.

Kekurangan

• Potensi perubahan hue.
• Sulit untuk menulis tangan atau menebak warna saat membaca nilai.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

Ruang warna ini bersifat korektif untuk LCH. Dan seperti LCH, (L) terus mewakili ringan yang linier secara persepsi, untuk kroma dan H untuk hue.

Ruang ini terasa familier jika Anda telah bekerja dengan HSL atau LCH. Pilih sudut pada roda warna untuk H, pilih kecerahan atau tingkat kegelapan dengan menyesuaikan L, tapi kemudian kita memiliki kroma alih-alih saturasi. Mereka cukup identik kecuali bahwa penyesuaian pada kecerahan dan kroma cenderung berpasangan, atau meminta warna kroma tinggi yang cocok untuk Anda di luar gamut target.

Kelebihan

• Tidak ada kejutan saat bekerja dengan rona biru dan ungu.
• Ringan secara persepsi linear.
• Menggunakan saluran yang sudah dikenal.
• Rentang dinamis tinggi.
• Memiliki pemilih warna modern - oleh Evil Martians.

Kekurangan

• Mudah diselesaikan.
• Baru dan belum terjamah.
• Sedikit pemilih warna.

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKE

Ruang ini bersifat korektif untuk LAB. VM ini juga diklaim sebagai ruang yang dioptimalkan untuk kualitas pemrosesan gambar, yang digunakan kita di CSS berarti gradien dan kualitas manipulasi fungsi warna.

Kelebihan

• Ruang default untuk animasi dan interpolasi.
• Ringan secara persepsi linear.
• Tidak ada perubahan hue seperti LAB.
• Gradien yang konsisten secara persepsi.

Kekurangan

• Baru dan belum terjamah.
• Sedikit pemilih warna.

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

Tampilan P3

Tampilan P3 gamut dan ruang warna menjadi populer sejak Apple didukung sejak 2015 di iMac. Apple juga mendukung display-p3 di halaman web melalui CSS sejak 2016, lima bertahun-tahun dibandingkan browser lainnya. Jika berasal dari sRGB, ini adalah warna yang bagus ruang untuk mulai dikerjakan saat Anda memindahkan gaya ke rentang dinamis yang lebih tinggi.

Kelebihan

• Dukungan luar biasa, yang dianggap sebagai dasar untuk layar HDR.
• 50% lebih banyak warna daripada sRGB.
• DevTools menawarkan pemilih warna yang bagus.

Kekurangan

• Pada akhirnya akan dilampaui oleh ruang Rec2020 dan CIE.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020 adalah bagian dari pergerakan menuju UHDTV (televisi definisi ultra tinggi), yang menyediakan berbagai macam warna untuk digunakan dalam media 4K dan 8K. Rec2020 adalah salah satu Gamut berbasis RGB, lebih besar dari display-p3, tetapi tidak hampir umum di antara konsumen sebagai Display P3.

Kelebihan

• Warna Ultra HD.

Kekurangan

• Belum umum di kalangan konsumen.
• Tidak biasa ditemukan pada perangkat genggam atau tablet.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

RGB A98 {#a98-RGB}

Singkatan dari Adobe 1998 RGB, A98 RGB dibuat oleh Adobe untuk menampilkan sebagian besar warna yang dapat dicapai dari {i>printer<i} CMYK. Mode ini menawarkan lebih banyak warna daripada sRGB, terutama dalam rona sian dan hijau.

Kelebihan

• Lebih besar dari ruang warna sRGB dan Display P3.

Kekurangan

• Bukan tempat umum yang ditempati oleh desainer digital.
• Tidak banyak orang yang melakukan porting palet dari CMYK.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

RGB ProPhoto

Dibuat oleh Kodak, ruang gamut lebar ini secara unik menawarkan rentang latar depan ultra-wide warna dan memiliki perubahan rona minimal saat mengubah kecerahan. Perusahaan ini juga mengklaim mencakup 100% dari warna permukaan yang sebenarnya seperti yang didokumentasikan oleh Michael Pointer pada tahun 1980.

Kelebihan

• Perubahan hue minimal saat mengubah kecerahan.
• Warna primer cerah.

Kekurangan

• Sekitar 13% warna yang ditawarkan adalah imajiner, yang berarti tidak berada dalam spektrum yang terlihat manusia.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

Ruang warna CIE XYZ mencakup semua warna yang terlihat oleh seseorang dengan kemampuan penglihatan rata-rata. Inilah sebabnya mengapa warna ini digunakan sebagai referensi standar untuk warna lain spasi. Y adalah luminans, X dan Z adalah kemungkinan kroma dalam Y yang ditentukan luminans.

Perbedaan antara d50 dan d65 adalah titik putih, di mana d50 menggunakan d50 titik putih dan d65 menggunakan titik putih d65.

Istilah Utama: Titik putih adalah atribut ruang warna, yang merupakan tempat warna putih yang sebenarnya ada di dalam ruang itu. Untuk layar elektronik, D65 adalah titik putih biasa, dan kependekan dari 6500 kelvin. Sangat penting untuk warna konversi warna putih yang sesuai dengan suhu warna (kehangatan atau kesejukan) tidak terpengaruh.

Kelebihan

• Akses linear ringan memiliki kasus penggunaan yang praktis.
• Sangat cocok untuk pencampuran warna fisik.

Kekurangan

• Tidak linear secara persepsi seperti lch, oklch, lab, dan oklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

Ruang warna khusus

Spesifikasi Warna CSS 5 juga memiliki jalur untuk mengajari browser tentang ruang warna kustom. Ini adalah profil ICC yang memberi tahu browser cara untuk me-resolve warna.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Setelah dimuat, akses warna dari profil kustom ini dengan fungsi color() dan menentukan nilai salurannya.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Jenis interpolasi warna

Bertransisi dari satu warna ke warna lain dapat ditemukan dalam animasi, gradien dan pencampuran warna. Transisi ini biasanya ditetapkan sebagai warna awal dan sebuah warna akhir, sehingga browser diharapkan untuk berinterpolasi di antara keduanya. Interpolasi dalam hal ini berarti menghasilkan serangkaian warna di-antara untuk membuat transisi yang mulus alih-alih yang instan.

Dengan gradien, interpolasi adalah serangkaian warna di sepanjang bentuk. Dengan animasi adalah serangkaian warna dari waktu ke waktu.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

Dengan gradien, warna di antara keduanya ditampilkan sekaligus:

Yang baru dalam interpolasi warna

Dengan penambahan gamut dan ruang warna baru, ada fitur baru opsi untuk interpolasi. Mengubah warna in hsl dari biru ke putih menghasilkan sesuatu yang sangat berbeda dari sRGB.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

Lalu apa yang terjadi jika Anda beralih dari warna dalam satu ruang ke warna dalam ruang yang benar-benar berbeda:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

Untungnya, Warna 4 spesifikasi berisi petunjuk untuk browser tentang cara menangani interpolasi ruang warna. Untuk .gradient, browser melihat perbedaan ruang warna dan menggunakan ruang warna default oklab.

Anda mungkin berpikir bahwa {i>browser<i} akan menggunakan {i>lch<i} sebagai ruang warna, karena itulah warna pertama, tetapi tidak. Itu sebabnya saya menunjukkan gradien perbandingan kedua .lch. Gradien .lch adalah gradien dari ruang warna lch.

Lebih sedikit garis berwarna berkat warna 16-bit

Sebelum warna ini berfungsi, semua warna disimpan dalam satu bilangan bulat 32-bit untuk mewakili keempat saluran; merah, hijau, biru, dan alfa. Ini adalah 8-bit per saluran dan 2^ 24 kemungkinan warna (mengabaikan alpha). 2 ^ 24 = 16.777.216, "jutaan warna."

Setelah warna ini berfungsi, empat nilai floating point 16-bit, setiap saluran memiliki {i>float<i}-nya sendiri, bukan digabungkan bersama-sama. Ini adalah total 64-bit, menghasilkan lebih dari jutaan warna.

Pekerjaan ini diperlukan untuk mendukung warna HD. Cara ini meningkatkan jumlah warna informasi yang dapat disimpan, yang memiliki efek sampingan menarik yang berarti ada lebih banyak warna untuk digunakan browser dalam gradien.

Gradient garis berwarna adalah ketika tidak ada cukup warna untuk membuat gradien yang halus dan "strip" warna menjadi terlihat. Banding sangat dimitigasi dengan mengubah ke warna resolusi yang lebih tinggi.

Interpolasi kontrol

Jarak terpendek antara dua titik selalu berupa garis lurus. Dengan warna interpolasi, browser mengambil rute pendek secara {i>default<i}. Pertimbangkan sebuah skenario di mana ada dua titik dalam tabung warna HSL. Gradien memperoleh langkah warna dengan berjalan di sepanjang garis di antara dua titik.

linear-gradient(to right, #94e99c, #e06242)

Garis gradien di atas lurus antara warna kehijauan hingga kemerahan warna, yang melewati pusat ruang warna. Meskipun penjelasan di atas bagus untuk membantu pemahaman awal, itu tidak sama persis dengan apa yang terjadi. Berikut adalah gradien di Codepen berikut, dan jelas warnanya tidak putih di tengah seperti demonstrasi tiruan yang ditunjukkan.

Namun, area tengah gradien telah kehilangan kecerahannya. Hal ini karena warna yang paling cerah berada di tepi bentuk ruang warna, bukan di bagian di mana interpolasi melintas. Umumnya disebut sebagai "zona mati". Ada adalah beberapa cara untuk memperbaiki atau mengatasinya.

Menentukan lebih banyak batas gradien untuk menghindari zona mati

Teknik untuk menghindari zona mati saat ini adalah dengan menambahkan perhentian warna tambahan di gradien yang dengan sengaja memandu interpolasi untuk tetap berada dalam rentang ruang warna yang cerah. Ini benar-benar merupakan sebuah solusi, karena perhentian tambahan untuk membantunya mengatasi area mati.

Ada alat gradien yang dibuat oleh Erik Kennedy yang menghitung warna tambahan berhenti untuk Anda, untuk membantu Anda menghindari zona mati, bahkan dalam ruang warna tertarik pada hal tersebut. Dengan menggunakannya, meneruskan warna yang sama dari contoh pertama tetapi mengubah interpolasi warna menjadi HSL, ia menghasilkan ini:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

Dengan titik perhentian terpandu, interpolasi tidak lagi berupa garis lurus, tetapi tampak melengkung di sekitar zona mati, membantu mempertahankan saturasi, sehingga gradien yang jauh lebih cerah.

Meskipun alat ini bekerja dengan baik, bagaimana jika Anda dapat memiliki kontrol langsung dari CSS?

Mengarahkan interpolasi warna

Di Warna 4, kemampuan untuk mengontrol strategi interpolasi hue telah ditambahkan dan merupakan cara baru untuk mengatasi (:wink:) zona mati. Pikirkan tentang hue dan mempertimbangkan gradien 2 perhentian yang hanya mengubah sudut, berubah menjadi hue misalnya dengan beralih dari 140deg ke 240deg.

Jenis interpolasi hue yang lebih pendek vs yang lebih panjang

Gradien secara default mengambil shorter, kecuali jika memang demikian yang Anda tentukan agar aplikasi Rute longer. Rona Opsi interpolasi mengarahkan rotasi sudut, seperti menyuruh seseorang untuk memutar kiri, bukan kanan (heh, Zoolander):

Pada contoh jarak interpolasi hue, jalur pendek dan jalur yang panjang disimulasikan untuk mengilustrasikan perbedaannya. Jarak yang pendek itu lebih sedikit rona di antara keduanya karena ia melakukan perjalanan dengan jarak yang paling sedikit mungkin, di mana jarak yang jauh telah melewati lebih banyak warna.

Meningkatkan vs mengurangi interpolasi hue

Ada dua strategi interpolasi hue lainnya di Warna 4, tetapi keduanya eksklusif untuk silinder ruang warna. Dengan tetap menggunakan dua warna dari contoh sebelumnya, visualisasi sekarang menunjukkan cara kerja peningkatan dan penurunan.

Codepen di atas menggunakan ColorJS untuk mendemonstrasikan hasil yang diharapkan. CSS yang akan Anda tulis untuk mencapai efek yang sama tanpa Library JavaScript akan menjadi:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

Untuk menutup interpolasi hue, berikut tempat seru yang dapat Anda gunakan untuk mengubah hue di antara 2 penghentian warna dan lihat efek pilihan interpolasi hue saat serta bagaimana ruang warna mengubah hasil gradien. Dampaknya bisa sangat different; anggaplah ini sebagai empat trik baru yang baru saja muncul di panel menu warna Anda.

Gradien dalam berbagai ruang warna

Setiap ruang warna, dengan bentuk dan pengaturan warnanya yang unik, menghasilkan gradien yang berbeda. Pada contoh berikut, lihat bagaimana setiap ruang warna menanganinya secara berbeda, terutama pada warna biru ke putih. Perhatikan berapa banyak menjadi ungu di tengah; yang disebut pergeseran hue selama interpolasi.

Beberapa gradien di ruang ini lebih cerah daripada yang lain, atau lebih jarang bergerak melalui zona mati. Ruang seperti lab menggabungkan warna dengan cara yang dioptimalkan untuk saturasi, seperti bukan ruang yang dioptimalkan bagi manusia untuk menulis warna seperti hwb().

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

Demo di atas, meskipun hasilnya kecil, menunjukkan hasil yang lebih konsisten interpolasi dengan lab. Sintaks lab tidak mudah dibaca, ada angka negatif yang sangat asing bila berasal dari rgb atau hsl. Bagus kita dapat menggunakan {i>hwb<i} untuk sintaks yang sudah dikenal, tetapi meminta agar gradien diinterpolasi sepenuhnya di dalam ruang warna lain, seperti oklab.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

Contoh ini menggunakan warna yang sama di {i>hwb<i} tetapi menentukan ruang warna untuk interpolasi ke {i>hwb<i} atau {i>oklab<i}. hwb adalah ruang warna yang cocok untuk iklan cerah, tetapi mungkin ada zona mati atau titik terang (lihat titik panas sian contoh teratas). oklab sangat bagus untuk gradien linier perseptual yang tetap saturasi. Fitur ini sangat menyenangkan karena Anda bisa mencoba beberapa warna berbeda spasi untuk melihat gradien mana yang paling Anda sukai.

Berikut adalah Codepen yang bereksperimen dengan gradien dan ruang warna, mencampur dan strategi yang cocok untuk mengeksplorasi kemungkinannya. Bahkan transisi dari kulit hitam menjadi putih berbeda di setiap ruang warna!

Penjepit gamut

Ada beberapa skenario saat warna dapat meminta sesuatu di luar gamut. Pertimbangkan warna berikut:

rgb(300 255 255)

Jumlah maksimum untuk saluran warna dalam ruang warna rgb adalah 255, tetapi di sini 300 telah ditentukan untuk warna merah. Apa yang terjadi? Penjepit gamut.

Penjepit adalah ketika informasi tambahan dihapus begitu saja. 300 menjadi 255 secara internal ke mesin warna. Warna kini telah dibulatkan di dalam ruang.

Memilih ruang warna

Setelah mempelajari ruang warna dan efeknya, banyak orang yang merasakan kewalahan dan ingin tahu "yang mana" untuk memilih. Dari studi saya dan pengalaman, saya tidak melihat satu ruang warna sebagai satu-satunya untuk semua tugas saya. Masing-masing memiliki momen ketika mereka menghasilkan hasil yang diinginkan.

Jika ada satu ruang terbaik, maka tidak akan ada begitu banyak ruang baru yang diperkenalkan.

Namun, saya dapat mengatakan bahwa ruang CIE—lab, oklab, lch, dan oklch—adalah tempat awal. Jika hasilnya bukan yang saya cari, maka saya akan menguji ruang lain. Untuk mencampur warna dan membuat gradien, saya setuju dengan pilihan spesifikasi default oklab. Untuk sistem warna dan warna UI secara keseluruhan, saya suka oklch.

Berikut adalah beberapa artikel di mana orang-orang berbagi warna terbaru mereka strategi yang diberikan pada ruang warna dan fitur baru ini. Misalnya, Andrey Sitnik sudah berusaha oklch, mungkin mereka akan meyakinkan Anda untuk melakukan hal yang sama:

1. OKLCH di CSS: mengapa kita beralih dari RGB dan HSL dengan Andrey Sitnik
2. Format Warna oleh Josh W. Comeau
3. OK, OKLCH oleh Chris Coyier

Langkah berikutnya

Setelah terbiasa dengan alat dan ruang warna baru, Anda dapat bermigrasi ke warna HD.

Manipulasi dan interpolasi yang lebih jelas serta konsisten dan secara keseluruhan memberikan pengalaman yang lebih berwarna bagi pengguna Anda.

Baca referensi warna selengkapnya dari panduan.