Apa itu gamut warna: sRGB, Display P3, dan warna di luar gamut
Gamut adalah kumpulan warna yang bisa ditampilkan sebuah layar atau ruang warna. Web dibangun di atas sRGB, tetapi kini sebagian besar ponsel dan banyak laptop menampilkan Display P3, dengan merah, hijau, dan oranye yang jauh lebih mencolok.
Dibaca 2 menit
Apa itu gamut
Setiap layar mencampur cahaya merah, hijau, dan biru. Merah, hijau, dan biru paling murni yang bisa dihasilkannya menjadi sudut-sudut sebuah segitiga, dan setiap warna di dalam segitiga itu termasuk gamutnya. Warna di luar segitiga itu memang tidak bisa ditampilkan layar tersebut.
sRGB, Display P3, dan Rec. 2020
sRGB adalah standar bawaan web dan sebagian besar monitor yang dijual sebelum 2016. HEX, rgb(), dan hsl() semuanya menggambarkan warna sRGB.
Display P3 mencakup sekitar seperempat lebih banyak warna daripada sRGB, terutama hijau, merah, dan oranye yang mencolok. iPhone, iPad, Mac, serta banyak ponsel Android dan laptop premium memakainya. Di CSS, warna ini ditulis sebagai color(display-p3 r g b) atau sebagai nilai OKLCH dengan kroma tinggi.
Rec. 2020 lebih luas lagi dan dipakai untuk video HDR. Sangat sedikit layar yang mencakupnya sepenuhnya.
| Format | Nilai |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Apa yang terjadi pada warna di luar gamut
Jika sebuah warna CSS berada di luar gamut layar, browser harus menampilkan warna lain. Pemotongan sederhana (clipping) memangkas setiap kanal ke batasnya dan bisa mengubah rona. CSS Color 4 justru merekomendasikan pemetaan gamut di OKLCH: pertahankan kecerahan dan rona, lalu turunkan kroma sampai warnanya muat.
PickShade menandai setiap warna yang berada di luar sRGB dan menampilkan hasil pemetaannya, jadi Anda tahu persis apa yang akan dilihat orang di layar lama.
Cara aman memakai warna P3 di CSS
Tulis cadangan sRGB lebih dulu dan nilai gamut lebar sesudahnya, atau bungkus nilai yang mencolok dalam media query color-gamut.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Tanya jawab
Bagaimana cara tahu apakah sebuah warna ada di dalam sRGB?
Tempelkan ke PickShade. Setiap warna di luar sRGB mendapat peringatan gamut beserta warna terdekat yang masih muat.
Apakah warna P3 berfungsi di Windows?
Ya, jika monitornya mencakup P3 dan browser mengenali profil layarnya. Di layar sRGB, browser memetakan warna itu ke dalam sRGB, jadi tidak ada yang rusak.
Apakah HEX terbatas pada sRGB?
Ya. HEX, rgb(), hsl(), dan hwb() selalu menggambarkan warna sRGB. Pakai oklch() atau color(display-p3 ...) untuk warna gamut lebar.