palette Renk Dönüştürücü star

Nasıl Çalışır

Bu üç gösterim aynı rengi anlatır; aralarındaki fark yalnızca ekranın kırmızı-yeşil-mavi ışık seviyelerini nasıl kodladığındadır. RGB her kanalı 0 ile 255 arasında bir ondalık sayı olarak saklar. HEX ise aynı RGB değerlerinin 16'lık tabanda yazılmış halidir: her kanal iki haneli bir onaltılık çifte döner, böylece rgb(255, 128, 0) tam olarak #ff8000 olur (ff=255, 80=128, 00=0). Bu dönüşümde hiçbir renk bilgisi kaybolmaz veya eklenmez — yalnızca yazım biçimi değişir.

HSL farklı çalışır: rengi ton (hue), doygunluk (saturation) ve açıklık (lightness) olmak üzere üç algısal eksende yeniden ifade eder ve bu değerler RGB kanallarından matematiksel olarak türetilir. Ton (0–360°), renk çemberi üzerindeki açıdır; hangi kanalın en büyük, hangisinin en küçük olduğuna ve aralarındaki farka bakılarak hesaplanır: #ff8000 için kırmızı en yüksek (255), mavi en düşük (0) değerdedir ve 60 × ((yeşil − mavi) / (maks − min)) formülü 60 × (128/255) ≈ 30° verir; bu da rengi turuncu bandına yerleştirir. Açıklık, en yüksek ve en düşük kanalın ortalamasıdır — burada (255 + 0) / 2 ≈ %50. Doygunluk ise rengin aynı açıklıktaki gri tona ne kadar uzak olduğunu ölçer — burada %100, çünkü bir kanal tam yoğunlukta, diğeri sıfırdadır. Sonuç hsl(30, 100%, 50%) olarak okunur — #ff8000 ile tamamen aynı turuncu, farklı biçimde anlatılmış.

Tasarımcıların RGB yerine HSL'yi tercih etmesinin nedeni tam olarak budur: bir rengi tonunu koruyarak %20 koyulaştırmak için HSL'de yalnızca açıklık değerini düşürmek yeterlidir — RGB'de aynı işlem üç kanalın orantılı biçimde yeniden hesaplanmasını gerektirir. Renk seçiciden bir renk seçin veya herhangi bir HEX kodu yazın; araç anında her iki gösterime de çevirir.

Bilinmesi Gerekenler

3 haneli kısa HEX (#f80) ve alfa kanalı içeren 4/8 haneli biçimler (#ff8000cc, rgba(255,128,0,0.8)) yaygın varyantlardır; bu araç standart 6 haneli opak HEX ile RGB/HSL karşılıklarını işler. orange gibi renk isimleri CSS standardında sabit HEX değerlerine karşılık gelir, ama her renk isminin akılda kalıcı bir HEX karşılığı yoktur — geliştiricilerin sürekli dönüşüm yapmasının bir başka nedeni budur. Aynı renk bir ekranda bire bir aynı görünse de başka bir ekranda hafif farklı çıkabilir, çünkü tüketici ekranları renk gamı ve kalibrasyon açısından farklılık gösterir — HEX/RGB/HSL değerleri kesin sayılardır, ama ürettikleri ışığın her ekranda birebir aynı olacağı garanti değildir. Metin ve arka plan rengi seçerken, HSL'deki açıklık (L) değerinin algısal kontrastla aynı şey olmadığını unutmayın — doygun bir sarı ile doygun bir mavi aynı L değerine sahip olabilir ama beyaza karşı kontrastları çok farklı görünür; bu yüzden erişilebilirlik kontrolü yalnızca L sayısına değil, gerçek bir kontrast oranı hesabına dayanmalıdır.

CSS, rgb(100%, 50%, 0%) gibi yüzdeye dayalı RGB yazımını da kabul eder; bu, rgb(255, 128, 0) ile tam olarak eşdeğerdir — rengi 0-255 tam sayı yerine yüzde olarak ifade eden tasarım araçlarıyla çalışırken işe yarar. Daha yeni CSS renk fonksiyonları olan oklch() ve lab(), HSL'den bir adım öteye geçer: algısal olarak tekdüze olacak şekilde tasarlanmışlardır, yani açıklıktaki eşit sayısal adımlar insan gözüne her tonda eşit farklı görünür — HSL bunu tüm tonlarda tam olarak garanti etmez. Yine de günlük web ve arayüz çalışmalarında HEX, RGB ve HSL, neredeyse her kod tabanında, stil kılavuzunda ve tasarım aracında karşınıza çıkacak üç temel format olarak kalmaya devam ediyor.