🎨
← Rehberlere dön

Modern CSS Renk Fonksiyonları: rgba(), hsl(), oklch() ve Ötesi

· Etiketler: css, renk-fonksiyonlari, oklch, modern-css, web-gelistirme, rgba, hsl

Modern CSS Renk Fonksiyonları: rgba(), hsl(), oklch() ve Ötesi

CSS renk fonksiyonları önemli ölçüde gelişti. Bir zamanlar hex, rgb() ve hsl() arasında bir seçim olan şey, artık geliştiricilere renk temsili, interpolasyonu ve erişilebilirliği üzerinde eşi benzeri görülmemiş bir kontrol sağlayan zengin bir renk uzayları ve manipülasyon fonksiyonları ekosistemidir.

Bu rehber, 2026'da mevcut olan tüm önemli CSS renk fonksiyonlarını, bilindik olanlardan en yeni teknolojilere kadar kapsar.

RGB ve RGBA: İş Gücü

rgb() fonksiyonu, kırmızı-yeşil-mavi toplamsal renk modelini kullanarak renkleri tanımlar. CSS1'den beri CSS'in bir parçasıdır ve şimdiye kadar üretilmiş tüm tarayıcılarda desteklenir.

/* Eski virgülle ayrılmış sözdizimi */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Modern boşlukla ayrılmış sözdizimi (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Yüzde değerleri */
color: rgb(100% 0% 0%);

Modern RGB'deki Önemli Değişiklikler

CSS Color Level 4 iki önemli iyileştirme getirdi:

  1. Virgül yerine boşlukla ayrılmış — rgb() fonksiyonu artık değerleri boşluk veya eğik çizgi ile ayrılmış olarak kabul eder
  2. Birleşik alfa sözdizimi — rgba() takma adı kullanımdan kaldırıldı (ancak hala destekleniyor). rgb() artık doğal olarak bir alfa kanalı kabul eder

Bu modern sözdizimi, 2020'den beri piyasaya sürülen tüm tarayıcılarda desteklenmektedir. Yeni projeler için modern sözdizimini kullanın ve rgba() takma adını tamamen atlayın.

RGB Kanalları

Her RGB kanalı şunları kabul eder:

  • 0 ile 255 arasında bir tam sayı
  • %0 ile %100 arasında bir yüzde
  • Eksik kanallar için none anahtar kelimesi (CSS Color Level 4)

none anahtar kelimesi, renkleri enterpole ederken kullanışlıdır — tarayıcıya o belirli kanalı enterpole etmemesini söyler.

HSL ve HSLA: Sezgisel Renk Kontrolü

HSL; Renk Tonu, Doygunluk, Açıklık anlamına gelir. İnsanların renk hakkında nasıl düşündüğüne doğal olarak eşlenen silindirik bir koordinat sistemi kullanır.

/* H renk tonu açısı (0-360), S doygunluk (%0-100), L açıklık (%0-100) */
color: hsl(0 100% 50%);        /* Saf kırmızı */
color: hsl(0 100% 50% / 0.5);  /* %50 opaklıkta kırmızı */

/* Birimli renk tonu açıları */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Renk Tonu Açısı Referansı

| Ton | Renk | Hex | |-----|----------|------------| | 0 | Kırmızı | #FF0000 | | 30 | Turuncu | #FF8000 | | 60 | Sarı | #FFFF00 | | 120 | Yeşil | #00FF00 | | 180 | Camgöbeği| #00FFFF | | 240 | Mavi | #0000FF | | 300 | Galibarda| #FF00FF |

HSL, renk paletlerini programatik olarak oluşturmak için en iyi seçimdir çünkü yalnızca açıklık veya doygunluk kanalını değiştirmek tutarlı görsel varyantlar oluşturur.

HWB: Beyaz ve Siyah ile Karıştırma

HWB (Renk Tonu, Beyazlık, Siyahılık), HSL'ye göre daha sezgisel bir alternatiftir. Bir renk tonu seçer, ardından tonlar ve gölgeler oluşturmak için beyazlık ve siyahılık eklersiniz.

color: hwb(0 0% 0%);    /* Saf kırmızı */
color: hwb(0 40% 0%);   /* Tonlanmış kırmızı (beyaz eklendi) */
color: hwb(0 0% 40%);   /* Gölgelenmiş kırmızı (siyah eklendi) */
color: hwb(0 20% 20%);  /* Ton (beyaz + siyah) */

HWB, belirli bir kullanım durumu için HSL'den daha basittir: bir marka renginin ton ve gölge varyasyonlarını oluşturmak. Doygunluk eğrileri hakkında düşünmenize asla gerek kalmaz — sadece beyaz veya siyah ekleyin.

Tarayıcı desteği: HWB tüm modern tarayıcılarda desteklenir (Chrome 101+, Firefox 96+, Safari 15+).

LAB ve LCH: Algısal Olarak Tekdüze Uzaylar

LAB (Açıklık, A-ekseni, B-ekseni) ve LCH (Açıklık, Kroma, Renk Tonu) algısal olarak tekdüze renk uzaylarıdır. Bu, iki renk değeri arasındaki Öklid mesafesinin algılanan görsel farka karşılık geldiği anlamına gelir — RGB ve HSL'nin yapamadığı bir şey.

color: lab(50% 50 0);        /* Orta kırmızı */
color: lch(50% 50 0);        /* Silindirik formda aynı renk */

Algısal tekdüzeliğin önemi:

  • Gradyanlar — LAB veya LCH'de enterpole etmek, RGB gradyanlarının oluşturduğu donuk "çamurlu bölge" olmadan pürüzsüz, doğal geçişler üretir
  • Renk farkı ölçümü — Delta E (algısal fark ölçüsü) LAB uzayında anlamlıdır
  • Erişilebilirlik — Algısal tekdüzelik, renklerin renk görme eksikliği olan kullanıcılar tarafından nasıl algılanacağını tahmin etmeye yardımcı olur

Sınırlamalar: LAB ve LCH, sRGB gamutunun dışında renkler üretebilir. Bu renkler sRGB ekranlarda görüntülendiğinde kırpılır ancak daha geniş gamutlu ekranlarda (DCI-P3, Rec. 2020) erişilebilirdir.

Tarayıcı desteği: Chrome 111+, Firefox 113+, Safari 15+'te desteklenir. IE veya eski Edge desteği yoktur.

OKLAB ve OKLCH: Modern Algısal Standart

OKLCH, Bjorn Ottosson tarafından geliştirilen LCH'nin iyileştirilmiş bir versiyonudur. LCH'deki, özellikle mavi tonları için algısal düzensizlikleri düzeltir. OKLCH, 2025-2026'da yeni CSS projeleri için önerilen varsayılan renk uzayı haline gelmiştir.

color: oklch(60% 0.2 30);
/* Açıklık: %0-100, Kroma: 0-~0.4, Renk Tonu: 0-360 */

OKLCH Neden CSS için En İyi Renk Uzayıdır

  1. En iyi algısal tekdüzelik — Eşit sayısal değişiklikler tüm tonlarda eşit görsel değişiklikler üretir
  2. Öngörülebilir açıklık — Aynı açıklık değerindeki renkler gerçekten eşit derecede parlak görünür
  3. Çamurlu gradyanlar yok — Enterpolasyon tüm renk tonu aralığında temiz kalır
  4. Varsayılan olarak sRGB-güvenli — Çoğu OKLCH değeri gamut içi sRGB renkleri üretir
  5. Sezgisel kanallar — HSL gibi ancak gerçek algısal doğrulukla

Pratikte OKLCH

/* OKLCH ile dengeli bir renk skalası oluşturma */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Her adımın yaklaşık olarak aynı açıklık değeri (20 yüzde puanı) kadar değiştiğine dikkat edin. OKLCH algısal olarak tekdüze olduğu için, bu adımlar insan gözüne eşit aralıklı görünür — HSL ile elde edilmesi zor olan bir şey.

Tarayıcı desteği: OKLCH; Chrome 111+, Firefox 113+, Safari 15.4+'te desteklenir. Hızla en çok önerilen modern renk uzayı haline gelmiştir.

Color-Mix: CSS'te Renkleri Karıştırın

color-mix() fonksiyonu, belirtilen bir renk uzayında iki rengi harmanlar:

/* sRGB'de kırmızı ve maviyi eşit olarak karıştır */
color: color-mix(in srgb, red, blue);

/* %30 primary, %70 beyaz — bir ton */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Pürüzsüz sonuçlar için algısal renk uzayında karıştır */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

in <color-space> parametresi, enterpolasyon uzayını kontrol etmenizi sağlar. Çoğu durumda, in oklch en iyi görsel sonuçları üretir.

Kullanım alanları:

  • Önişlemci fonksiyonları olmadan tonlar ve gölgeler oluşturmak
  • Tek bir renk token'ından bileşen varyantları oluşturmak
  • Dinamik olarak hover ve aktif durumları oluşturmak
  • Tek bir fonksiyonda gradyan benzeri efektler oluşturmak

Göreceli Renk Sözdizimi: Mevcut Renkleri Değiştirin

CSS Color Level 4, bireysel kanalları değiştirerek mevcut renklerden yeni renkler türetmenize olanak tanır:

--primary: #3366cc;

/* OKLCH kanallarını kullanma */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* HSL kanallarını kullanma */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

from <color> anahtar kelimesi, kaynak rengin kanallarını hedef fonksiyonun kanallarına açar ve bunları aritmetik ile ayarlayabilirsiniz.

Renk Uzayı Başına Kanal Anahtar Kelimeleri

Her renk uzayı belirli kanal anahtar kelimelerini ortaya çıkarır:

| Renk Uzayı | Anahtar Kelimeler | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Tarayıcı Desteğine Genel Bakış (2026)

| Fonksiyon | Chrome | Firefox | Safari | Edge | |-----------|--------|---------|--------|------| | rgb() / hsl() | Tümü | Tümü | Tümü | Tümü | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Göreceli renk sözdizimi | 111+ | 113+ | 16.2+ | 111+ |

Tüm modern renk fonksiyonları, Internet Explorer desteği gerektirmeyen projeler için 2026'da güvenle kullanılabilir. Daha geniş uyumluluk için, modern sözdizimini hex veya eski rgb()'ye dönüştüren bir derleme adımı kullanın.

Pratik Öneriler

  • Mevcut projeler için — HSL, okunabilirlik ve yetenek arasında en iyi denge olmaya devam eder
  • Yeni projeler için — Algısal doğruluğu için birincil renk uzayınız olarak OKLCH kullanın
  • Gradyanlar için — Çamurlu geçişleri önlemek için her zaman OKLCH'de enterpole edin
  • Tasarım sistemleri için — Temel renkleri OKLCH'de saklayın, color-mix() veya göreceli sözdizimi ile varyantlar oluşturun
  • Canvas/WebGL için — İşleme hattına doğal olan RGB'ye bağlı kalın

Sonuç

Modern CSS renk fonksiyonları, web'de renklerle neler yapabileceğinizi dönüştürdü. OKLCH, renk sistemi tasarımını öngörülebilir kılan algısal tekdüzelik sağlar. color-mix() ve göreceli renk sözdizimi, önişlemci renk fonksiyonlarına olan ihtiyacı ortadan kaldırır. Bu araçlar birlikte, web geliştiricilerine tasarım araçlarının yıllardır sunduğu renk gücünü — artık doğrudan tarayıcıda — verir.

Tüm modern CSS renk formatları arasında dönüşüm yapmak için ücretsiz çevrimiçi renk dönüştürücümüzü kullanın; OKLCH, LAB, HWB ve klasik HEX/RGB/HSL dahil.