Renk
HEX ↔ RGB ↔ HSL Renk Dönüştürücü
Tasarım, CSS ve UI çalışmalarında renk kodlarını farklı formatlarda görmek için.
Son güncelleme:
HEX, RGB ve HSL Arasındaki Fark
HEX (#RRGGBB), her renk kanalını 00-FF arasında 16'lık (hexadecimal) tabanda ifade eden CSS ve tasarım araçlarında en sık kullanılan formattır. RGB (Red, Green, Blue) aynı bilgiyi 0-255 arasında ondalık sayılarla verir ve genellikle kod içinde daha okunaklıdır. HSL (Hue, Saturation, Lightness) ise rengi ton açısı, doygunluk yüzdesi ve ışıklık yüzdesi olarak tanımlar; bu format özellikle bir rengin tonunu koruyarak açık/koyu tonlarını üretmek istediğinizde (örneğin hover veya disabled durumları) pratiktir.
Hangi Format Ne Zaman Tercih Edilmeli?
CSS'te sabit bir marka rengi tanımlarken HEX yaygın ve kısa bir gösterimdir. Şeffaflık (alpha kanalı) gerektiğinde RGBA veya HSLA kullanılır. Bir rengin varyasyonlarını (daha açık/koyu tonlarını) programatik üretmek gerektiğinde HSL, yalnızca 'Lightness' değerini değiştirmeye izin verdiği için en kolay yöntemdir.
Renk Kodu Dönüşümü Nasıl Çalışır?
HEX'ten RGB'ye dönüşümde, HEX kodunun ilk iki karakteri kırmızı (R), ortadaki iki karakteri yeşil (G), son iki karakteri mavi (B) kanalının 16'lık tabanda değeridir; bu değerler 10'luk tabana çevrilerek 0-255 aralığında RGB elde edilir. RGB'den HSL'ye dönüşüm ise kanallar arasındaki maksimum ve minimum farktan ton (hue) açısı hesaplanarak yapılır.
Nasıl Kullanılır?
- 1Herhangi bir formatta renk girin; diğer formatlar otomatik gösterilir.
Formül
RGB: her kanal 0-255 · HEX: #RRGGBB (16'lık taban) · HSL: Ton(0-360°), Doygunluk(%), Işıklık(%)
Örnek
- #FF5733→RGB(255, 87, 51) · HSL(11°, 100%, 60%)
- RGB(0, 128, 255)→#0080FF · HSL(210°, 100%, 50%)
Sık Sorulan Sorular
- HEX renk kodu kaç karakterden oluşur?
- Standart bir HEX renk kodu # işaretinden sonra 6 karakterden oluşur (örn. #FF5733); her iki karakter bir renk kanalını (R, G, B) temsil eder.
- RGBA ile RGB arasındaki fark nedir?
- RGBA, RGB'ye ek olarak 0 (tamamen şeffaf) ile 1 (tamamen opak) arasında bir alpha (şeffaflık) değeri içerir.
- HSL'de 'Hue' (ton) değeri ne anlama gelir?
- Hue, 0-360 derece arasında bir açı olup rengin renk çemberindeki konumunu belirtir; 0° kırmızı, 120° yeşil, 240° mavidir.
- 3 karakterli kısa HEX kodu (#FFF gibi) nedir?
- 3 karakterli kısa HEX gösterimi, her karakterin tekrarlanmasıyla 6 karakterli tam koda genişletilir; örneğin #FFF, #FFFFFF'e eşittir.
- Aynı rengin farklı formatlardaki değerleri birbirinden farklı mı görünür?
- Hayır, HEX, RGB ve HSL yalnızca aynı rengi farklı sayısal sistemlerle ifade eder; hepsi ekranda aynı görsel rengi üretir.
