DigiKitRenk Kodu Çevirici (HEX, RGB, HSL)
Bir renk kodu yazın (#ff8800, rgb(255,136,0) ya da hsl(32,100%,50%)); diğer biçimlerdeki karşılığını görün.
Renk kodu biçimleri
Web tasarımında ve CSS'de aynı renk üç farklı biçimde yazılabilir. Tasarım aracından HEX alıp stil dosyasında HSL kullanmak istediğinizde ya da bir RGB değerini kısa HEX koda çevirmeniz gerektiğinde bu araç işinize yarar.
Üç biçim
- HEX: #RRGGBB. Her bileşen 00-FF arasındadır. Örnek: #FF8800.
- RGB: rgb(kırmızı, yeşil, mavi); her bileşen 0-255. Örnek: rgb(255, 136, 0).
- HSL: hsl(ton, doygunluk%, açıklık%). Ton 0-360 derecelik renk çemberindeki yerdir. Örnek: hsl(32, 100%, 50%).
Sık kullanılan renkler
| Renk | HEX | RGB | HSL |
|---|---|---|---|
| Kırmızı | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Yeşil | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Mavi | #0000FF | 0, 0, 255 | 240, 100%, 50% |
| Sarı | #FFFF00 | 255, 255, 0 | 60, 100%, 50% |
| Beyaz | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| Siyah | #000000 | 0, 0, 0 | 0, 0%, 0% |
| Gri | #808080 | 128, 128, 128 | 0, 0%, 50% |
| Turuncu | #FF8800 | 255, 136, 0 | 32, 100%, 50% |
Nasıl kullanılır?
- Renk kodunu yazın: #ff8800, #f80, rgb(255,136,0) ya da hsl(32,100%,50%).
- Çalıştır'a basın.
- HEX, RGB ve HSL karşılıklarını CSS'inize kopyalayın.
İpuçları
- Bir rengin daha açık tonu için HSL'de açıklığı artırın; daha koyu ton için azaltın.
- Yazı ve arka plan renkleri arasında yeterli kontrast, okunabilirlik ve erişilebilirlik için önemlidir.
- Dönüşümlerde yuvarlama nedeniyle HSL değerleri bir birim farklı çıkabilir.
Renk seçerken okunabilirliği kontrol edin
Bir rengi metin ya da arka plan olarak kullanacaksanız kontrast oranına dikkat edin. Web erişilebilirlik yönergeleri (WCAG) AA düzeyi için normal metinde en az 4.5:1, büyük metinde (yaklaşık 24 piksel ya da 18,5 piksel kalın) en az 3:1 oran ister.
Açık gri metin beyaz zeminde şık görünebilir ama çoğu zaman bu sınırın altında kalır. Renk kodunu bu araçla çevirdikten sonra bir kontrast denetleyicisinde metin ve zemin rengini birlikte test etmek, tasarımın herkes tarafından okunmasını sağlar.
Sık sorulan sorular
HEX renk kodu nedir?
Rengin kırmızı, yeşil ve mavi bileşenini iki haneli onaltılık sayılarla gösteren 6 haneli koddur. #FF8800: FF=255 kırmızı, 88=136 yeşil, 00=0 mavi.
#f80 gibi 3 haneli kod ne anlama gelir?
Kısaltmadır; her hane ikilenir. #f80 = #ff8800.
HSL nedir ve ne zaman kullanılır?
HSL, rengi renk tonu (0-360 derece), doygunluk ve açıklık yüzdesiyle tanımlar. Aynı rengin açık ve koyu tonlarını türetmek için RGB'den daha kolaydır.
Hangi biçimleri yazabilirim?
#ff8800 ya da ff8800, #f80, rgb(255,136,0) veya 255,136,0 ve hsl(32,100%,50%) biçimlerini. Sonuçta üç biçim birden gösterilir.