Convertor de culori
Convertiți culori HEX, RGB, HSL și OKLCH și verificați contrastul WCAG.
Contrast 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) |
Nuanțe închise și deschise
Aceeași nuanță și saturație, cu luminozitatea mutată în sus către alb și în jos către negru, astfel încât o scară rămâne o singură culoare. Contrastul este măsurat față de fundalul de mai sus.
| Mostră | Luminozitate | HEX | Contrast | Copiază |
|---|---|---|---|---|
| 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% - culoarea dumneavoastră | #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 |
Daltonism
O aproximare, nu un diagnostic: ambele culori sunt trecute prin matricele Machado, Oliveira și Fernandes (2009) la severitate maximă. Arată cât de mult se deplasează o pereche pentru un privitor dicromat, nu ceea ce vede o anumită persoană.
Instrumente înrudite
- Formatator de codFormatați și minificați XML, HTML și CSS și minificați JavaScript, direct în browser.
- Codor / DecodorCodificați și decodați Base64, URL-uri și entități HTML și convertiți baze numerice.
- Generatoare de înregistrăriCreați înregistrări SPF, DMARC, BIMI, MTA-STS și TLS-RPT, metaetichete și robots.txt cu verificări în timp real pe măsură ce scrieți.
Despre acest instrument
Convertor de culori analizează o culoare scrisă ca HEX cu 3, 4, 6 sau 8 cifre, ca rgb() sau rgba(), ori ca hsl() sau hsla() - separate prin virgulă sau prin spațiu, cu procente și o valoare alfa permise - și o afișează înapoi ca HEX, RGB, HSL și OKLCH. OKLCH este calculat prin sRGB liniar și OKLab, iar o valoare oklch() sau o culoare CSS cu nume, precum „rebeccapurple”, este acceptată și ea ca intrare; lab(), lch() și color() nu sunt. Al doilea câmp este fundalul, iar instrumentul raportează raportul de contrast WCAG 2.1 dintre cele două culori, rotunjit la două zecimale, față de pragurile 4,5, 3 și 7. O culoare translucidă este aplatizată peste fundal (și fundalul peste o pagină albă) înainte ca raportul să fie măsurat, iar cifra brută este afișată alături. Când perechea nu trece de AA, pagina sugerează cea mai apropiată culoare care atinge 4.5:1 - aceeași nuanță și saturație, cu luminozitatea deplasată cât mai puțin - și oferă o scară de umbre și de nuanțe deschise construită la fel. Blocul de previzualizare este afișat și așa cum îl redau matricele Machado, Oliveira și Fernandes (2009) pentru deuteranopie, protanopie și tritanopie, ceea ce este o aproximare a unui singur model dicromat, nu ceea ce vede o anumită persoană.
Analiza, conversiile HEX, RGB, HSL, HSV, CMYK și OKLCH, compunerea alfa, calculul contrastului, scara de nuanțe mai închise și mai deschise, sugestia de culoare accesibilă și simularea daltonismului sunt simplă aritmetică în pagină - fără Web Crypto, fără vreo cerere către API-ul XGM și nu se stochează nimic despre culori. Selectorul de culoare și prelevarea de pe ecran sunt controalele proprii ale browserului și nu citesc nimic în afară de culoarea pe care o alegeți. Cele două culori sunt păstrate în URL ca parametrii fg și bg, în mod intenționat, pentru ca un link pe care îl copiați să redeschidă aceeași pereche și un coleg să o poată vedea; o culoare nu este o intrare sensibilă și nimic altceva despre sesiunea dumneavoastră nu ajunge în link. Exporturile JSON și Markdown ale tabelului de formate sunt generate și descărcate local.
Cum se folosește
- Deschideți instrumentul Convertor de culori.
- Lipiți sau tastați datele pe care vreți să le inspectați.
- Citiți rezultatul, calculat în browser; datele nu sunt trimise către XGM.
- Copiați rezultatul doar după ce ați verificat că arată corect.
- Folosiți instrumentele XGM înrudite dacă aveți nevoie de o imagine de diagnostic mai largă.
Întrebări frecvente
Ce praguri de contrast verifică?
Cele patru din WCAG 2.1: criteriul de succes 1.4.3 cere 4.5:1 pentru text normal și 3:1 pentru text mare la nivelul AA, iar 1.4.6 le ridică la 7:1 și 4.5:1 la nivelul AAA. Text mare înseamnă acolo cel puțin 18pt (aproximativ 24px) sau 14pt (aproximativ 18.66px) când este îngroșat. Linia de rezultat marchează fiecare dintre cele patru ca trecut sau picat, ca să puteți vedea ce nivel atinge o pereche.
Cum este calculat raportul?
Fiecare canal sRGB este împărțit la 255 și liniarizat - c/12.92 sub 0.04045, altfel ((c+0.055)/1.055) la puterea 2.4 - apoi ponderat cu 0.2126 roșu, 0.7152 verde și 0.0722 albastru, pentru a da luminanța relativă. Raportul este (mai deschis + 0.05) / (mai închis + 0.05), rotunjit la două zecimale, motiv pentru care inversarea celor două câmpuri nu schimbă niciodată numărul. Negru pur față de alb pur dă maximul, 21:1.
Culoarea mea de text este semitransparentă. Raportul mai este corect?
Nu. Se măsoară pe ceea ce vede ochiul: fundalul este aplatizat peste o pagină albă, culoarea dumneavoastră este aplatizată peste el, iar raportul rezultă din acele două culori opace. Rezultatul numește ambele valori aplatizate și afișează cifra pe care ar fi dat-o canalele brute, ca să vedeți cât de mult a schimbat alfa răspunsul.
Ce înseamnă numerele OKLCH și de ce o conversie dus-întors schimbă o cifră?
L este luminozitatea percepută, exprimată procentual, C este croma, iar H este nuanța în grade, de la 0 la 360; pentru o culoare aproape gri croma se prăbușește, iar nuanța este raportată ca 0, pentru că nu mai rămâne nicio direcție cu sens. Pașii egali în luminozitate OKLCH arată mult mai uniform decât pașii egali în luminozitate HSL, motiv pentru care CSS Color 4 a adăugat-o. Rândurile RGB și HSL sunt rotunjite la numere întregi, iar OKLCH la o zecime de procent, așa că reconvertirea unei valori în alt instrument poate diferi la ultima cifră.
Un raport care trece înseamnă că designul este accesibil?
Înseamnă că o singură pereche text-fundal atinge acel prag WCAG 2.1, nimic mai mult. Textul așezat peste o fotografie sau un gradient are un raport diferit la fiecare pixel, indicatorii de focus și pictogramele purtătoare de sens intră sub cerința separată de 3:1 din 1.4.11, iar un raport nu spune nimic despre mărimea fontului, lungimea rândului sau despre faptul că doar culoarea poartă sensul. Verificați perechile care apar efectiv în interfață, inclusiv stările hover, vizitat și dezactivat.