Renk dönüştürücü

Herhangi bir CSS rengini yaz ya da seç, tüm biçimlerde aynı anda al. Bir arka plana göre kontrastı kontrol et, açık ve koyu tonlar üret.

Ücretsiz ve gizli. Her şey tarayıcında çalışır, hiçbir şey yüklenmez.

Nasıl kullanılır

  1. Bir renk gir#0d6b57, rgb(13 107 87) ya da teal gibi bir değer yaz veya seçiciyi kullan.
  2. Gereken biçimi kopyalaTüm biçimler aynı anda güncellenir; tek tıkla kopyala.
  3. Kontrastı kontrol etBir arka plan rengi belirle ve WCAG sonuçlarını oku.

Tek girdiden tüm biçimler

Tasarımcılar HEX değer verir, CSS rgb() ya da hsl() ister, tasarım token'ları giderek OKLCH kullanır, matbaa CMYK sorar. Rengi tarayıcının anladığı herhangi bir biçimde yaz, rebeccapurple gibi adlar dahil; diğerlerinin hepsi kopyalanmaya hazır olarak hemen görünür.

OKLCH, tüm modern tarayıcıların desteklediği algısal bir renk uzayıdır: açıklıktaki eşit adımlar göze de eşit görünür. Aşağıdaki ton paleti bu yüzden beyaz ve siyahla karıştırarak değil, OKLCH ile oluşturulur. Marka renklerinden hover, kenarlık ve arka plan tonları üretmek için idealdir.

Erişilebilir kontrast

Az gören kişiler için yazı arka plandan belirgin şekilde ayrılmalıdır. Kontrast denetleyici WCAG oranını hesaplar ve rengin AA (normal yazı için 4.5:1, büyük yazı için 3:1) ve AAA (7:1 ve 4.5:1) seviyelerini geçip geçmediğini gösterir. Yarı saydam renkler, tarayıcının yapacağı gibi önce arka planla karıştırılır.

Sık sorulan sorular

Hangi renk biçimlerini yazabilirim?

CSS'te geçerli her şeyi: 3, 4, 6 ya da 8 haneli HEX, rgb(), hsl(), hwb(), lab(), oklch() ve renk adları.

CMYK değeri baskı için kesin mi?

Yazıcı profili olmadan yapılan basit bir dönüşümdür. Profesyonel baskı için matbaanın profilindeki CMYK değerlerini kullan.

Hangi kontrast oranı gerekiyor?

WCAG AA, normal yazı için 4.5:1, büyük yazı ve arayüz parçaları için 3:1 ister.

OKLCH neden önemli?

İnsanların açıklığı algılama biçimine uyar; OKLCH ile yapılan paletler ve geçişler dengeli görünür.