HSL renk formatı ne zaman tercih edilmeli?

HSL (Ton, Doygunluk, Parlaklık), bir renk paleti oluştururken veya rengin açık/koyu varyantlarını üretirken çok daha sezgiseldir. Örneğin hsl(217, 91%, 60%) ana renginizse, hsl(217, 91%, 80%) otomatik olarak daha açık tonu verir. HEX ile bunu sezgisel olarak yapamazsınız. CSS değişkenleriyle HSL kullandığınızda tema değişkenlerini yalnızca Ton (H) değişkeni üzerinden yönetebilirsiniz.

Alpha (saydamlık) değeri HEX'te nasıl ifade edilir?

CSS'de sekiz karakterli HEX (#RRGGBBAA) formatı alpha kanalı destekler. Örneğin #3B82F680, mavi rengin %50 şeffaflıklı halidir. Alternatif olarak rgba(59, 130, 246, 0.5) veya hsla(217, 91%, 60%, 0.5) kullanabilirsiniz. Tüm modern tarayıcılar her üç formatı destekler; en yaygın okunabilir yöntem rgba() veya hsla() notasyonudur.

Web için renk seçerken kontrast oranına neden dikkat etmeliyim?

WCAG 2.1 erişilebilirlik standardı, normal metin için arka plan ile metin rengi arasında en az 4.5:1 kontrast oranı gerektirir. Bu oran yetersiz olduğunda görme güçlüğü olan kullanıcılar metni okuyamaz. Google, Core Web Vitals kapsamında olmasa da erişilebilirliği sıralama sinyali olarak değerlendirmeye başlamıştır. WebAIM Contrast Checker veya Figma'nın yerleşik kontrol aracıyla seçtiğiniz renk kombinasyonunu doğrulayabilirsiniz.

Tasarım Aracı

Renk Kodu Dönüştürücü

HEX, RGB ve HSL renk kodlarını anında birbirine çevirin. Renk seçici ve CSS kopyalama desteği.

#3B82F6

Renk seçici ile hızlı seçin

HEX

RGB

HSL

Hızlı Renkler

HEX, RGB ve HSL: Hangi Format Ne Zaman Kullanılır?

HEX (#RRGGBB), CSS'de en yaygın kullanılan formattır. Kısa ve tanıdık olması nedeniyle renk değişkenlerini tanımlarken ve tasarım sistemlerinde tercih edilir. RGB, kırmızı (0-255), yeşil (0-255) ve mavi (0-255) değerlerinden oluşur; JavaScript ile renk manipülasyonu veya rgba() ile saydamlık eklemek için kullanışlıdır. HSL (Ton, Doygunluk, Parlaklık) ise renk paleti oluştururken en sezgisel formattır: aynı ton değerini koruyarak yalnızca parlaklık değerini değiştirerek açık/koyu varyantlar üretebilirsiniz.

CSS'de Renk Değişkenleri ile Profesyonel Kullanım

CSS Custom Properties: --renk-birincil: #3B82F6; tanımlayarak tüm sitede merkezi yönetin.
HSL ile kolay tema: --ton: 217; color: hsl(var(--ton), 91%, 60%); ile tek değişkenden tema rengi türetin.
Saydamlık için rgba: Katı bir HEX rengi varken arka plan için rgba(59,130,246,0.12) kullanmak temiz sonuç verir.
color-mix(): Modern tarayıcılarda color-mix(in srgb, #3B82F6 20%, transparent) ile CSS'de dinamik karıştırma yapılabilir.
Kontrast kontrolü: Metin rengi seçerken arka planla en az 4.5:1 WCAG kontrast oranını sağlayın.

Sık Sorulan Sorular

Tasarım aracında HEX ama CSS'de HSL mi kullanmalıyım?

Figma, Sketch ve Adobe XD gibi tasarım araçları HEX ile çalışmayı kolaylaştırır; ancak CSS kodunuzu yazan geliştirici HSL'e dönüştürerek çok daha esnek bir sistem kurabilir. Özellikle dark/light mode geçişi yapan sitelerde, HSL değişkenleriyle yalnızca L (parlaklık) parametresini değiştirerek tüm temayı ters çevirmek mümkündür. Pratik öneri: tasarım aşamasında HEX, kod yazarken HSL veya CSS değişkeni.

İlgili araçlar: CSS Gradient Oluşturucu · Glassmorphism Oluşturucu · Neumorphism Oluşturucu