CSS Color 4 menghadirkan kemampuan dan alat 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 sudah terbiasa menentukan warna di dalamnya.
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 kita meloloskan diri, yang ditulis terutama oleh Lea Verou dan Chris Liley.
Chrome mendukung gamut CSS Warna 4 dan ruang warna. CSS kini dapat mendukung layar HD (definisi tinggi), yang menentukan warna dari gamut HD sekaligus menawarkan ruang warna dengan spesialisasi.
Cobalah sendiri
Panduan ini memiliki tiga bagian. Terus baca untuk mengingat di mana warna itu. Kemudian, baca arah tujuan warna dan cara mengelola warna di masa mendatang dengan bermigrasi ke warna HD.
Ringkasan
Di browser yang didukung, tersedia warna 50% lebih banyak untuk dipilih. Jika Anda merasa 16 juta warna terdengar seperti banyak, tunggu sampai Anda melihat berapa banyak warna yang dapat ditampilkan oleh 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, bisa dibilang warna paling jelas yang mampu ditampilkan, 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 penggabungan.
https://codepen.io/web-dot-dev/pen/poZgXQb
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 dokumen 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 mengulas gamut warna sebelumnya. Anda dapat membaca tujuh gamut baru di Mengakses lebih banyak warna dan ruang baru.
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. 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.
Ulasan ruang warna klasik {#classic-color-spaces}
CSS Warna 4 menguraikan banyak fitur dan alat baru untuk CSS dan warna. Pertama, rekap di mana warna sebelum fitur-fitur baru ini.
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%);
}
Langkah berikutnya
Baca tentang ruang warna, sintaksis, dan alat baru, lalu pelajari cara bermigrasi ke warna HD.
Ruang warna non-sRGB di web masih dalam tahap awal, tetapi kita akan melihat peningkatan penggunaan dari desainer dan developer seiring 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 dan menambahkannya sesuai kebutuhan.
Resource
Baca artikel tingkat warna 5 kami yang lainnya.
Dan, Anda dapat menemukan bacaan tambahan di seluruh web:
- Modul Warna CSS Level 4 dari W3C
Modul Warna CSS Level 5 dari W3C
Dan alat: