Skip to content
user@convertitive:~$convertitive

Renk Seçici

Bir kez seçin, her formatı alın. Ayrıca beyaz ve siyaha karşı anlık WCAG kontrast okuması.

Aşağıdaki seçici seçilen rengi işler ve üç formatta gösterimini hesaplar: hex, rgb() ve hsl(). Her formatın yanında tek dokunuşla kopyalama düğmesi bulunur. Bunun altında ise saf beyaz ve saf siyaha karşı anlık WCAG kontrast oranı gösterilir — metin ve arka plan kombinasyonlarını hızlıca doğrulamak için kullanışlıdır. Hangi formatı ne zaman kullanacağınız için CSS renk formatları kılavuzumuza bakabilirsiniz.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Bir renk seçin

    Sistem renk seçiciyi açmak için renk önizlemesine tıklayın ya da doğrudan hex / RGB değeri girin.

  2. İhtiyacınız olan formatı kopyalayın

    Depolama ve tasarım dosyaları için hex. Kanalları hesaplayan kod için rgb(). Tasarım jetonu ton döndürmeleri için hsl().

  3. Kontrastı kontrol edin

    İki kontrast rozeti, saf beyaz ve saf siyaha karşı WCAG oranını gösterir. Metin rengi kombinasyonlarını doğrulamak için kullanın.

Frequently asked questions

Neden üç format?
Her birinin farklı bir kullanım amacı var. Hex, her araca temiz kopyalanan evrensel depolama formatıdır. rgb(), programatik kodun ürettiği ve kullandığı formattır. hsl() ise bir tasarımcının parlaklığı veya doygunluğu bağımsız olarak ayarlamasını sağlar — tasarım jetonu varyantları (üzerine gelme durumları, tema ayarlamaları) için tam ihtiyaç duyulan şeydir.
WCAG kontrast kontrolü neyi ölçer?
İki rengin göreli parlaklıkları arasındaki oranı, 1:1 (özdeş) ile 21:1 (siyah üzerine beyaz) arasında bir ölçekte hesaplar. WCAG 2.1 AA, gövde metni için 4,5:1, büyük metin ve kullanıcı arayüzü bileşenleri için 3:1 gerektirir. Formül WCAG 2.1 §1.4.3'te yer almaktadır.
Seçici OKLCH'yi destekliyor mu?
Henüz değil — hex, RGB ve HSL çalışma kullanım durumlarının %95'ini karşılıyor. OKLCH ve daha geniş algısal renk tartışması için CSS renk formatları kılavuzumuza bakın. Ayrıca bir OKLCH değerini CSS ön işlemcisine yapıştırabilirsiniz; modern tarayıcılar dahili olarak dönüştürür.
Hex neden bazen 6 yerine 4 basamaklı olur?
Üç ve dört basamaklı hex (örn. #F60, #F60A), her basamağın iki katına çıkarıldığı bir kısaltmadır. #F60 = #FF6600 anlamına gelir. Dört basamaklı form alfa kanalını içerir. Modern kodların çoğu netlik için tam 6/8 basamaklı formu kullanır; her ikisi de geçerli CSS'dir.
Seçici geçmişimi kaydediyor mu?
Hayır. Her şey tarayıcınızda çalışır; hiçbir şey sunucuya gönderilmez veya sayfalar arasında depolanmaz.

İlgili Türkçe araçlar