Nasıl kullanılır
- Bir renk girin — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — ya da renk seçiciyle seçin.
- Listeden ihtiyacınız olan biçimi kopyalayın.
- Kontrast oranını ve WCAG AA/AAA sonuçlarını görmek için bir arka plan rengi belirleyin.
- Kullanmak için skaladaki bir tona tıklayın.
Seçeneklerin açıklaması
- HEX / RGB
- Ekran renkleri; 0–255 arası kırmızı, yeşil ve mavi değerleri. #rrggbbaa ve rgb(… / 50%) saydamlık ekler.
- HSL / HSV
- Ton, doygunluk ve açıklık (veya değer). Bir rengi elle açmak veya koyulaştırmak için kullanışlıdır.
- OKLCH
- CSS Color 4’teki algısal bir renk uzayı. Açıklık değiştirildiğinde ton ve algılanan canlılık sabit kalır; bu da onu paletler ve koyu temalar için ideal kılar.
- CMYK
- Yalnızca referans amaçlı basit bir dönüşüm. Gerçek baskı renkleri yazıcının renk profiline bağlıdır; kesin değerleri matbaanıza sorun.
- Kontrast oranı
- WCAG 2.2, AA düzeyinde normal metin için 4,5:1, büyük metin (18pt veya kalın 14pt) için 3:1 ister; AAA düzeyinde bu değerler 7:1 ve 4,5:1’dir.
Örnek
#0f766e, rgb(15 118 110), hsl(175 77% 26%) ve oklch(51.1% 0.086 186.4) değerlerine eşittir. Beyaz arka planda kontrast oranı yaklaşık 5,5:1’dir; bu, tüm yazı boyutları için WCAG AA’yı geçer.
Yaygın renkler her biçimde
CSS adlı renkler ve değerleri. Buradaki CMYK basit bir matematiksel dönüşümdür; profesyonel baskı için matbaanızın renk profilindeki CMYK değerlerini kullanın.
| CSS adı | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Hangi biçim kullanılmalı
HEX, CSS ve tasarım araçlarında bir rengi yazmanın en kısa yoludur: kırmızı, yeşil ve mavi için ikişer onaltılık hane.
RGB aynı bilgidir, ancak onluk tabanda; rgb(255 0 0 / 50%) saydamlık ekler.
HSL ton, doygunluk ve açıklığı tanımlar; yalnızca son sayıyı değiştirerek aynı rengin daha açık ya da daha koyu tonlarını kolayca üretmenizi sağlar.
OKLCH, açıklıktaki eşit adımların göze de eşit derecede farklı göründüğü daha yeni bir CSS biçimidir — erişilebilir renk paletleri için yararlıdır.
Sıkça sorulan sorular
Metin için iyi bir kontrast oranı nedir?
Gövde metni için en az 4,5:1 (WCAG AA). Beyaz üzerine saf siyah 21:1’dir; beyaz üzerindeki yaygın #767676 gri 4,54:1 ile sınırı kıl payı geçer.
CMYK değeri neden Photoshop’takinden farklı?
Photoshop, belirli bir baskı makinesi ve kâğıt için hazırlanmış bir ICC renk profili üzerinden dönüştürür. Bu araç düz matematiksel formülü kullanır; tahmin için yeterlidir ama baskı provaları için uygun değildir.
HSL ile OKLCH arasındaki fark nedir?
HSL, RGB’nin basit bir yeniden düzenlemesidir; bu yüzden aynı açıklıktaki bir sarı ile bir mavi parlaklık açısından çok farklı görünür. OKLCH ise eşit açıklığın göze eşit parlaklıkta görünmesi için tasarlanmıştır.
OKLCH’yi bugün CSS’te kullanabilir miyim?
Evet. oklch() tüm güncel büyük tarayıcılarda çalışır.
Gizlilik
Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız ve metinleriniz cihazınızda işlenir, sunucularımıza asla yüklenmez.