Renk Kodu Çevirici nedir, ne işe yarar?
Web tasarımında aynı renk farklı biçimlerde ifade edilir: CSS'te HEX kodu, grafik programlarında RGB, ton ayarı yaparken HSL. Bu araç, üç biçim arasında anında dönüşüm yapar ve değişikliği renk önizlemesinde gösterir.
Ayrıca seçtiğiniz rengin beyaz ve siyah zemin üzerindeki kontrast oranını hesaplar. Yeterli kontrast, okunabilirlik ve erişilebilirlik açısından önemlidir; WCAG normal metin için en az 4,5:1 oranını önerir.
Nasıl kullanılır?
- Renk seçiciyi kullanın veya HEX, RGB ya da HSL alanlarından birine kod yazın.
- Diğer biçimlerin otomatik güncellendiğini görün.
- Kontrast oranını kontrol edin.
- İstediğiniz formatı kopyalayıp tasarımınızda kullanın.
Kullanım ipuçları
- Düğme ve bağlantı renklerinde en az 4,5:1 kontrast hedefleyin.
- Marka renklerinizi tek bir yerde HEX olarak kayıt altında tutun.
- Renk körlüğü olan kullanıcılar için bilgiyi yalnızca renkle iletmeyin.
HEX, RGB ve HSL nedir?
Aynı renk farklı biçimlerde ifade edilebilir. Aşağıda bu sitenin vurgu rengi üç biçimde gösteriliyor; hepsi aynı rengi tanımlar.
| Biçim | Örnek | Nasıl okunur? |
|---|---|---|
| HEX | #c2410c | Kırmızı, yeşil ve mavi miktarını onaltılık sistemle (c2, 41, 0c) yazar. |
| RGB | rgb(194, 65, 12) | Kırmızı, yeşil ve mavinin 0-255 arasındaki değerleridir. |
| HSL | hsl(17, 88%, 40%) | Ton (derece), doygunluk ve parlaklık yüzdesidir; rengi ayarlamayı kolaylaştırır. |
Kontrast oranı ve WCAG
Kontrast oranı, metin ile arka plan arasındaki parlaklık farkını ölçer ve 1:1 ile 21:1 arasında değer alır. Web Erişilebilirlik Yönergeleri (WCAG) okunabilirlik için asgari oranlar belirler.
| Kullanım | AA düzeyi | AAA düzeyi |
|---|---|---|
| Normal boyutlu metin | 4,5:1 | 7:1 |
| Büyük metin (yaklaşık 24 piksel ve üstü ya da 18,5 piksel kalın) | 3:1 | 4,5:1 |
| Düğme kenarlığı, simge gibi arayüz bileşenleri | 3:1 | - |
Marka rengi seçerken izlenecek adımlar
- Ana marka rengini belirleyin ve HEX kodunu tek bir yerde kayıt altına alın.
- Rengin beyaz ve siyah zemin üzerindeki kontrastını kontrol edin; hangisinde okunabilir olduğunu görün.
- HSL'de parlaklık ve doygunluğu değiştirerek açık ve koyu tonlar üretin (düğme üzerine gelme, arka plan vb. için).
- Hata, uyarı ve başarı gibi durum renklerini seçin; yalnızca renge güvenmeyin, simge ve metinle de destekleyin.
- Karanlık modu destekliyorsanız renklerin koyu zeminde de yeterli kontrasta sahip olduğunu doğrulayın.
Renk kodlarını nerede kullanırsınız?
- Web sitesi CSS dosyalarında ve tema ayarlarında (HEX ya da HSL).
- Figma, Canva ve benzeri tasarım araçlarında marka renk paleti tanımlarken.
- E-posta şablonlarında ve reklam görsellerinde.
- Kurumsal kimlik rehberinde ekran renklerini belgelerken. Basılı materyal için CMYK ya da Pantone değerleri ayrıca belirlenmelidir.
Renk seçiminde sık yapılan hatalar
- Güzel görünen ama okunmayan açık gri metin kullanmak.
- Bilgiyi yalnızca renkle iletmek; renk körlüğü olan kullanıcılar farkı göremeyebilir.
- Ekranda gördüğünüz rengin baskıda aynı çıkacağını varsaymak; ekran ve baskı renk alanları farklıdır.
- Çok sayıda benzer tonla tutarsız bir palet oluşturmak.
Örnek: Marka renginden erişilebilir bir düğme rengi seçmek
Marka renginiz #c2410c ise bu rengin beyaz zemin üzerindeki kontrast oranı yaklaşık 5,2:1, siyah zemin üzerinde ise yaklaşık 4,1:1'dir. Normal metin için 4,5:1 eşiğini beyaz zeminde geçtiği, siyah zeminde ise geçemediği anlaşılır. Bu renkte bir düğme yapacaksanız yazıyı beyaz tutmak doğru seçimdir; rengi metin rengi olarak beyaz zeminde kullanmak da yeterli kontrast sağlar.
Aynı rengin üzerine gelme (hover) durumunda daha koyu bir ton istiyorsanız HSL değerinde parlaklığı azaltın: hsl(17, 88%, 34%) yaklaşık #a3360a kodunu verir ve beyaz zemin üzerinde yaklaşık 6,8:1 kontrasta sahiptir. Böylece hem marka tutarlılığını korur hem de okunabilirlikten ödün vermezsiniz.
Açık gri gibi zayıf kontrastlı renkler yaygın bir hatadır: #999999 beyaz zeminde yaklaşık 2,9:1 kontrast verir ve normal boyutlu metin için yetersizdir. Aynı zeminde #767676 yaklaşık 4,5:1 ile eşiği geçer.
Renk paleti oluştururken 60-30-10 yaklaşımı
Tasarımda sık kullanılan bir kurala göre arayüzün yaklaşık %60'ı baskın (genellikle nötr) bir renkten, %30'u ikincil bir renkten ve %10'u vurgu renginden oluşur. Marka renginiz çoğu durumda vurgu renginiz olmalıdır; düğme ve bağlantılar gibi dikkat çekmesi gereken yerlerde kullanılır. Her renk için açık ve koyu birer ton (HSL parlaklığını değiştirerek) tanımlarsanız arka plan, kenarlık ve metin için yeterli seçeneğiniz olur ve tasarımınız tutarlı kalır.