CSS'de Renk Tanımlama Yöntemleri: HEX, RGB, HSL ve Daha Fazlası

Kerem Aydın·10 Temmuz 2026·⏱4 dk

Web geliştirmede bir öğenin rengi color, background-color ve diğer özellikler aracılığıyla tanımlanır. Temel formatlar şunlardır: HEX (onaltılık kod), RGB (kırmızı, yeşil, mavi) ve HSL (ton, doygunluk, aydınlık). HEX, taslaklardan kopyalama yapmak için uygundur; RGB, şeffaflık ve JavaScript ile çalışmak için gereklidir; HSL ise uyumlu paletler oluşturmak ve tonları yönetmek için idealdir.

Renk İsimleri (Color Keywords)

En basit yöntem, standart İngilizce isimleri kullanmaktır. CSS, red, blue, transparent gibi 147 adlandırılmış rengi destekler.

.button {
  background-color: tomato;
  color: white;
}

İsimler büyük/küçük harf duyarlı değildir: Red, RED ve red aynı şekilde çalışır. Ancak bu yöntem sınırlı bir ton yelpazesi sunar ve hassas marka kimliği oluşturma için uygun değildir.

HEX: Onaltılık Kod

#RRGGBB formatı, web dünyasında fiili standarttır. Bir # sembolü ve altı onaltılık rakamdan oluşur; burada her iki rakam kırmızı, yeşil ve mavi kanallarının yoğunluğunu temsil eder (00 ile ff arasında).

Söz Dizimi ve Kısaltmalar

