Renk Dönüştürücü ve Kontrast Denetleyici

.NET dahil her renk biçimi; düzeltme önerili WCAG kontrastı ve bir OKLCH paleti.

Yerelde çalışır · hiçbir şey yüklenmez

Formats
Contrast (WCAG 2.x)

–

Normal text (16px). The quick brown fox jumps over the lazy dog.

Large text (24px)

Large bold text (18.66px / 14pt bold)

Button outline Icon & UI (3:1)
Suggest for
Tints & shades (OKLCH)click a swatch to copy

Ne yapar?

Herhangi bir biçimde bir renk yapıştırın, diğer tüm biçimleri her biri bir kopyalama düğmesiyle alın: HEX, RGB, HSL, HWB, OKLCH, OKLab, CIE Lab/LCH (D50) ve color(display-p3 …). .NET kodunda kullanılan biçimleri de okur ve yazar: Color.FromArgb(…) (int, ARGB veya alfa + adlandırılmış renk), Color.FromRgb, Colors.Red, ToString() çıktısındaki Color [A=…, R=…] metni, 0xAARRGGBB, işaretli ToArgb() tamsayıları ve XAML #AARRGGBB. #xxxxxxxx değerinin CSS sırasını mı yoksa .NET sırasını mı ifade ettiğini 8 haneli hex anahtarıyla seçin.

Lab, LCH ve OKLCH, sRGB’nin gösteremediği renkleri tanımlayabilir. Bu renkler işaretlenir ve hex/RGB değerleri kırpılmak yerine CSS Color 4 yöntemiyle (OKLCH kroma azaltma) gamut içine eşlenir. Hesaplamalar CSS Color 4’ü izler: sRGB aktarım eğrisi, D65 beyaz noktası, Lab için D50’ye Bradford uyarlaması ve Björn Ottosson’un OKLab’i.

Kontrast

Girdiğiniz renk metin, ikinci renk arka plan olarak kabul edilir. AA ve AAA (normal ve büyük metin) ile kullanıcı arayüzü bileşenleri (3:1) için geçti/kaldı bilgisiyle birlikte WCAG 2.x kontrast oranını görürsünüz. Oran aşağı yuvarlanır; yani 4.5:1 olarak gösterilen bir çift gerçekten geçer. APCA Lc değeri WCAG 2.x’in parçası olmadığı için yalnızca bilgi amaçlı gösterilir. Yarı saydam renkler, bir tarayıcının çizeceği şekilde birleştirilir.

Bir çift kaldığında araç yalnızca OKLCH açıklığını değiştirerek en yakın geçerli metin ve arka plan renklerini önerir; böylece ton (hue) ve kroma aynı kalır. Birini kullanmak için Uygula‘ya tıklayın.

Palet

50–950 açık/koyu ton skalası OKLCH ile oluşturulur ve renginiz en yakın basamakta değişmeden yer alır. Paleti CSS özel özellikleri (custom properties), Tailwind v3 colors bloğu veya Tailwind v4 @theme bloğu olarak kopyalayın.

Gizlilik

Her şey tarayıcınızda çalışır. Girdiler yalnızca tarayıcınızın yerel depolamasında saklanır.