Pemilih warna bekerja dalam OKLCH, ruang warna perseptual CSS modern. Dari kiri ke kanan pada area, kroma naik dari abu-abu hingga nilai tertinggi yang bisa ditampilkan layar pada kecerahan tersebut, sehingga setiap titik adalah warna yang bisa dipakai, dan penanda tetap di tempatnya saat hue berputar.
Kolom teksnya menerima warna CSS apa pun, termasuk nama warna, dan tombol format menuliskan nilainya sebagai hex, rgb(), hsl(), oklch(), atau color(display-p3). Warna di luar gamut suatu format dibawa masuk ke gamut itu dengan cara CSS, dengan kecerahan dan hue-nya tetap dipertahankan.
Tambahkan swatches sebagai pilihan warna, dan contrastWith untuk memeriksa kontras warna terhadap latar belakang sesuai cara WCAG 2 mengukurnya. Jika browser menyediakan pipet warna, sebuah tombol bisa mengambil warna dari layar.
Warna brand
Contoh warna bernama, dan kontras teks putih di atas warna tersebut: pilih warna yang terang, maka AA gagal.
#4f46e5
Gamut lebar
gamut="p3" mengisi area dengan warna Display P3, dan garis putus-putus menandai batas sRGB. Nilainya tetap dalam oklch().
Di dalam popover
Tombol yang menampilkan warna membuka pemilih di dalam popover.