🎨 Renk Kodu Dönüştürücü — HEX, RGB, HSL ve Kontrast Denetimi
HEX, RGB ve HSL renk kodları arasında çevirin, CMYK karşılığını görün, WCAG erişilebilirlik kontrastını denetleyin ve ton paleti üretin.
Nasıl kullanılır?
- Renk kodunu herhangi bir biçimde yazın.
- Tüm karşılıkları, kontrast denetimini ve ton paletini görün.
- İstediğiniz değere tıklayarak kopyalayın.
Renk Kodu Dönüştürücü hakkında bilmeniz gerekenler
Aynı renk, kullanıldığı yere göre farklı biçimlerde yazılır. Tasarım programları HEX (#0E6C8E), CSS çoğu zaman RGB, renk ayarları ise HSL kullanır. Aralarında geçiş yapmak elle mümkün ama hem yavaş hem hataya açıktır.
Bu aracın ikinci ve belki daha değerli işlevi KONTRAST ÖLÇÜMÜDÜR. İki rengin birbiri üzerinde okunup okunamayacağı göz kararına bırakılmaz; ölçülebilir bir orandır. Erişilebilirlik standartları normal boyutlu yazı için en az 4,5:1 ister. Bu ölçüm, bir tasarımın gerçekten okunabilir olup olmadığını söyleyen tek nesnel yoldur. İşlem tarayıcınızda yapılır.
Aynı renk, kullanıldığı yere göre farklı biçimlerde ifade edilir: CSS'te genellikle HEX, tasarım programlarında RGB, renk ayarlaması yaparken HSL. HSL özellikle kullanışlıdır çünkü tonu (hue) sabit tutup doygunluk ve açıklığı değiştirerek uyumlu varyantlar üretmenizi sağlar — HEX ile bunu yapmak neredeyse imkânsızdır.
Kontrast denetimi, aracın en çok göz ardı edilen ama en değerli bölümüdür. Bir rengin beyaz ve siyah zemin üzerindeki okunabilirliğini WCAG standardına göre puanlar ve AA/AAA seviyelerini geçip geçmediğini işaretler. Marka renginizin üzerine beyaz yazı koyup koyamayacağınıza tahminle değil, ölçümle karar verirsiniz.
Ton paleti bölümü, girdiğiniz renkten dokuz kademeli bir ölçek üretir. Modern arayüz kütüphanelerinin (ör. 50, 100, 200… 900) kullandığı yaklaşımın aynısıdır ve bir tasarım sistemi kurmanın en hızlı başlangıç noktasıdır.
Hangi durumlarda işinize yarar?
Tasarımı koda taşımak
Tasarım dosyasındaki HEX kodunu CSS'te kullanılacak RGB karşılığına çevirmek.
Okunabilirliği kontrol etmek
Seçtiğiniz yazı ve zemin renginin gerçekten okunup okunmadığını ölçmek; açık gri üzerine beyaz yazı göz kararı iyi görünüp ölçümde sınıfta kalır.
Renk tonu üretmek
HSL üzerinden aynı rengin daha açık ya da daha koyu tonlarını türetmek.
Daha iyi sonuç için
- Normal yazı için 4,5:1, büyük başlıklar için 3:1 eşiğini hedefleyin.
- Sarı ve açık turuncu tonları beyaz üzerinde neredeyse hiçbir zaman yazı rengi olamaz; onları çizgi ve zemin olarak kullanın.
- Bir palet kurarken önce zemin ve ana yazı rengini kontrastla belirleyin, vurgu renklerini sonra ekleyin.
Sınırlar ve dikkat edilecekler
- Kontrast ölçümü yazı ve zemin renkleri arasındadır; arkada bir görsel varsa ölçüm gerçek durumu yansıtmaz.
- Standartlar büyük ve kalın yazı için daha düşük eşik kabul eder; hangi eşiğin geçerli olduğu yazının boyutuna bağlıdır.
- Ekran kalibrasyonu renkleri farklı gösterebilir; ölçüm kodlar üzerinden yapılır, ekranınızın gösterdiği üzerinden değil.
Sık Sorulan Sorular
WCAG kontrast oranı nedir, neden önemli?
CMYK değerleri baskı için kullanılabilir mi?
Ton paleti ne işe yarar?
Kontrast oranı ne demek?
HEX ve RGB farkı ne?
HSL ne işe yarar?
Araç künyesi
| Dosya boyutu sınırı | Yok — sınır yalnızca cihazınızın belleğidir |
|---|---|
| Üyelik / ücret | Gerekmez — tamamen ücretsiz |
| Verileriniz | Cihazınızdan çıkmaz — hiçbir sunucuya yüklenmez |
| Çevrimdışı çalışır mı? | Evet — sayfa yüklendikten sonra internet gerekmez |