Dokumen ini adalah bagian dari panduan warna CSS definisi tinggi.
CSS Warna 4 menguraikan banyak fitur dan alat baru untuk CSS dan warna. Codepen berikut menampilkan semua sintaksis warna baru dan lama secara bersamaan:
Baca ringkasan ruang warna klasik.
Spesifikasi level 4 memperkenalkan 12 ruang warna baru untuk mencari warna, naik dari 7 gamut baru yang dibagikan sebelumnya:
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() {#linear-sRGB}
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
LCH memperkenalkan sintaksis untuk mengakses warna di luar gamut RGB. Hal ini juga yang pertama memudahkan pembuatan warna out-of-gamut untuk tampilan. Ini karena semua warna ruang CIE (lch, oklch, lab, oklab) dapat 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. Cahaya adalah nilai antara 0 dan 100. Ini adalah kecerahan yang berfokus pada manusia "yang bersifat linier secara persepsi". Chroma mirip dengan saturasi; rentangnya dapat berkisar dari 0 hingga 230, tetapi 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);
}
A98 RGB {#a98-RGB}
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. Perangkat ini juga mengklaim dapat 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.
Istilah Kunci: Titik putih adalah atribut ruang warna, yang berarti putih sebenarnya ada dalam ruang. Untuk layar elektronik, D65 adalah titik putih yang paling umum, dan merupakan kependekan dari 6500 kelvin. Titik putih harus cocok dalam konversi warna agar suhu warna (kehangatan atau kesejukan) tidak terpengaruh.
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);
}
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%));
}
Untungnya, spesifikasi Color 4
memiliki petunjuk untuk browser tentang cara menangani interpolasi
lintas warna ini. Untuk .gradient, browser memperhatikan ruang warna yang membedakan dan menggunakan ruang warna default oklab.
Anda mungkin berpikir bahwa browser akan menggunakan lch sebagai ruang warna, karena itu adalah warna pertama, tetapi tidak. Itulah sebabnya 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 vertikal 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 perhentian 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 bisa memiliki kontrol serupa atau 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 untuk mengambil rute shorter, 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 jarak interpolasi hue, jalur pendek dan jalur panjang disimulasikan untuk menggambarkan perbedaannya. Jarak pendek memiliki lebih sedikit corak warna karena telah melakukan perjalanan dengan jarak yang paling sedikit, sedangkan jarak jauh telah melalui lebih banyak corak.
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, diberi bentuk dan pengaturan warna yang unik, akan menghasilkan gradien yang berbeda. Pada contoh berikut, lihat cara setiap ruang warna menangani hal tersebut secara berbeda, terutama pada biru ke putih. Perhatikan berapa banyak yang menjadi ungu di tengah; itu disebut pergeseran hue selama interpolasi.
Beberapa gradien di ruang ini lebih dinamis 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%));
}
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!
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 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
Langkah berikutnya
Setelah memahami ruang dan alat warna baru, Anda dapat bermigrasi ke warna HD.
Lebih banyak getaran, manipulasi dan interpolasi yang konsisten, dan secara keseluruhan memberikan pengalaman yang lebih berwarna bagi pengguna.
Baca referensi warna lainnya dari panduan ini.