Renk Dönüştürücü
Herhangi bir rengi HEX, RGB, HSL ve HSV arasında dönüştürün. Seçiciyi kullanın veya herhangi bir alana yazın — diğer alanlar canlı güncellenir. Erişilebilir çiftler için WCAG kontrast denetleyici dahil.
Tasarım sistemi renklerini aktarmak, erişilebilir metin/arka plan çiftlerini seçmek ve araçlar arasında renk değerlerini hizalamak için kullanışlı.
WCAG kontrast denetleyicisi
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
WCAG eşikleri
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
Oran, WCAG 2.1'e göre göreli parlaklıktan, doğrusallaştırılmış sRGB kanalları ve 0.2126·R + 0.7152·G + 0.0722·B ağırlıkları kullanılarak hesaplanır.
Biçimlendir notları
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
SSS
Neden HSL ve HSV Photoshop / Figma değerlerimle tam olarak eşleşmiyor?
Yuvarlama. Hue, saturation ve lightness süreklidir; araçlar bunları farklı şekilde yuvarlar. 1° hue veya 1% saturation farkı beklenen bir durumdur ve görsel olarak aynıdır.
Kontrast denetleyicisi alfa (saydamlık) hesaba katıyor mu?
Hayır. WCAG oranları tamamen opak renkleri varsayar. Ön planınız yarı saydamsa, önce arka planla karıştırın ve ortaya çıkan opak rengi kontrol edin.
Peki ya yeni kontrast algoritması APCA?
APCA, WCAG 3.0'da (hâlâ taslak) WCAG 2.x oranının yerini alma adayıdır. Bugünün üretim çalışmaları için denetçilerin ve Lighthouse'un kontrol ettiği şey WCAG 2.1 oranıdır.
Sunucuya bir şey gönderiliyor mu?
Hayır. Tüm dönüştürme ve kontrast matematiği tarayıcınızda çalışır.