Renk seçici, modern CSS’in algısal renk uzayı olan OKLCH’de çalışır. Renk alanında soldan sağa doygunluk (chroma), griden ekranın o açıklıkta gösterebildiği en yüksek değere kadar artar; böylece her nokta kullanılabilir bir renktir ve renk tonu döndükçe tutamaç yerinde kalır.
Metin alanı, renk adları dahil her CSS rengini kabul eder; biçim düğmesi de değeri hex, rgb(), hsl(), oklch() ya da color(display-p3) olarak yazar. Bir biçimin gamı dışında kalan renk, CSS’in yöntemiyle açıklığı ve tonu korunarak bu gamın içine alınır.
Seçim için renk örnekleri sunmak üzere swatches, rengin bir arka plana karşı kontrastını WCAG 2’nin ölçtüğü şekilde denetlemek için de contrastWith ekleyin. Tarayıcıda damlalık varsa bir düğme ekrandan renk alır.
Bir marka rengi
Adlandırılmış renk örnekleri ve rengin üzerindeki beyaz metnin kontrastı: açık bir renk seçerseniz AA başarısız olur.
#4f46e5
Geniş renk gamı
gamut="p3" renk alanını Display P3 renkleriyle doldurur, kesikli bir çizgi de sRGB’nin bittiği yeri gösterir. Değer oklch() olarak kalır.
Popover içinde
Rengi gösteren bir düğme, seçiciyi bir popover içinde açar.