HTML Renk Kodu Dönüştürücü nedir?
Tasarımcı size #1A73E8 verdi ama stil dosyasında rgb() ya da hsl() yazmanız gerekiyor. Web tasarımında renk HEX, RGB, HSL ve CMYK gibi farklı biçimlerde ifade edilir; tasarım araçları ile CSS arasında renk aktarırken dönüşüm kaçınılmazdır.
HEX kodunu yazın (kısa #F80 biçimi de olur); RGB, HSL ve CMYK karşılıkları ile rengin açık mı koyu mu olduğu bilgisi gösterilir. Aşağıda dönüşümün nasıl yapıldığını, iki çözümlü örneği ve sık yapılan hataları bulabilirsiniz.
HEX nasıl okunur?
#RRGGBB biçiminde ilk iki hane kırmızı, sonraki ikisi yeşil, son ikisi mavi kanalın 0-255 değerini onaltılık olarak verir. Kısa #RGB yazımında her hane ikiye katlanır: #F80, #FF8800 ile aynıdır.
Örnek: #1A73E8
1A = 1×16 + 10 = 26, 73 = 7×16 + 3 = 115, E8 = 14×16 + 8 = 232. Yani rgb(26, 115, 232). Araç ayrıca hsl(214, 82%, 51%) ve CMYK 89%, 50%, 0%, 9% değerlerini verir. Koyu bir renk olduğundan üzerine açık renkli yazı uygundur.
Örnek: #FF8800 ve kısa yazımı #F80
FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0). HSL karşılığı hsl(32, 100%, 50%). CMYK 0%, 47%, 100%, 0%. #F80 yazarsanız aynı sonuç gelir. Açık renk olduğundan koyu yazı uygundur.
Popüler renkler
| Renk | HEX | RGB |
|---|---|---|
| Beyaz | #FFFFFF | 255, 255, 255 |
| Siyah | #000000 | 0, 0, 0 |
| Kırmızı | #FF0000 | 255, 0, 0 |
| Yeşil | #00FF00 | 0, 255, 0 |
| Mavi | #0000FF | 0, 0, 255 |
| Turuncu | #FFA500 | 255, 165, 0 |
HSL ile tonları değiştirmek
HSL, rengi ton (0-360 derece), doygunluk ve açıklık olarak tanımlar. Bir düğmenin üzerine gelince rengin biraz koyulaşması için HSL'de açıklığı birkaç puan düşürmek HEX'te rakamları değiştirmekten daha kolaydır. #6B8EFA için hsl(225, 93%, 70%) değerini verir.
Erişilebilirlik
Normal boyutlu metinde metin ve arka plan rengi arasında WCAG'a göre en az 4,5:1 kontrast oranı önerilir. Araç yalnızca rengin açık mı koyu mu olduğunu belirtir, kontrast oranını hesaplamaz. #808080 gibi orta tonlar sınırdadır ve her iki yazı rengiyle de zayıf kalabilir.
Sık yapılan hatalar
- Harf O ile rakam 0'ı karıştırmak: HEX yalnızca 0-9 ve A-F kullanır.
- 8 haneli (alfa kanallı) HEX yazmak: araç 3 ve 6 haneli kodları kabul eder.
- CMYK'yı kesin baskı rengi sanmak: dönüşüm basitleştirilmiştir, matbaa için renk profili gerekir.
- Açık-koyu bilgisini kontrast ölçümü sanmak: yalnızca basit bir ipucudur.
Sık sorulan sorular
HEX kodunda # işareti şart mı?
CSS'te evet, ancak bu araçta # olmadan da girebilirsiniz.
CMYK baskı için kesin mi?
Hayır; basitleştirilmiş dönüşümdür, matbaa için renk profilli (ICC) dönüşüm gerekir.
HEX'i elle RGB'ye nasıl çeviririm?
Her ikili haneyi onaltılıktan onluğa çevirin: ilk hane × 16 + ikinci hane. FF = 15×16 + 15 = 255.
HSL'deki ton değeri ne anlama gelir?
0-360 derece arasındaki renk çarkı konumudur: 0 kırmızı, 120 yeşil, 240 mavidir.