Geliştirici Araçları · 16 araç

Renk Kodu Dönüştürücü

HEX, RGB, HSL, HWB ya da OKLCH olarak bir renk yaz veya seç; diğer tüm biçimlerde al. Kontrast kontrolü, üzerindeki metnin WCAG düzeylerini karşılayıp karşılamadığını gösterir.

GİRDİ

HEX, rgb(), hsl(), hwb() ya da oklch(); saydamlıklı ya da saydamlıksız

HEX olarak okundu

SONUÇ

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

KONTRAST (WCAG 2)

  • Beyazla

    7,24:1

    • AA: geçti
    • AA büyük metin: geçti
    • AAA: geçti
    • AAA büyük metin: geçti

  • Siyahla

    2,89:1

    • AA: kaldı
    • AA büyük metin: kaldı
    • AAA: kaldı
    • AAA büyük metin: kaldı

  • #F5F6F8 ile

    6,70:1

    • AA: geçti
    • AA büyük metin: geçti
    • AAA: kaldı
    • AAA büyük metin: geçti

Tamamen tarayıcında çalışır. Girdiğin hiçbir şey sunucuya gönderilmez.

Renk kodu nasıl dönüştürülür?

  1. Bir renk gir

    #2445D6, rgb(36, 69, 214) ya da oklch(47% 0.22 267) gibi bir değer yaz veya yapıştır ya da renk seçiciyi kullan.

  2. İhtiyacın olan biçimi kopyala

    HEX, RGB, HSL, HWB ve OKLCH, her biri kendi kopyalama düğmesiyle birlikte gösterilir.

  3. Kontrastı kontrol et

    Beyaza, siyaha ve seçtiğin bir renge karşı kontrast oranını WCAG AA ve AAA sonuçlarıyla gör.

Tek renk, beş gösterim

HEX ve RGB bir rengin kırmızı, yeşil ve mavi bileşenlerini tanımlar. HSL ve HWB ise rengi tonuyla tanımlar; bu da elle ayarlamayı kolaylaştırır. OKLCH, açıklık değeri renklerin göze ne kadar parlak göründüğüyle örtüşen yeni bir CSS biçimidir; onunla oluşturulan paletler dengeli kalır. Saydamlık her biçimde korunur.

Kontrast ve WCAG

WCAG, normal metin için en az 4,5:1 (AA), AAA için 7:1 kontrast oranı ister. Yaklaşık 24px ya da kalın yazılmış 19px ve üzeri büyük metinler AA için 3:1, AAA için 4,5:1 gerektirir. Oranlar aşağı yuvarlanır; böylece geçti olarak gösterilen bir renk gerçekten geçer.

Sık sorulan sorular

OKLCH rengim neden farklı görünüyor?

OKLCH, sRGB aralığını kullanan ekranların gösteremediği renkleri tanımlayabilir. Bu tür renkler, açıklık ve ton korunup kroması düşürülerek aralığa getirilir; bu olduğunda bir not seni bilgilendirir.

Saydam renklerin kontrastı nasıl kontrol ediliyor?

Saydam bir renk önce beyaz bir sayfada görüneceği gibi beyazın üzerine çizilir ve bu sonuç karşılaştırılır.

Bir sunucuya bir şey gönderiliyor mu?

Hayır. Tüm dönüştürmeler ve kontrast kontrolleri tarayıcında yapılır.