CSS renk formatları: hex, RGB, HSL, OKLCH — ne zaman hangisi kullanılır

Modern CSS dört birincil renk gösterimini destekliyor: hex (#FF6600), rgb(), hsl() ve daha yeni oklch(). Hepsi aynı renk gamını tanımlıyor (varsayılan olarak sRGB, OKLCH için daha geniş). İnsan okunabilirliği, düzenleme kolaylığı ve hangi tür renk değişikliğinin doğal hissettirdiği konusunda farklılaşıyorlar.

Dört format bir bakışta

Hex: depolama formatı

Hex her RGB kanalını iki basamaklı onaltılık değer olarak kodluyor. #FF6600 kırmızı 255, yeşil 102, mavi 0 demektir — canlı bir turuncu.

Artıları: kısa, evrensel olarak anlaşılan, kopyala-yapıştır dostu, her CSS bağlamında çalışıyor.

Eksileri: okumak için şeffaf değil (#7E4F2B sıcak mı soğuk mu ton?), önce dönüştürmeden parlaklığı veya doygunluğu kolayca ayarlayamıyorsunuz.

Modern CSS şeffaflık için 8 basamaklı hex destekliyor: #FF6600AA, yukarıdaki turuncu %67 opaklıkta (AA = 170 / 255).

rgb(): açık kanal formatı

Hex ile aynı kanallar, ondalık sayılar, isteğe bağlı alfa. İki sözdizim bir arada var:

• Eski virgüllü form: rgb(255, 102, 0) veya alfa ile rgba(255, 102, 0, 0.67)
• Modern boşluklu form: rgb(255 102 0) veya alfa ile rgb(255 102 0 / 0.67)

Programatik oluşturma için en iyi: algoritma çıktısından renk oluşturma, iki rengi harmanlamak, erişilebilirlik kontrastını hesaplamak.

hsl(): insan tarafından ayarlanabilir format

Üç değer: ton (0-360°), doygunluk (%0-100), parlaklık (%0-100). Her birini bağımsız olarak ayarlamak RGB kanallarını ince ayarlamaktan daha doğal hissettiriyor.

• Ton: rengin kendisi. 0 = kırmızı, 60 = sarı, 120 = yeşil, 180 = camgöbeği, 240 = mavi, 300 = macenta.
• Doygunluk: %0 = gri, %100 = saf renk.
• Parlaklık: %0 = siyah, %50 = saf ton, %100 = beyaz.

Uyarı: HSL'nin parlaklığı algılanan parlaklığı tekdüze olarak izlemiyor. %50 parlaklıktaki HSL sarısı %50 parlaklıktaki HSL mavisinden çok daha açık görünüyor. Algısal açıdan tekdüze renk tasarımı için OKLCH daha iyi tercih.

oklch(): algısal format

Üç değer: L (parlaklık, 0-1), C (kroma, sRGB görüntülenebilir için 0-~0.4), H (ton, 0-360°). OKLab algısal renk uzayına dayalı (Björn Ottosson, 2020).

Temel özellik: eşit parlaklık değerleri eşit parlak görünür. oklch(0.6 0.2 0) (kırmızı) ve oklch(0.6 0.2 120) (yeşil) ve oklch(0.6 0.2 240) (mavi) aynı algılanan parlaklıktadır; HSL'de bunlar dramatik biçimde farklı olurdu.

2023'ten itibaren tüm her zaman yeşil tarayıcılarda destekleniyor.

Doğru olanı seçme

• Marka renkleri ve tasarım token'ları için: HSL veya OKLCH'de tanımlayın; bunlar tasarımcıların anlamlı biçimde ayarlayabileceği şeylerdir. Eski dosyalarda hex'i geri dönüş olarak saklayın.
• UI renk rampları (50/100/200/.../900) için: Sabit kroma ve değişen parlaklıkla OKLCH, algısal açıdan eşit skalalar üretir.
• Figma/Photoshop spec'inden kopyalamak için: hex yapıştırın. Düzenlemeniz gerektiğinde renk dönüştürücümüz aracılığıyla dönüştürün.
• Erişilebilirlik odaklı seçimler için: rgb formunda WCAG kontrastını hesaplayın.

CSS özel özellik deseni

Modern tema mimarileri renkleri HSL/OKLCH özel özellikleri olarak depoluyorki türetilebilsinler:

:root {
  --birincil-ton: 24;
  --birincil: oklch(0.72 0.18 var(--birincil-ton));
  --birincil-hover: oklch(0.65 0.18 var(--birincil-ton));
  --birincil-arka: oklch(0.92 0.05 var(--birincil-ton));
}

Tonu bir kez değiştirmek tüm paleti tutarlı biçimde döndürür. Hex ile aynı desen önişlemci işlevleri olmadan imkânsızdır.

Tarayıcı desteği ve geri dönüş stratejisi

Yaygın hatalar

• Şeffaflığı iki farklı yolla tutarsız belirtmek. rgba(255 102 0 / 0.67) ve #FF6600AB aynı renktir, ancak her ikisinin de tek bir stil sayfasında bulunması arama-değiştirme ve temayı kırılgan yapar.
• Aşırı kromada OKLCH'ye güvenmek. oklch(0.6 0.4 47), sRGB ekran gamutu'nun gerçekte oluşturamadığı bir kroman talep ediyor; tarayıcı en yakın oluşturulabilir değere kırpar.
• HSL veya OKLCH değerlerinde WCAG kontrastını hesaplamak. WCAG 2.1 kontrast formülü doğrusal ışıklı sRGB üzerinde çalışıyor. HSL veya OKLCH girişleri alan araçlar dahili olarak önce sRGB'ye dönüştürüyor.
• Hex'i bileşenler içine sabit kodlamak. Bir bileşen içindeki color: #FF6600 rengi bir değere kilitler; tema değiştirme arama-değiştirme egzersizine dönüşür. Her zaman kökünde tanımlanan özel özelliklere başvurun.

Etkileşimli format dönüşümü için renk dönüştürücü WCAG kontrast raporlamasıyla hex ↔ rgb ↔ hsl ↔ oklch dönüşümünü yapıyor.