Renk Kodu Dönüştürücü
Web geliştirmede renkler birden fazla formatta belirtilebilir: hex, RGB, HSL ve adlandırılmış renkler. Bu araç tüm formatlar arasında dönüştürme yapar, görsel önizleme gösterir, erişilebilirlik için kontrast oranlarını hesaplar ve tamamlayıcı renk paletleri oluşturur.
Spesifikasyonlar
Yaygin Kullanim Alanlari
- Tasarımcı tarafından sağlanan hex renkleri daha kolay manipülasyon için HSL'ye dönüştürme
- Metin renginin WCAG erişilebilirlik standartlarını karşılayıp karşılamadığını kontrol etme
- UI tasarımı için renk paletleri oluşturma
- Beklendiği gibi görüntülenmeyen CSS renk değerlerini hata ayıklama
- CSS adlandırılmış renklerinin hex karşılığını bulma
Ozellikler
- Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA ve adlandırılmış renkleri ayrıştırma
- Tüm renk formatları arasında anında dönüştürme
- HEX8 çıktısı (alfa kanallı 8 haneli hex)
- Koyu/açık arka plan geçişli görsel renk önizleme
- Beyaz ve siyah arka plan üzerinde örnek metin önizleme
- Siyah ve beyaza karşı WCAG kontrast oranı hesaplama
- Açık/koyu renk sınıflandırması
- Tamamlayıcı, benzer, üçlü, dörtlü ve monokromatik renk paletleri oluşturma
- Parlaklık ve erişilebilirlik önerilerini gösterme
Ornekler
Ipuclari
- HSL ile çalışmak genellikle daha kolaydır: H renktir, S canlılıktır, L parlaklıktır.
- Erişilebilir metin için en az 4.5:1 kontrast oranı hedefleyin (WCAG AA).
- 8 haneli hex formatı (#RRGGBBAA) alfa saydamlığını içerir.
- CSS4, daha iyi algısal tekdüzelik için oklch() gibi yeni renk uzayları tanıtmaktadır.
Anlama Renk Kodu Dönüştürücü
CSS renk değerleri, birkaç gösterim sistemi kullanarak web stillendirmesi için renkleri tanımlar. En yaygın olanı, her çift hex rakamının kırmızı, yeşil ve mavi kanalları 00 (0) ile FF (255) arasında temsil ettiği onaltılık (#RRGGBB) gösterimdir. Kısa gösterim #RGB her rakamı ikiler (#F00, #FF0000'a eşittir). 8 haneli form #RRGGBBAA bir alfa saydamlık kanalı ekler.
Fonksiyonel gösterimler daha sezgisel renk belirleme sağlar. RGB (rgb(255, 0, 0)) kanalları 0-255 tam sayılar veya yüzdeler olarak belirtir. HSL (hsl(0, 100%, 50%)) ton (0-360 derece renk çarkı), doygunluk (%0-100) ve açıklık (%0-100) kullanır; birçok tasarımcı bunu renk paletleri oluşturmak ve renkleri ayarlamak için daha sezgisel bulur. Hem RGB hem de HSL, rgba() ve hsla() veya modern sözdizimi rgb(255 0 0 / 50%) ile alfa saydamlığını destekler.
Renk erişilebilirliği web geliştirmede kritik bir konudur. WCAG 2.1 minimum kontrast oranlarını tanımlar: normal metin için 4.5:1 (Seviye AA), büyük metin için 3:1 ve artırılmış kontrast için 7:1 (Seviye AAA). Yetersiz kontrast, düşük görme veya renk görme bozukluğu olan kullanıcılar için metni okumayı zorlaştırır veya imkansız hale getirir.
CSS ayrıca 148 adlandırılmış rengi (rebeccapurple, cornflowerblue, tomato gibi), currentColor anahtar kelimesini ve algısal olarak tekdüze renk manipülasyonu sağlayan HWB (ton-beyazlık-siyahlık), LAB, LCH ve OKLCH gibi yeni renk uzaylarını destekler. Yeni uzaylar özellikle uyumlu renk paletleri ve düzgün gradyanlar oluşturmak için kullanışlıdır.
Hex (#FF0000) ve RGB (rgb(255,0,0)) her ikisi de kırmızı, yeşil ve mavi kanal değerlerini belirtir — hex 16 tabanını kullanırken RGB ondalık tam sayılar kullanır. HSL (hsl(0,100%,50%)) rengi ton (0-360 derecelik bir çarkta rengin kendisi), doygunluk (yoğunluk) ve açıklık (parlaklık) kullanarak temsil eder; birçok geliştirici bunu varyasyonlar oluşturmak için daha sezgisel bulur. Her üç format da aynı renkleri temsil edebilir, ancak HSL tek bir değeri ayarlayarak daha açık, daha koyu veya daha soluk varyantlar üretmeyi kolaylaştırır.
Alfa kanalı, 0 (tamamen saydam) ile 1 (tamamen opak) arasında bir ölçekte saydamlığı kontrol eder. Hex gösteriminde alfa iki ek rakam olarak eklenir — #FF000080, %50 saydam kırmızıyı temsil eder (80 hex = 128 ondalık). Fonksiyonel gösterimde sözdizimi rgba(255,0,0,0.5) veya modern form rgb(255 0 0 / 50%)'dir. Alfa saydamlığı, katmanlar, filigranlar ve katmanlı UI öğeleri için gereklidir. WCAG uyumluluğu için Seviye AA, normal metin için en az 4.5:1 ve büyük metin için 3:1 (18px+ kalın veya 24px+ normal) kontrast oranı gerektirirken, Seviye AAA normal metin için 7:1 ve büyük metin için 4.5:1 gerektirir. Simgeler, kenarlıklar ve form kontrolleri gibi metin dışı öğeler, bitişik renklere karşı en az 3:1 kontrasta ihtiyaç duyar.
LAB ve OKLCH, eşit sayısal değişikliklerin görsel olarak eşit renk farklılıkları ürettiği algısal olarak tekdüze renk uzaylarıdır ve bu da onları palet ve düzgün gradyan oluşturmak için üstün kılar. OKLCH (Açıklık, Kroma, Ton) CSS'de özellikle kullanışlıdır çünkü açıklığı ayarlamak doğal, öngörülebilir sonuçlar üretir. Her ikisi de modern CSS'de oklch() ve lab() fonksiyonları ile desteklenir.