Duyarlı Renk: Farklı Ekranlar için Renkleri Uyarlamak

Duyarlı tasarım yerleşim sorununu çözdü — akıcı ızgaralar, esnek görseller ve kesme noktaları, tek bir kod tabanının telefon boyutundaki ekranlara ve 4K monitörlere hizmet etmesini mümkün kıldı. Ancak rengin CSS Grid ve medya sorgularının başlangıçta çözecek şekilde tasarlanmadığı kendi duyarlı sorunu vardır.

Aynı hex değeri, bir iPhone OLED ekranında, Windows dizüstü bilgisayarı LCD'sinde, kalibre edilmiş profesyonel bir monitörde ve açık hava ekran panelinde farklı görünür. Kullanıcılar aydınlık ve karanlık ortamlar arasında geçiş yapar. Geniş gamutlu ekranlar, sRGB'nin hiç temsil edemediği renkleri oluşturabilir.

Duyarlı renk tasarımı, bu farklılıkları anlamak ve stilleri tesadüfen değil, kasıtlı olarak uyarlayacak şekilde yazmak demektir.

Ekranlar Neden Farklıdır ve Bu Neden Önemlidir

Farklı Ekran Teknolojilerinin Fiziği

LCD (Sıvı Kristal Ekran) — Çoğu Windows dizüstü bilgisayarında, bütçe monitörlerde ve eski MacBook'larda bulunur. Siyahlar gri görünür (arka ışık sızar) ve renk gamutu tipik olarak sRGB veya buna yakındır.

OLED (Organik Işık Yayan Diyot) — iPhone Pro, Samsung Galaxy, MacBook Pro. Her piksel kendi ışığını ürettiğinden siyahlar gerçek siyahtır. Renkler LCD'den daha canlı ve kontrastlı görünür.

IPS LCD — Orta-üst düzey monitörler. Daha iyi renk doğruluğu ve daha geniş görüntüleme açıları. Genellikle sRGB'yi tamamen kapsar ve bazen DCI-P3'e uzanır.

Mini-LED — Apple'ın MacBook Pro 14/16 ve Pro Display XDR'sindeki XDR ekranlar. Display P3 renk gamutu.

Renk Gamutları: sRGB, Display P3 ve Rec. 2020

sRGB — Tüm monitörlerin desteklediği standart gamut. CSS #FF6B6B yazdığınızda, tarayıcı bunu bir sRGB rengi olarak yorumlar.

Display P3 — sRGB'den yaklaşık %25–30 daha geniş. 2016'dan itibaren tüm iPhone, iPad ve Mac ekranlarda, birçok modern Android amiral gemisi telefonlarda ve bazı PC monitörlerinde desteklenir.

Rec. 2020 — P3'ten bile daha geniş. Çoğunlukla video prodüksiyon ve HDR içerik için geçerlidir.

Renk Uyarlaması için CSS Medya Sorguları

prefers-color-scheme: Karanlık Mod

/* Açık mod (varsayılan) */
:root {
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text-primary: #1E293B;
  --color-text-muted: #64748B;
  --color-brand: #2563EB;
  --color-border: #E2E8F0;
}

/* Karanlık mod */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0F172A;
    --color-surface: #1E293B;
    --color-text-primary: #F1F5F9;
    --color-text-muted: #94A3B8;
    --color-brand: #60A5FA;
    --color-border: #334155;
  }
}

Karanlık mod marka rengi #2563EB'den (derin mavi) #60A5FA'ya (daha açık mavi) kayar. Hem açık hem de karanlık mod kombinasyonlarını doğrulamak için Kontrast Denetleyici'yi kullanın.

prefers-contrast: Yüksek Kontrast Modu

@media (prefers-contrast: more) {
  :root {
    --color-text-primary: #000000;
    --color-bg: #FFFFFF;
    --color-brand: #0000CC;
    --color-border: #000000;
  }
}

color-gamut: Geniş Gamutlu Ekranları Hedefleme

/* Varsayılan: sRGB renkleri */
:root {
  --color-brand: #FF6B6B;
}

/* P3 yetenekli ekranlar: daha canlı varyant */
@media (color-gamut: p3) {
  :root {
    --color-brand: color(display-p3 1 0.35 0.35);
  }
}

forced-colors: Windows Yüksek Kontrast Modu

