Renk gamı nedir: sRGB, Display P3 ve gam dışı renkler
Renk gamı, bir ekranın ya da renk uzayının gösterebildiği renklerin kümesidir. Web sRGB üzerine kuruldu, ama artık çoğu telefon ve birçok dizüstü bilgisayar, belirgin biçimde daha canlı kırmızılar, yeşiller ve turuncular sunan Display P3’ü gösterebiliyor.
2 dk okuma
Renk gamı nedir
Her ekran kırmızı, yeşil ve mavi ışığı karıştırır. Ekranın üretebildiği en saf kırmızı, yeşil ve mavi bir üçgenin köşelerini belirler ve bu üçgenin içindeki her renk o ekranın renk gamındadır. Üçgenin dışındaki renkler o ekranda gösterilemez.
sRGB, Display P3 ve Rec. 2020
sRGB, webin ve 2016’dan önce satılan çoğu monitörün varsayılanıdır. HEX, rgb() ve hsl() değerlerinin hepsi sRGB renklerini tanımlar.
Display P3, sRGB’den yaklaşık dörtte bir daha fazla renk kapsar. Fazladan gelen renklerin çoğu canlı yeşiller, kırmızılar ve turunculardır. iPhone, iPad ve Mac’ler ile birçok Android telefon ve üst segment dizüstü bilgisayar bunu kullanır. CSS’te color(display-p3 r g b) biçiminde ya da yüksek kromalı bir OKLCH değeri olarak yazılır.
Rec. 2020 daha da geniştir ve HDR videoda kullanılır. Onu tamamen kapsayan ekran çok azdır.
| Format | Değer |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Gam dışı renklere ne olur
Bir CSS rengi ekranın renk gamı dışındaysa tarayıcının onun yerine başka bir renk göstermesi gerekir. Basit kırpma her kanalı sınırda keser ve tonu değiştirebilir. CSS Color 4 bunun yerine OKLCH’de gam eşlemeyi önerir: açıklık ve ton korunur, renk gama sığana kadar kroma düşürülür.
PickShade sRGB dışına düşen her rengi işaretler ve eşlenmiş yedek rengi gösterir. Böylece eski ekranlarda insanların tam olarak ne göreceğini bilirsiniz.
P3 renkleri CSS’te güvenle kullanmak
Önce sRGB yedeğini, ardından geniş gamlı değeri yazın ya da canlı değeri bir color-gamut medya sorgusunun içine alın.
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);
}
}Sorular ve yanıtlar
Bir rengin sRGB içinde olup olmadığını nasıl anlarım?
Rengi PickShade’e yapıştırın. sRGB dışındaki her renk için, gama sığan en yakın renkle birlikte bir gam uyarısı gösterilir.
P3 renkler Windows’ta çalışır mı?
Evet, monitör P3’ü kapsıyorsa ve tarayıcı ekran profilini biliyorsa. sRGB ekranda tarayıcı rengi sRGB’ye eşler, yani hiçbir şey bozulmaz.
HEX, sRGB ile mi sınırlı?
Evet. HEX, rgb(), hsl() ve hwb() her zaman sRGB renklerini tanımlar. Geniş gamlı renkler için oklch() ya da color(display-p3 ...) kullanın.