Kanal değerleri tekrar ediyorsa (örneğin, #ff0000), kod üç karaktere kadar kısaltılabilir (#f00).

/* Tam yazım */
.element { color: #2f855a; }

/* Kısaltılmış yazım (çiftler eşleşiyorsa) */
.element { color: #000; /* #000000 yerine */ }

HEX'te Şeffaflık (Alfa Kanalı)

Modern standart, kodun sonuna alfa kanalı ekleyerek 8 haneli #RRGGBBAA yazımına izin verir. Son iki rakam şeffaflığı belirler: 00 (tamamen şeffaf) ile ff (opak) arasında.

/* %50 şeffaflık hex'te yaklaşık olarak 80'e eşittir */
.overlay { background-color: #00000080; }

Bir insan için HEX koduna bakarak şeffaflık yüzdesini "göz kararı" belirlemek zordur. Hassas şeffaflık ayarı için RGB veya HSL kullanmak daha iyidir.

RGB ve RGBA: Sayısal Değerler

RGB modeli, rengi 0 ile 255 arasındaki kanal yoğunlukları üzerinden tanımlar. Bu format, tarayıcı ve JavaScript'in çalıştığı verileri doğrusal olarak yansıttığı için programatik hesaplamalar açısından kullanışlıdır.

Modern Söz Dizimi (Virgülsüz)

CSS Color Level 4 spesifikasyonunda, virgüllerin kaldırıldığı ve şeffaflığın eğik çizgi / ile belirtildiği daha öz bir söz dizimi tanıtıldı.

/* Eski stil (hala çalışır) */
.box { color: rgba(255, 0, 0, 0.5); }

/* Yeni stil (önerilen) */
.box { color: rgb(255 0 0 / 0.5); }
.box { color: rgb(255 0 0 / 50%); }

JavaScript API'leri (örneğin, getComputedStyle) renkleri genellikle rgb() formatında döndürür. Stilleri JS aracılığıyla dinamik olarak değiştiriyorsanız, bu formatı kullanmak değerleri ayrıştırmayı kolaylaştırır.

HSL: Sezgisel Renk Yönetimi

HSL (Hue, Saturation, Lightness), rengi insan algısına uygun şekilde tanımlar:

Hue (Ton): Renk çemberindeki derece (0–360). 0 — kırmızı, 120 — yeşil, 240 — mavi.
Saturation (Doygunluk): %0 (gri) ile %100 (canlı renk) arasında.
Lightness (Aydınlık): %0 (siyah) ile %100 (beyaz) arasında. %50 — "saf" renktir.

Neden HSL Tasarım Sistemleri İçin Daha İyidir?

HSL'nin başlıca avantajı, yalnızca bir parametreyi değiştirerek renk varyasyonları (daha açık, daha koyu, daha soluk) oluşturmanın kolay olmasıdır.

:root {
  --brand-hue: 210;
  --brand-sat: 100%;
  
  /* Temel renk */
  --primary: hsl(var(--brand-hue) var(--brand-sat) 50%);
  
  /* Arka plan için açık varyant */
  --primary-light: hsl(var(--brand-hue) var(--brand-sat) 90%);
  
  /* Metin için koyu varyant */
  --primary-dark: hsl(var(--brand-hue) var(--brand-sat) 30%);
}

Bu yaklaşım kodun bakımını kolaylaştırır: Tüm markanın tonunu değiştirmek için tek bir --brand-hue değişkenini güncellemek yeterlidir.

Formatların Karşılaştırılması: Ne Zaman Hangisi Kullanılır?

Format	Okunabilirlik	Şeffaflık	En İyi Kullanım Alanı
HEX	Düşük	Evet (`#RRGGBBAA`)	Figma/Sketch'ten kopyalama, sabit marka renkleri.
RGB	Orta	Evet (`/ alpha`)	Canvas ile çalışma, JS animasyonları, programatik renk karıştırma.
HSL	Yüksek	Evet (`/ alpha`)	Tasarım sistemleri, tema oluşturma (karanlık/aydınlık mod), hover efektleri.
İsimler	Maksimum	Sadece `transparent`	Hızlı prototipler, stil sıfırlama.

Gelecek: OKLCH ve OKLAB

Yeni oklch() ve oklab() fonksiyonları, HSL'nin ana sorununu çözer: parlaklık algısındaki dengesizlik. HSL'de aynı %50 aydınlığa sahip mavi ve sarı, insan gözü için farklı parlaklıkta görünür. OKLCH, algısal olarak dengeli bir renk uzayı kullanır.

/* Parlaklık değiştirilirken daha öngörülebilir sonuçlar */
.element {
  background-color: oklch(65% 0.2 250);
}

Bu fonksiyonların desteği tüm modern tarayıcılarda mevcuttur (Chrome 111+, Safari 15.4+, Firefox 113+).

Sık Yapılan Hatalar

Unutulan # sembolü: ff0000 kodu çalışmaz, tarayıcı bunu yok sayar. Her zaman #ff0000 yazın.
Birim karmaşası: RGB'de değerler 0 ile 255 arasında sayılardır. HSL'de doygunluk ve aydınlık yüzdelerdir (%), ton ise bir sayıdır (derece, ° işareti belirtmek zorunlu değildir ancak kullanılabilir).
Eski RGBA söz dizimi: Ayrı bir rgba() fonksiyonu kullanmak gereksizdir. Modern rgb(... / alpha) evrenseldir ve daha kısadır.

SSS

Tarayıcı için en hafif renk formatı hangisidir? Tarayıcı için bir fark yoktur. Tüm formatlar motor içinde tek bir dahili temsile dönüştürülür. Kodu okumak ve bakımını yapmak sizin için en uygun olan formatı seçin.

Bir rengi tamamen şeffaf nasıl yaparım? transparent anahtar kelimesini veya 0 alfa kanalı değerini kullanın: rgb(0 0 0 / 0), hsl(0 0% 0% / 0) veya #00000000.

Bir projede formatları karıştırmak mümkün mü? Evet, bu tamamen geçerlidir. Taslaktan kopyalanan ana renkler için HEX'i, sistem değişkenleri ve durumları için HSL'i kullanabilirsiniz.