CSS Color 4 menghadirkan fitur dan kemampuan warna gamut yang luas ke web: lebih banyak warna, fungsi manipulasi, dan gradien yang lebih baik.
Selama lebih dari 25 tahun, sRGB
(biru merah hijau standar) telah menjadi satu-satunya
gamut warna untuk gradien dan warna CSS, dengan penawaran ruang
warna di dalamnya seperti rgb(), hsl(), dan hex. Ini adalah kemampuan gamut warna yang paling umum di antara layar; penyebut yang sama. Kami sangat terbiasa menentukan warna dalam gamut ini.
Karena layar semakin mampu menampilkan berbagai warna, CSS memerlukan cara untuk menentukan warna dari dalam rentang yang lebih luas ini. Format warna saat ini tidak memiliki bahasa untuk rentang warna yang luas.
Jika tidak pernah diperbarui, CSS akan terus-menerus berada dalam rentang warna tahun 90-an, dan dipaksa tidak akan cocok dengan penawaran gamut lebar yang ditemukan dalam gambar dan video. Terjebak, hanya menampilkan 30% warna yang dapat dilihat mata manusia. Ucapkan terima kasih kepada CSS Color Level 4 karena telah membantu kami melarikan diri dari jebakan ini; yang ditulis terutama oleh Lea Verou dan Chris Liley.
Mulai Chrome 111, dukungan untuk gamut dan ruang warna CSS Color 4
akan disertakan, bergabung dengan Safari yang telah mendukung display-p3 sejak
2016. CSS kini dapat mendukung layar HD (definisi tinggi), yang menentukan warna dari
gamut HD, sekaligus menawarkan ruang warna dengan spesialisasi. Panduan ini akan
menjelaskan cara untuk mulai memanfaatkan dunia baru warna ini.
Cobalah sendiri
Dalam mendukung browser, ada 50% lebih banyak warna yang dapat dipilih! Anda pikir 16 juta warna terdengar seperti banyak, tunggu sampai Anda melihat berapa banyak warna yang dapat ditampilkan beberapa ruang baru ini. Selain itu, pikirkan tentang semua gradien yang diikat karena kedalaman bit tidak cukup, sehingga itu juga dapat diselesaikan.
Selain lebih banyak warna, warna yang dapat dianggap paling jelas pada tampilan, ruang warna baru menyediakan alat dan metode unik untuk mengelola dan membuat sistem warna. Misalnya, sebelum sekarang kami memiliki HSL dan saluran "lightness"-nya, yang merupakan developer web terbaik yang dimiliki. Sekarang di CSS, kita memiliki "perseptual lightness (perceptual lightness) LCH.
Selain itu, gradien dan pencampuran mendapatkan beberapa upgrade: dukungan ruang warna, opsi interpolasi hue, dan garis berwarna yang lebih sedikit. Gambar berikut menunjukkan beberapa upgrade campuran. Dua campuran warna teratas menggunakan sRGB. Dua campuran warna bagian bawah berada di tampilan p3. Layar p3 memiliki warna yang lebih cerah dan campuran yang dihasilkan hitam dan putih sepenuhnya di tengahnya. Di mana sRGB terlihat sedikit terdesaturasi dan campuran di tengah bukanlah hasil hitam atau putih yang lengkap.
https://codepen.io/web-dot-dev/pen/poZgXQb
Panduan ini akan membahas di mana warna sebelumnya, di mana warnanya akan muncul, dan bagaimana CSS akan memungkinkan dan mendukung developer web untuk mengelola warna.
Ringkasan
Masalah terkait warna dan web adalah bahwa CSS belum siap untuk definisi tinggi, sedangkan layar yang sebagian besar disimpan oleh orang-orang di saku, putaran, atau dipasang di dinding gamut lebar, warna definisi tinggi siap. Kemampuan warna layar tumbuh lebih cepat daripada CSS, kini CSS siap untuk mengejar ketertinggalan.
Ada lebih dari sekadar "lebih banyak warna". Di akhir artikel ini, Anda akan dapat menentukan lebih banyak warna, meningkatkan gradien, dan memilih ruang warna dan gamut warna terbaik untuk setiap tugas.
Apa itu color gamut?
Gamut mewakili ukuran sesuatu. Frasa "juta warna" adalah komentar tentang gamut tampilan, atau rentang warna yang harus dipilih. Pada gambar berikut, tiga gamut dibandingkan, dan semakin besar ukurannya, semakin banyak warna yang ditawarkan.
Color gamut juga dapat diberi nama. Seperti bola basket versus bisbol, atau cangkir kopi versus grande; nama untuk ukuran dapat membantu orang berkomunikasi. Mempelajari nama-nama gamut warna ini membantu Anda berkomunikasi dan memahami berbagai warna dengan cepat.
Artikel ini akan memperkenalkan tujuh gamut baru, semuanya dengan rentang yang lebih luas daripada sRGB, dan menjelaskan berbagai fiturnya untuk membantu Anda memilih gamut mana yang akan digunakan:
Gamut visual manusia
Gamut warna sering dibandingkan dengan gamut visual manusia; keseluruhan warna yang kami yakini dapat dilihat oleh mata manusia. HVS sering digambarkan dengan diagram kromatik, seperti ini:
Bentuk terluar adalah bentuk yang dapat kita lihat sebagai manusia, dan segitiga di dalam adalah
rentang fungsi rgb(), alias ruang warna sRGB.
Seperti yang Anda lihat segitiga di atas, membandingkan ukuran gamut, Anda akan menemukan segitiga di bawah ini. Inilah cara industri untuk berkomunikasi tentang gamut warna dan membandingkannya.
Apa itu ruang warna?
Ruang warna adalah pengaturan gamut, yang menetapkan bentuk dan metode mengakses warna. Banyak contoh yang berbentuk 3D sederhana seperti kubus atau silinder. Pengaturan warna ini menentukan warna mana yang bersebelahan satu sama lain, dan cara kerja akses dan interpolasi warna.
RGB seperti ruang warna persegi panjang, di mana warna diakses dengan menentukan koordinat pada 3 sumbu. HSL adalah ruang warna silinder, yang mengakses warna dengan sudut hue dan koordinat pada 2 sumbu
Spesifikasi level 4 memperkenalkan 12 ruang warna baru untuk mencari warna dari 7 gamut baru yang dibagikan sebelumnya:
Berikut adalah tambahan untuk 4 ruang warna yang sebelumnya tersedia:
Ringkasan color gamut dan ruang warna
Ruang warna adalah pemetaan warna, di mana gamut warna adalah rentang warna. Pertimbangkan gamut warna sebagai total partikel dan ruang warna sebagai botol yang dibuat untuk menampung rentang partikel tersebut.
Berikut adalah visual interaktif oleh Alexey Ardov yang menunjukkan ruang warna. Arahkan, tarik, dan perbesar dalam demo ini. Ubah ruang warna untuk melihat visualisasi ruang lain.
- Gunakan gamut warna untuk membahas berbagai warna, seperti rentang rendah atau gamut sempit versus rentang tinggi atau gamut luas.
- Gunakan ruang warna untuk membahas pengaturan warna, sintaksis yang digunakan untuk menentukan warna, memanipulasi warna, dan berinterpolasi melalui warna.
Cara mengakses lebih banyak warna, ruang baru, dan hasil debug
CSS Warna 4 menguraikan banyak fitur dan alat baru untuk CSS dan warna. Pertama, rekap di mana warna sebelum fitur-fitur baru ini. Kemudian, ringkasan ruang warna, sintaksis, dan alat yang baru.
Codepen berikut menampilkan semua sintaksis warna baru dan lama secara bersamaan:
Ulasan ruang warna klasik
Sejak tahun 2000-an, Anda telah dapat menggunakan hal berikut untuk setiap properti CSS
yang menerima warna sebagai nilai: heksadesimal (angka heksadesimal), rgb(), rgba(), dengan
nama seperti hotpink, atau dengan kata kunci seperti
currentColor.
Sekitar tahun 2010, bergantung pada browser Anda, CSS dapat menggunakan
warna hsl(). Kemudian pada tahun 2017,
hex dengan alfa muncul. Terakhir, baru-baru ini, hwb() mulai mendapatkan
dukungan di browser.
Semua ruang warna klasik ini mereferensikan warna dalam gamut yang sama, sRGB.
Heksagon
Ruang warna heksadesimal menentukan R, G, B, dan A dengan angka heksadesimal. Contoh kode berikut menunjukkan semua cara sintaksis ini dapat menentukan plus opasitas merah, hijau, dan biru.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
Ruang warna RGB memiliki akses langsung ke saluran merah, hijau, dan biru. Ini memungkinkan penentuan jumlah antara 0 dan 255 atau sebagai persentase 0 hingga 100. Sintaksis ini ada sebelum beberapa normalisasi sintaksis ada di spesifikasi, sehingga Anda akan melihat sintaksis koma dan no-koma di mana-mana. Selanjutnya, tanda koma tidak lagi diperlukan.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
Salah satu ruang warna pertama yang berorientasi pada bahasa dan komunikasi manusia, HSL (saturasi hue dan kecerahan) menawarkan semua warna dalam gamut sRGB tanpa mengharuskan otak Anda untuk mengetahui bagaimana merah, hijau, dan biru berinteraksi. Seperti RGB, RGB juga awalnya memiliki koma dalam sintaksis, tetapi selanjutnya, koma tidak lagi diperlukan.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Ruang warna gamut sRGB lain yang berorientasi pada cara manusia mendeskripsikan warna adalah HWB (hue, putih, kegelapan). Penulis dapat memilih hue dan mencampurkan warna putih atau hitam untuk menemukan warna yang diinginkan.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Inilah ruang warna web baru
Ruang warna berikut menawarkan akses ke gamut yang lebih besar daripada sRGB. Ruang warna display-p3 menawarkan warna hampir dua kali lebih banyak daripada RGB, sedangkan Rec2020 menawarkan hampir dua kali lebih banyak dari display-p3. Banyak sekali warnanya!
Fungsi color()
Fungsi
color()
baru dapat digunakan untuk setiap ruang warna yang menentukan warna dengan saluran
R, G, dan B. 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., bertambah menjadi
daftar panjang, lebih mudah untuk menjadikan ruang warna sebagai parameter.
Kelebihan
- Ruang yang dinormalkan untuk mengakses ruang warna yang menggunakan saluran RGB.
- Dapat meningkatkan skala ke ruang warna berbasis RGB gamut apa pun.
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(). Sistem ini juga menawarkan
desimal antara 0 dan 1, digunakan persis seperti 0% hingga 100%.
Kelebihan
- Hampir semua layar mendukung rentang ruang warna ini.
- Dukungan alat desain.
Kekurangan
.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()
Alternatif linear untuk RGB ini menawarkan intensitas saluran yang dapat diprediksi.
Kelebihan
- Akses langsung ke saluran RGB, yang berguna untuk berbagai hal seperti game engine atau pertunjukan cahaya.
Kekurangan
- Tidak linear secara persepsi.
- Hitam dan putih dikemas di 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 akan lebih baik jika Anda melihat srgb dan linear-srgb gradien hitam ke putih
untuk mengilustrasikan perbedaannya:
LCH
Ruang pertama dalam postingan ini yang memperkenalkan sintaksis untuk mengakses warna di luar gamut RGB. Class ini juga yang pertama membuatnya sangat mudah untuk membuat warna gamut untuk tampilan. Hal ini karena warna ruang CIE (lch, oklch, lab, oklab) mampu mewakili seluruh spektrum warna yang terlihat oleh manusia.
Ruang warna ini dibuat berdasarkan penglihatan manusia dan menawarkan sintaksis untuk menentukan salah satu warna tersebut dan lainnya. Saluran LCH adalah kecerahan, kroma dan rona. Hue adalah sudut, seperti di HSL dan HWB. Lightness adalah nilai antara 0 dan 100, tetapi tidak seperti kecerahan HSL, kecerahan ini adalah kecerahan khusus “linear perseptual”, yang berpusat pada manusia. Chroma mirip dengan saturasi; dapat berkisar dari 0 hingga 230, tetapi juga secara teknis tidak terbatas.
Kelebihan
- Manipulasi warna yang dapat diprediksi berkat linear secara persepsi, sebagian besar (lihat oklch).
- Menggunakan saluran yang sudah dikenal.
- Sering kali memiliki gradien yang cerah.
Kekurangan
- Mudah untuk keluar dari gamut.
- Terkadang, gradien mungkin 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 dibuat untuk mengakses gamut CIE, sekali lagi dengan dimensi pencerahan linear persepsi (L). A dan B di LAB mewakili sumbu unik penglihatan warna manusia: merah-hijau, dan biru-kuning. Ketika A diberi nilai positif, maka warna merah akan ditambahkan, dan warna hijau akan ditambahkan saat di bawah 0. Ketika B diberi bilangan positif, maka nilai kuning ditambahkan, sedangkan nilai negatif ditambahkan ke biru.
Kelebihan
- Gradien konsisten secara persepsi.
- Rentang dinamis tinggi.
Kekurangan
- Potensi perubahan hue.
- Sulit untuk menentukan penulis atau menebak warna saat membaca nilai-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);
}
OKE
Ruang warna ini bersifat korektif untuk LCH. Dan seperti LCH, (L) terus mewakili kecerahan linear secara persepsi, C untuk kroma dan H untuk hue.
Ruang ini terasa familier jika Anda pernah bekerja dengan HSL atau LCH. Pilih sudut pada roda warna untuk H, pilih tingkat kecerahan atau kegelapan dengan menyesuaikan L, tetapi kemudian kita memiliki kroma, bukan saturasi. Keduanya cukup identik, kecuali penyesuaian pada kecerahan dan kroma cenderung berpasangan. Jika tidak, akan mudah untuk meminta warna kroma tinggi yang berada di luar gamut target.
Kelebihan
- Tidak ada kejutan ketika bekerja dengan corak warna biru dan ungu.
- Cahaya yang linear secara persepsi.
- Menggunakan saluran yang sudah dikenal.
- Rentang dinamis tinggi.
- Memiliki pemilih warna modern - karya Evil Martians.
Kekurangan
- Mudah untuk keluar dari gamut.
- Baru dan relatif belum dijelajahi.
- 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);
}
OKLAB
Ruang ini bersifat korektif untuk LAB. Class ini juga diklaim sebagai ruang yang dioptimalkan untuk kualitas pemrosesan gambar. Bagi kita, ini berarti gradien dan kualitas manipulasi fungsi warna dalam CSS.
Kelebihan
- Ruang default untuk animasi dan interpolasi.
- Cahaya yang linear secara persepsi.
- Tidak ada pergeseran hue seperti LAB.
- Gradien konsisten secara persepsi.
Kekurangan
- Baru dan relatif belum dijelajahi.
- 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);
}
Layar P3
Tampilan P3 gamut dan ruang warna menjadi populer sejak Apple mendukungnya sejak 2015 di iMac. Apple juga mendukung display-p3 di halaman web melalui CSS sejak 2016, lima tahun lebih cepat dari browser lainnya. Jika berasal dari sRGB, ini adalah ruang warna yang tepat untuk mulai bekerja saat Anda memindahkan gaya ke rentang dinamis yang lebih tinggi.
Kelebihan
- Dukungan hebat, dianggap sebagai dasar pengukuran 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 gerakan UHDTV (televisi ultra-high-definition), yang menyediakan berbagai warna untuk digunakan dalam media 4k dan 8k. Rec2020 adalah gamut berbasis RGB lainnya, lebih besar dari display-p3, tetapi tidak sama umum di antara konsumen seperti Display P3.
Kelebihan
- Warna Ultra HD.
Kekurangan
- Tidak terlalu 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
Singkatan dari Adobe 1998 RGB, A98 RGB dibuat oleh Adobe untuk menampilkan sebagian besar warna yang dapat dicapai dari printer CMYK. RGB menawarkan lebih banyak warna daripada sRGB, terutama sian dan rona hijau.
Kelebihan
- Lebih besar dari ruang warna sRGB dan Display P3.
Kekurangan
- Bukan ruang umum yang digunakan desainer digital.
- Tidak banyak orang yang memindahkan 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 berbagai warna primer dan memiliki perubahan hue minimal saat mengubah kecerahan. Alat ini juga mengklaim mencakup 100% warna permukaan dunia nyata seperti yang didokumentasikan oleh Michael Pointer pada tahun 1980.
Kelebihan
- Pergeseran hue yang minimal saat mengubah kecerahan.
- Warna primer cerah.
Kekurangan
- Sekitar 13% warna yang ditawarkan bersifat imajiner, yang berarti warna tersebut 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 penglihatan rata-rata. Itulah sebabnya digunakan sebagai referensi standar untuk ruang warna lainnya. Y adalah luminans, X dan Z adalah kemungkinan kroma dalam Y luminans yang ditentukan.
Perbedaan antara d50 dan d65 adalah titik putih, yang mana d50 menggunakan titik putih d50 dan d65 menggunakan titik putih d65.
Kelebihan
- Akses linier-light memiliki kasus penggunaan yang praktis.
- Bagus 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 kustom
Spesifikasi CSS Color 5 juga memiliki jalur untuk mengajarkan ruang warna kustom ke browser. Ini adalah profil ICC yang memberi tahu browser cara menyelesaikan warna.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Setelah dimuat, akses warna dari profil kustom ini dengan fungsi color()
dan tentukan nilai saluran untuknya.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Jenis interpolasi warna
Transisi dari satu warna ke warna lain dapat ditemukan dalam animasi, gradien, dan pencampuran warna. Transisi ini biasanya ditentukan sebagai warna awal dan warna akhir, yang memungkinkan browser untuk melakukan interpolasi. Interpolasi dalam hal ini berarti menghasilkan serangkaian warna di antara warna untuk membuat transisi yang mulus, bukan transisi instan.
Dengan gradien, interpolasi adalah serangkaian warna di sepanjang bentuk. Dengan animasi, muncul 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 warna ditampilkan sekaligus:
Yang baru di interpolasi warna
Dengan penambahan gamut dan ruang warna baru, ada opsi tambahan
baru untuk interpolasi. Mentransisi 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);
}
Tidak dapat melihat demo Codepen?
Lalu apa yang terjadi jika Anda melakukan transisi dari warna dalam satu ruang ke warna di 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%));
}
Tidak dapat melihat demo Codepen?
Untungnya, spesifikasi Color 4
memiliki petunjuk untuk browser tentang cara menangani interpolasi
lintas warna ini. Dalam kasus di atas untuk .gradient, browser akan melihat ruang warna yang berbeda dan menggunakan ruang warna default oklab.
Anda mungkin berpikir bahwa browser akan menggunakan lch sebagai ruang warna, karena itu adalah warna pertama, tetapi tidak demikian, dan itulah alasan saya menampilkan gradien perbandingan kedua .lch. Gradien .lch adalah gradien dari ruang warna lch.
Garis banding yang lebih sedikit berkat warna 16-bit
Sebelum warna ini diterapkan, 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 warna yang mungkin (mengabaikan alfa). 2 ^ 24 = 16.777.216, "juta warna".
Setelah warna ini berfungsi, empat nilai floating point 16 bit, setiap saluran memiliki floatnya sendiri, bukan disatukan. Ini adalah total 64-bit data, yang menghasilkan lebih dari jutaan warna.
Tindakan ini diperlukan untuk mendukung warna HD. Hal ini meningkatkan jumlah informasi warna yang dapat disimpan, yang memiliki efek samping yang bagus artinya ada lebih banyak warna untuk digunakan oleh browser dalam gradien.
Garis miring gradien adalah saat warna tidak cukup untuk membuat gradien yang mulus dan "garis" warna menjadi terlihat. Banding sangat dimitigasi dengan upgrade ke warna resolusi lebih tinggi.
Mengontrol interpolasi
Jarak terpendek antara dua titik selalu berupa garis lurus. Dengan interpolasi warna, browser mengambil rute pendek secara default. Pertimbangkan skenario di mana ada dua titik dalam silinder warna HSL. Gradien memperoleh tahapan warna dengan bergerak sepanjang garis di antara dua titik.
linear-gradient(to right, #94e99c, #e06242)
Tampilan top-down, silinder HSL dengan garis di antara perhentian warna
Garis gradien di atas lurus di antara warna kehijauan ke warna kemerahan, yang melewati pusat ruang warna. Meskipun hal di atas sangat bagus untuk membantu pemahaman awal, namun sebetulnya tidak persis seperti itu. Berikut adalah gradien di Codepen berikut, dan jelas tidak berwarna putih di tengahnya seperti demonstrasi tiruan yang ditunjukkan.
Namun, area tengah gradien telah kehilangan vibrasinya. Hal ini karena warna yang paling cerah berada di tepi bentuk ruang warna, bukan di tengah tempat interpolasi berlangsung di dekatnya. Hal ini biasanya disebut sebagai "zona mati". Ada beberapa cara untuk memperbaiki atau mengatasi hal ini.
Menentukan lebih banyak batas gradien untuk menghindari zona mati
Teknik untuk menghindari zona mati saat ini adalah dengan menambahkan perhentian warna tambahan dalam gradien yang dengan sengaja memandu interpolasi agar tetap berada dalam rentang yang terang dari ruang warna. Ini benar-benar sebuah solusi, karena perhentian tambahan membantunya bekerja di sekitar zona mati.
Ada alat gradien yang dibuat oleh Erik Kennedy yang menghitung perhentian warna tambahan untuk Anda, untuk membantu Anda menghindari zona mati bahkan di ruang warna yang cenderung mengarah ke arahnya. Dengan meneruskan warna yang sama dari contoh pertama, tetapi mengubah interpolasi warna ke HSL, akan menghasilkan ini:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Tampilan vertikal silinder HSL dengan garis melengkung yang menampilkan 9 perhentian warna
Dengan titik perhentian terpandu, interpolasi tidak lagi garis lurus, tetapi terlihat melengkung di sekitar zona mati, membantu mempertahankan saturasi, yang menghasilkan gradien yang jauh lebih cerah.
Meskipun alat ini berfungsi dengan baik, bagaimana jika Anda dapat memiliki kontrol serupa atau yang lebih besar langsung dari CSS?
Mengarahkan interpolasi warna
Di Warna 4, kemampuan untuk mengontrol strategi interpolasi hue
telah ditambahkan dan merupakan cara baru untuk (:wink:) zona mati. Pikirkan tentang sudut hue dan pertimbangkan gradien 2 perhentian yang hanya mengubah sudut, beralih hue dari 140deg ke 240deg misalnya.
Jenis interpolasi hue yang lebih pendek vs lebih panjang
Secara default, gradien akan mengambil
rute shorter yang sesuai, kecuali
jika Anda menentukannya untuk mengambil
rute longer. Opsi interpolasi hue mengarahkan rotasi sudut, seperti memberi tahu seseorang untuk belok ke kiri, bukan ke kanan (heh, Zoolander):
Dalam contoh visual jarak interpolasi hue di atas, jalur pendek dan jalur panjang disimulasikan untuk menggambarkan perbedaannya. Jarak pendek memiliki lebih sedikit rona karena jarak tempuh melalui jarak yang paling sedikit, sedangkan jarak jauh akan melalui lebih banyak hue.
Meningkatkan vs menurunkan interpolasi hue
Ada dua strategi interpolasi hue lagi di Warna 4, tetapi strategi tersebut eksklusif untuk ruang warna silinder. Tetap menggunakan dua warna dari contoh sebelumnya, visual kini menunjukkan cara kerja peningkatan dan penurunan.
Codepen di atas menggunakan ColorJS untuk menunjukkan hasil yang diharapkan. CSS yang akan Anda tulis untuk mencapai efek yang sama tanpa library JavaScript adalah:
.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 adalah playground yang menyenangkan tempat Anda dapat mengubah hue antara 2 perhentian warna dan melihat efek pilihan interpolasi hue serta bagaimana ruang warna mengubah hasil gradien. Efeknya bisa sangat berbeda; anggap ini sebagai empat trik baru yang baru saja masuk ke panel warna Anda.
Gradien dalam ruang warna yang berbeda
Setiap ruang warna, mengingat bentuk dan pengaturan warnanya yang unik, akan menghasilkan gradien yang berbeda. Lihat contoh di bawah, terutama pada "biru ke putih". Lihat bagaimana setiap ruang warna menanganinya secara berbeda. Perhatikan berapa banyak yang berubah menjadi ungu di tengah, yang disebut "hue shift" selama interpolasi.
Tidak dapat melihat demo Codepen?
Gambar yang ditampilkan hanyalah 1 dari sekian banyak contoh dari Codepen. Sebaiknya Anda mencoba Canary atau Safari Tech Preview untuk melihatnya sendiri.
Beberapa gradien di ruang ini akan lebih cerah daripada yang lain atau bergerak lebih sedikit melalui zona mati.
Ruang seperti lab mengemas warna bersama dengan cara yang dioptimalkan untuk saturasi, bukan ruang yang dioptimalkan agar manusia dapat 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 kecil dalam hasilnya, menunjukkan interpolasi yang lebih konsisten dengan lab. Sintaks lab tidak mudah dibaca, tetapi ada angka negatif yang sangat asing ketika berasal dari rgb atau hsl. Kabar baik, kita dapat menggunakan hwb untuk sintaksis yang sudah dikenal, tetapi meminta agar gradien diinterpolasi sepenuhnya 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%));
}
Tidak dapat melihat demo Codepen?
Contoh ini menggunakan warna yang sama pada hwb, tetapi menentukan ruang warna untuk
interpolasi ke hwb atau oklab. hwb adalah ruang warna yang bagus untuk getaran tinggi, tetapi mungkin dengan zona mati atau titik terang (lihat hot spot sian pada contoh atas). oklab sangat bagus untuk gradien linear persepsi yang tetap saturasi. Fitur ini sangat menyenangkan karena Anda dapat mencoba beberapa ruang warna berbeda untuk melihat gradien mana yang paling Anda sukai.
Berikut adalah Codepen yang bereksperimen dengan gradien dan ruang warna, strategi mencampur dan mencocokkan untuk mengeksplorasi kemungkinannya. Bahkan transisi dari hitam ke putih pun berbeda di setiap ruang warna!
Tidak dapat melihat demo Codepen?
Penjepit gamut
Ada skenario saat warna dapat meminta sesuatu di luar gamut. Pertimbangkan warna berikut:
rgb(300 255 255)
Batas maksimum untuk saluran warna di ruang warna rgb adalah 255, tetapi di sini
300 ditentukan untuk merah. Apa yang terjadi? Penjepit gamut.
Clamping adalah saat informasi tambahan dihapus begitu saja. 300 akan menjadi 255
secara internal untuk mesin warna. Warnanya sekarang telah dibatasi di dalam ruangnya.
Memilih ruang warna
Setelah mempelajari ruang warna ini dan efeknya, banyak orang merasa kewalahan dan ingin tahu "satu" mana yang harus dipilih. Berdasarkan studi dan pengalaman saya, saya tidak melihat satu ruang warna sebagai satu warna untuk semua tugas saya. Masing-masing memiliki momen ketika menghasilkan hasil yang diinginkan.
Jika ada satu ruang terbaik, tidak akan ada begitu banyak ruang baru yang diperkenalkan.
Namun, saya dapat mengatakan bahwa ruang CIE—lab, oklab, lch, dan oklch—adalah
tempat awal saya. Jika hasilnya tidak sesuai dengan
yang saya cari, maka saya akan menguji bidang lainnya. Untuk mencampur warna dan membuat gradien, saya setuju dengan
pilihan spesifikasi default oklab. Untuk sistem warna dan warna UI keseluruhan, saya suka
oklch.
Berikut adalah beberapa artikel di mana orang-orang telah membagikan strategi warna terbaru mereka mengingat ruang dan fitur warna baru ini. Misalnya, Andrey Sitnik telah menggunakan oklch secara menyeluruh, mungkin mereka akan meyakinkan Anda untuk melakukan hal yang sama:
- OKLCH di CSS: alasan kita beralih dari RGB dan HSL oleh Andrey Sitnik
- Color Formats oleh Josh W. Comeau
- OK, OKLCH oleh Chris Coyier
Bermigrasi ke warna CSS HD
Ada dua strategi utama untuk memperbarui warna project web Anda guna mendukung tampilan gamut lebar:
Degradasi halus
Gunakan ruang warna baru dan biarkan browser serta sistem operasi menentukan warna yang akan ditampilkan berdasarkan kemampuan tampilan.Progressive enhancement
Gunakan@supportsdan@mediauntuk menilai kemampuan browser pengguna, dan jika kondisi terpenuhi, akan memberikan warna gamut yang luas.
Jika browser tidak memahami warna display-p3:
color: red;
color: color(display-p3 1 0 0);
Jika browser memahami warna display-p3:
color: red;
color: color(display-p3 1 0 0);
Masing-masing memiliki kelebihan dan kekurangan. Berikut ini daftar singkat pro dan kontranya:
Degradasi halus
- Kelebihan
- Rute paling sederhana.
- Browser akan menggamut peta atau menjepit ke sRGB jika bukan tampilan gamut lebar, sehingga tanggung jawab ada pada browser.
- Kekurangan
- Browser mungkin menjepit atau memetakan gamut ke warna yang tidak Anda sukai.
- Browser mungkin tidak memahami permintaan warna dan gagal sepenuhnya. Namun, hal ini dapat dimitigasi dengan menentukan warna dua kali, sehingga memungkinkan penurunan penggantian ke warna sebelumnya yang dipahami.
Progressive enhancement
- Kelebihan
- Kontrol lebih besar dengan fidelitas warna terkelola.
- Strategi tambahan yang tidak memengaruhi warna saat ini.
- Kekurangan
- Anda perlu mengelola dua sintaksis warna terpisah.
- Anda perlu mengelola dua color gamut terpisah.
Memeriksa dukungan gamut dan ruang warna
Browser memungkinkan pemeriksaan dukungan untuk kemampuan gamut lebar dan dukungan sintaksis warna dari CSS dan JavaScript. Gamut warna persis yang belum tersedia oleh pengguna. Jawaban umum diberikan sehingga privasi pengguna dijaga. Namun, dukungan ruang warna yang tepat tersedia, karena tidak spesifik untuk kemampuan hardware pengguna seperti gamut.
Kueri dukungan color gamut
Contoh kode berikut memeriksa rentang warna pengguna yang berkunjung di tampilannya.
Memeriksa dari CSS
Permintaan dukungan yang paling tidak spesifik adalah
kueri media
dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Perkiraan, atau lebih, dukungan dapat ditanyakan dengan
kueri media
color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Ada dua kueri media tambahan untuk memeriksa dukungan:
Memeriksa dari JavaScript
Untuk JavaScript, fungsi
window.matchMedia()
dapat dipanggil dan meneruskan kueri media untuk evaluasi.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Pola di atas dapat disalin untuk kueri media lainnya.
Kueri dukungan ruang warna
Contoh kode berikut memeriksa browser pengguna yang berkunjung dan pemilihan ruang warna yang akan digunakan.
Memeriksa dari CSS
Dukungan ruang warna individual dapat ditanyakan menggunakan
kueri @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Memeriksa dari JavaScript
Untuk JavaScript, fungsi
CSS.supports()
dapat dipanggil dan meneruskan pasangan properti dan nilai untuk melihat apakah
browser memahaminya.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Menggabungkan hardware dan pemeriksaan penguraian
Selagi menunggu setiap browser menerapkan fitur warna baru ini, sebaiknya periksa kemampuan hardware dan kemampuan penguraian warna. Inilah yang sering saya gunakan ketika secara bertahap meningkatkan warna menjadi definisi tinggi:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Warna proses debug dengan Chrome DevTools
Chrome DevTools telah diupdate dan dilengkapi dengan alat baru untuk membantu developer membuat, mengonversi, dan men-debug warna HD.
Pemilih warna diperbarui
Pemilih warna kini mendukung semua ruang warna baru. Memungkinkan penulis untuk berinteraksi dengan nilai channel seperti yang biasa mereka lakukan.
Batas Gamut
Garis batas gamut juga telah ditambahkan, sehingga menggambar garis antara sRGB dan gamut display-p3. Memperjelas gamut mana warna yang dipilih.
Hal ini membantu penulis membedakan secara visual antara warna HD dan warna non-HD.
Hal ini sangat membantu saat bekerja dengan fungsi color() dan ruang warna baru karena keduanya mampu menghasilkan warna non-HD dan HD. Jika
ingin memeriksa gamut warna yang Anda miliki, munculkan pemilih warna dan lihat hasilnya.
Mengonversi warna
DevTools dapat mengonversi warna antara format yang didukung seperti hsl, hwb, rgb, dan hex selama bertahun-tahun. shift + click pada contoh warna persegi di
panel Styles untuk melakukan konversi ini. Alat warna baru tidak hanya merotasi
konversi, tetapi juga menghasilkan pop-up tempat penulis dapat melihat dan memilih
konversi yang mereka inginkan.
Saat melakukan konversi, penting untuk mengetahui apakah konversi sudah diklip agar sesuai dengan ruang. DevTools kini memiliki ikon peringatan terhadap warna yang dikonversi yang akan memberi tahu Anda tentang pemotongan ini.
Temukan fitur proses debug CSS lainnya di DevTools dalam pengumuman terbaru.
Kesimpulan
Ruang warna non-sRGB di web masih dalam tahap awal, tetapi saya yakin kita akan melihat peningkatan penggunaan dari desainer dan developer dari waktu ke waktu. Mengetahui ruang warna mana yang akan digunakan untuk membangun sistem desain, misalnya, adalah alat yang kuat yang harus ada di panel bagi kreator. Setiap ruang warna menawarkan fitur unik dan alasan penambahannya ke spesifikasi CSS, dan Anda boleh memulainya dengan hal ini terlebih dahulu lalu menambahkannya sesuai kebutuhan.
Nikmati bermain dengan mainan warna baru ini! Manipulasi dan interpolasi yang konsisten serta lebih mencolok dan secara keseluruhan memberikan pengalaman yang lebih berwarna bagi pengguna.
Bacaan tambahan
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/