Renk Dönüştürücü
HEX, RGB, HSL ve OKLCH renklerini dönüştürün ve WCAG kontrastını kontrol edin.
Kontrast 5.88:1
| HEX | #0b5fd1 | |
|---|---|---|
| RGB | rgb(11, 95, 209) | |
| HSL | hsl(215, 90%, 43%) | |
| HSV | hsv(215, 95%, 82%) | |
| CMYK | cmyk(95%, 55%, 0%, 18%) | |
| OKLCH | oklch(51.2% 0.191 259) |
Koyu ve açık tonlar
Aynı renk tonu ve doygunluk, açıklık beyaza doğru yukarı ve siyaha doğru aşağı taşınmış hâlde; böylece skala tek renk kalır. Kontrast yukarıdaki arka plana göre ölçülür.
| Renk örneği | Açıklık | HEX | Kontrast | Kopyala |
|---|---|---|---|---|
| 88.6% | #c8defc | 1.37:1 | ||
| 77.3% | #91bdf9 | 1.94:1 | ||
| 65.9% | #5a9cf6 | 2.79:1 | ||
| 54.5% | #237bf3 | 4.04:1 | ||
| 43.1% - sizin renginiz | #0b5fd1 | 5.88:1 | ||
| 34.5% | #094ca7 | 8.07:1 | ||
| 25.9% | #07397d | 11.11:1 | ||
| 17.3% | #042654 | 14.89:1 | ||
| 8.6% | #02132a | 18.6:1 |
Renk körlüğü
Bu bir tanı değil, bir yaklaşıklıktır: her iki renk de Machado, Oliveira ve Fernandes (2009) matrislerinden tam şiddetle geçirilir. Bir renk çiftinin dikromatik bir izleyici için ne kadar kaydığını gösterir, herhangi bir kişinin tam olarak ne gördüğünü değil.
İlgili araçlar
- Kod BiçimlendiriciXML, HTML ve CSS'i biçimlendirip küçültün, JavaScript'i küçültün - hepsi tarayıcınızda.
- Kodlayıcı / ÇözücüBase64, URL'ler ve HTML varlıklarını kodlayıp çözün, sayı tabanlarını dönüştürün.
- Kayıt OluşturucularSPF, DMARC, BIMI, MTA-STS ve TLS-RPT kayıtlarını, meta etiketlerini ve robots.txt dosyasını yazdıkça yapılan canlı kontrollerle oluşturun.
Bu araç hakkında
Renk Dönüştürücü, 3, 4, 6 veya 8 basamaklı HEX olarak, rgb() ya da rgba() olarak veya hsl() ya da hsla() olarak - virgülle ya da boşlukla ayrılmış, yüzdelere ve bir alfa değerine izin verilir - yazılmış bir rengi ayrıştırır ve onu HEX, RGB, HSL ve OKLCH olarak geri yazar. OKLCH, doğrusal sRGB ve OKLab üzerinden hesaplanır; girdi olarak bir oklch() değeri veya “rebeccapurple” gibi bir CSS renk adı da kabul edilir; lab(), lch() ve color() kabul edilmez. İkinci alan arka plandır ve araç, iki renk arasındaki WCAG 2.1 kontrast oranını iki ondalığa yuvarlayarak 4,5, 3 ve 7 eşiklerine göre bildirir. Yarı saydam bir renk, oran ölçülmeden önce arka planın üzerine (arka plan da beyaz bir sayfanın üzerine) düzleştirilir ve ham değer yanında gösterilir. Çift AA'da başarısız olduğunda sayfa, 4.5:1'e ulaşan en yakın rengi önerir - aynı renk tonu ve doygunluk, açıklık ise gerektiği kadar az kaydırılmış olarak - ve aynı yöntemle oluşturulmuş bir koyu ton ve açık ton dizisi sunar. Önizleme bloğu ayrıca Machado, Oliveira ve Fernandes (2009) matrislerinin döteranopi, protanopi ve tritanopi için gösterdiği hâliyle de görüntülenir; bu, belirli bir kişinin gördüğü şey değil, tek bir dikromatik modelin yaklaşıklığıdır.
Ayrıştırma, HEX, RGB, HSL, HSV, CMYK ve OKLCH dönüşümleri, alfa birleştirme, kontrast hesabı, koyu ve açık ton dizisi, erişilebilir renk önerisi ve renk körlüğü benzetimi sayfa içinde yapılan düz aritmetiktir - Web Crypto yok, XGM API'sine istek yok ve renklerle ilgili hiçbir şey saklanmaz. Renk seçici ve ekran örnekleyici tarayıcının kendi denetimleridir ve seçtiğiniz rengin dışında hiçbir şey okumaz. İki renk, bilerek URL'de fg ve bg parametreleri olarak tutulur; böylece kopyaladığınız bir bağlantı, bir meslektaşınızın bakması için aynı çifti yeniden açar; bir renk hassas bir girdi değildir ve oturumunuzla ilgili başka hiçbir şey bağlantıya girmez. Biçim tablosunun JSON ve Markdown dışa aktarımları yerel olarak üretilir ve indirilir.
Nasıl kullanılır
- Renk Dönüştürücü aracını açın.
- İncelemek istediğiniz girdiyi yapıştırın veya yazın.
- Tarayıcınızda hesaplanan sonucu okuyun; girdi XGM'e gönderilmez.
- Çıktıyı yalnızca doğru göründüğünü kontrol ettikten sonra kopyalayın.
- Daha geniş bir teşhis görünümü gerekiyorsa ilgili XGM araçlarını kullanın.
SSS
Hangi kontrast eşiklerini kontrol ediyor?
WCAG 2.1'den gelen dördü: 1.4.3 başarı ölçütü AA düzeyinde normal metin için 4.5:1 ve büyük metin için 3:1 ister; 1.4.6 ise AAA düzeyinde bunları 7:1 ve 4.5:1'e yükseltir. Oradaki büyük metin, en az 18pt (yaklaşık 24px) ya da kalınsa 14pt (yaklaşık 18.66px) anlamına gelir. Sonuç satırı, dördünün her birini geçti ya da kaldı olarak işaretler; böylece bir çiftin hangi düzeye ulaştığını görebilirsiniz.
Oran nasıl hesaplanıyor?
Her sRGB kanalı 255'e bölünüp doğrusallaştırılır - 0,04045'in altında c/12.92, aksi hâlde ((c+0.055)/1.055) üzeri 2,4 - ardından göreli parlaklığı vermek üzere 0,2126 kırmızı, 0,7152 yeşil ve 0,0722 mavi olarak ağırlıklandırılır. Oran, iki ondalığa yuvarlanmış (açık olan + 0,05) / (koyu olan + 0,05) değeridir; iki alanı yer değiştirmenin sayıyı hiç değiştirmemesinin nedeni de budur. Saf siyaha karşı saf beyaz en yüksek değeri, 21:1'i verir.
Metin rengim yarı saydam. Oran yine de doğru mu?
Hayır. Gözün gördüğü şey üzerinden ölçülür: arka plan beyaz bir sayfanın üzerine düzleştirilir, renginiz de onun üzerine düzleştirilir ve oran bu iki opak renkten gelir. Sonuç, düzleştirilmiş iki değeri de adıyla verir ve ham kanalların vereceği rakamı da yazar; böylece alfanın yanıtı ne kadar değiştirdiğini görebilirsiniz.
OKLCH sayıları ne anlama gelir ve bir gidiş dönüş neden bir basamağı kaydırır?
L yüzde olarak algılanan açıklık, C kroma ve H 0 ile 360 derece arasındaki ton değeridir; griye yakın bir renkte kroma çöker ve ton 0 olarak bildirilir, çünkü geriye anlamlı bir yön kalmaz. OKLCH açıklığındaki eşit adımlar, HSL açıklığındaki eşit adımlardan çok daha düzgün görünür; CSS Color 4'ün onu eklemesinin nedeni budur. RGB ve HSL satırları tam sayıya, OKLCH ise yüzdenin onda birine yuvarlanır; bu yüzden bir değeri başka bir araçta geri çevirmek son basamakta farklı çıkabilir.
Geçer bir oran, tasarımın erişilebilir olduğu anlamına mı geliyor?
Yalnızca tek bir metin-arka plan çiftinin o WCAG 2.1 eşiğini karşıladığı anlamına gelir, fazlası değil. Bir fotoğrafın ya da gradyanın üzerindeki metnin oranı her pikselde farklıdır, odak göstergeleri ve anlam taşıyan simgeler 1.4.11'in ayrı 3:1 koşuluna girer ve bir oran; yazı tipi boyutu, satır uzunluğu ya da anlamı taşıyan tek şeyin renk olup olmadığı hakkında bir şey söylemez. Arayüzde gerçekten görünen çiftleri, üzerine gelme, ziyaret edilmiş ve devre dışı durumları dâhil kontrol edin.