Renk Çevirici (HEX/RGB/HSL)
Renk kodlarını HEX, RGB ve HSL arasında çevirin; tonları ve kontrastı görün.
Renk Çevirici (HEX/RGB/HSL) — nasıl kullanılır?
Renk Çevirici (HEX/RGB/HSL) Nedir, Nasıl Kullanılır?
Renk çevirici, bir rengi HEX (#RRGGBB), RGB ve HSL biçimleri arasında anında dönüştürür; rengin açık/koyu tonlarını ve beyaz/siyah üzerindeki kontrast oranını (WCAG erişilebilirlik) gösterir. Web tasarımcıları ve geliştiriciler için renk paleti ve marka rengi çalışmalarında pratik bir yardımcıdır.
Renk Modelleri: HEX, RGB ve HSL Nedir?
Web ve dijital tasarımda renkler farklı sistemlerle ifade edilir. Bu üç gösterim aynı rengi tanımlar, yalnızca yazım biçimleri farklıdır. HEX kodu (#3498db gibi) altı onaltılık karakterle kırmızı, yeşil ve mavi bileşenleri temsil eder ve CSS ile HTML'de en sık kullanılan biçimdir. RGB aynı bileşenleri 0-255 aralığında ondalık değerlerle (rgb(52, 152, 219)) ifade eder. HSL ise insan algısına daha yakın bir modeldir: ton (hue), doygunluk (saturation) ve parlaklık (lightness) değerlerini kullanır. Aracımız bu üç biçim arasında anında çeviri yapar.
Hangi Model Ne Zaman İşinize Yarar?
Her renk modelinin güçlü olduğu bir kullanım senaryosu vardır:
- HEX: Tasarımcılarla paylaşım, CSS dosyaları ve marka kılavuzları için en yaygın ve kompakt biçimdir.
- RGB / RGBA: Saydamlık (alfa) eklemeniz gerektiğinde veya programatik renk hesaplamalarında pratiktir.
- HSL: Bir rengin tonunu koruyup yalnızca parlaklığını veya doygunluğunu değiştirmek istediğinizde idealdir. Açık/koyu varyasyonlar veya renk paletleri oluşturmak HSL ile çok daha kolaydır.
WCAG Kontrast Oranı Neden Önemli?
Aracımızın öne çıkan özelliklerinden biri, seçtiğiniz renk için WCAG kontrast oranını göstermesidir. Erişilebilirlik (accessibility), modern web tasarımının ve SEO'nun ayrılmaz bir parçasıdır. Metin ile arka planı arasındaki kontrast yetersizse, düşük görme yetisine sahip kullanıcılar ve parlak güneş ışığında ekrana bakanlar içeriği okuyamaz.
WCAG 2.1 standardının önerdiği eşik değerler şunlardır:
| Kullanım | AA Seviyesi | AAA Seviyesi |
|---|---|---|
| Normal metin | 4.5:1 | 7:1 |
| Büyük metin (18pt+) | 3:1 | 4.5:1 |
Kontrast oranının yüksek olması yalnızca yasal uyumluluk açısından değil, kullanıcı deneyimi ve dönüşüm oranları açısından da kritiktir. Arama motorları da erişilebilir, kullanıcı dostu sayfaları ödüllendirir.
Aracı Adım Adım Nasıl Kullanırsınız?
- Rengi herhangi bir biçimde girin: HEX kodu, RGB veya HSL değeri.
- Araç diğer iki gösterimi anında hesaplayıp gösterir.
- Renk tonunu (hue) ve görsel önizlemeyi inceleyin.
- WCAG kontrast oranına bakarak rengin metin veya arka plan olarak uygun olup olmadığını değerlendirin.
- İhtiyacınız olan biçimi kopyalayıp doğrudan CSS'inize aktarın.
En İyi Uygulamalar ve Sık Yapılan Hatalar
- Yalnızca renge güvenmeyin: Bilgi iletirken sadece renk kullanmak renk körü kullanıcıları dışlar; ikon veya metinle destekleyin.
- Marka rengini erişilebilirlikle dengeleyin: Çok açık veya pastel kurumsal renkler beyaz zeminde okunmaz; metin için koyu varyasyon türetin.
- HSL ile sistematik palet kurun: Tek bir tonun parlaklığını kademeli değiştirerek tutarlı bir tasarım sistemi oluşturabilirsiniz.
Sitenizin görünürlüğünü artırmak istiyorsanız SEO paketlerimiz ile erişilebilirlik dahil teknik optimizasyon hizmeti alabilirsiniz.
Sıkça Sorulan Sorular
Profesyonel desteğe mi ihtiyacınız var?
Web sitesi, özel yazılım ve dijital işleriniz için uzman ekibimizden 24 saat içinde ücretsiz teklif alın.