@media (forced-colors: active) {
  .button {
    background-color: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonBorder;
  }

  .status-indicator {
    border: 2px solid currentColor;
  }
}

CSS Özel Özellikleriyle Dinamik Renk

Duyarlı Renk için Token Mimarisi

/* Semantik tokenlar */
:root {
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --surface-base: #F8FAFC;
  --surface-raised: #FFFFFF;
  --brand-primary: #2563EB;
  --brand-primary-hover: #1D4ED8;
  --brand-primary-text: #FFFFFF;
  --color-error: #DC2626;
  --color-success: #16A34A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --surface-base: #0F172A;
    --surface-raised: #1E293B;
    --brand-primary: #60A5FA;
    --brand-primary-hover: #93C5FD;
    --brand-primary-text: #0F172A;
    --color-error: #F87171;
    --color-success: #4ADE80;
  }
}

Sayfa Yenileme Olmadan Satır İçi Tema Geçişi

function toggleTheme() {
  const root = document.documentElement;
  const isDark = root.classList.toggle('dark-theme');

  if (isDark) {
    root.style.setProperty('--surface-base', '#0F172A');
    root.style.setProperty('--text-primary', '#F1F5F9');
  } else {
    root.style.removeProperty('--surface-base');
    root.style.removeProperty('--text-primary');
  }

  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

Dinamik Tonlar için color-mix() Kullanımı

:root {
  --brand-base: #2563EB;
}

.badge {
  background-color: color-mix(in srgb, var(--brand-base) 15%, white);
  color: var(--brand-base);
}

.badge-dark {
  background-color: color-mix(in srgb, var(--brand-base) 85%, black);
  color: white;
}

Ekran Uyarlaması için Renk Uzayı Dönüşümü

Algısal Olarak Düzgün Karanlık Mod Paletleri için OKLCH

OKLCH (Oklab Parlaklık, Kroma, Ton), parlaklık ekseni gerçekten algısal olarak düzgün olduğundan duyarlı renk tasarımı için giderek daha değerli hale gelmektedir. Hem açık hem de karanlık mod OKLCH değerlerini bulmak için Renk Dönüştürücü'yü kullanın.

Cihazlar Arasında Test

Ne Test Edilmeli ve Neden

Her iki modda da kontrast — Her metin/arka plan token çifti için Kontrast Denetleyici'yi çalıştırın. Açık modda geçen bir renk genellikle karanlık modda ayarlama gerektirir.

Gerçek cihazlar, yalnızca emülasyon değil — Tarayıcı emülasyon araçları cihaz boyutlarını simüle edebilir ancak ekran renk özelliklerini doğru şekilde simüle edemez.

Yüksek kontrast modu — Yüksek Kontrast Siyah ve Yüksek Kontrast Beyaz etkinleştirilmiş Windows'ta test edin.

Minimum Cihaz Matrisi

Temel Çıkarımlar

• Farklı ekran teknolojileri (LCD, OLED, IPS, Mini-LED) aynı hex değerlerini farklı siyah seviyeleri, doygunluk ve canlılıkla oluşturur — yalnızca tarayıcı emülasyonu değil birden fazla fiziksel cihazda test edin.
• prefers-color-scheme, karanlık mod uyarlaması için birincil medya sorgusudur; bileşenlerin tema değiştiğinde güncellenmesine gerek kalmaması için soyutlama katmanı olarak CSS özel özelliklerini (tokenlar) kullanın.
• color-gamut: p3, color(display-p3 ...) CSS fonksiyonunu kullanan geniş gamutlu ekranları daha canlı renklerle hedeflemenize olanak tanır ve standart ekranlar için otomatik sRGB geri dönüşü sağlar.
• OKLCH, parlaklık ekseni tüm tonlar arasında gerçekten düzgün olduğundan algısal olarak düzgün paletler tasarlamak için en pratik renk uzayıdır.
• Her zaman açık ve karanlık modlarda kontrastı doğrulayın Kontrast Denetleyici kullanarak.
• Renk uzayları arasında çalışmak için Renk Dönüştürücü'yü kullanın.
• Semantik token mimarisi — bileşenlerde #1E293B yerine --text-primary'ye başvurmak — herhangi bir duyarlı renk sistemi için ölçeklenebilir temeli oluşturur.