Renk Çevirici (HEX ↔ RGB ↔ HSL)
Renk kodunu girin veya renk seçiciden seçin; tüm formatları ve önizlemeyi görün.
Renk
| HEX | #1E3A5F |
| RGB | rgb(30, 58, 95) |
| HSL | hsl(214, 52%, 25%) |
Renk Formatları
HEX: Web'de en yaygın format (#RRGGBB). Her çift, kırmızı-yeşil-mavi kanallarını 00-FF arası gösterir.
RGB: Aynı kanalları 0-255 arası ondalık sayıyla ifade eder; JavaScript ve CSS'te kullanılır.
HSL: Ton (0-360°), doygunluk ve parlaklık — bir rengin açık/koyu tonlarını üretmek için en pratik format.
HEX, RGB ve HSL Renk Kodları
Aynı renk; web'de üç farklı dille ifade edilir: HEX (#E4A63A), RGB (228, 166, 58) ve HSL (ton, doygunluk, parlaklık). Tasarım aracınız birini, CSS'iniz diğerini isterken dönüşüm ihtiyacı süreklidir. Bu araç, üç format arasında anında çeviri yapar.
Üç Formatın Mantığı
- HEX: Kırmızı-yeşil-mavi kanallarının onaltılık yazımıdır; her çift 0-255 arası bir kanalı temsil eder (FF = 255). Taban mantığı için Sayı Tabanı Çeviriciye bakabilirsiniz.
- RGB: Aynı üç kanalın onluk yazımı; ekranların fiziksel çalışma biçimine en yakın gösterimdir.
- HSL: İnsan algısına en yakın model: Hue (renk tonu, 0-360°), Saturation (canlılık), Lightness (açıklık).
Neden HSL ile Çalışmak Kolaydır?
Bir rengin açık/koyu tonunu üretmek HSL'de tek değeri oynatmaktır: L'yi artırın açılır, azaltın koyulaşır; H'yi sabit tutarak uyumlu palet kurarsınız. RGB'de aynı işi yapmak üç kanalı birden dengelemeyi gerektirir. Bu yüzden tasarım sistemleri ve CSS değişkenlerinde HSL giderek standartlaşmaktadır.
Erişilebilirlik Notu
Metin-arka plan renk kontrastı, okunabilirlik standartlarına (WCAG: normal metin için en az 4,5:1) tabidir. Renk seçerken yalnızca estetiğe değil kontrast oranına da bakmak, siteyi herkes için kullanılabilir kılar.
Sık Sorulan Sorular
#FFF ile #FFFFFF aynı mı?
Evet; üç haneli yazım her hanenin ikizlenmiş kısaltmasıdır (#FA3 = #FFAA33).
Opaklık (şeffaflık) nasıl eklenir?
RGB'ye alfa kanalı eklenir: rgba(228,166,58,0.5) veya 8 haneli HEX (#E4A63A80) kullanılır.
Bu araç tasarım ve geliştirme amaçlıdır.