Convertidor de colors

Tria un color o escriu-lo en qualsevol format (HEX, RGB, HSL, OKLCH, un nom com «tomato»…) i obtén a l'instant el seu valor en tots els altres, a punt per copiar al teu CSS. Ajusta la transparència i comprova si es llegeix bé sobre blanc i sobre negre.

Formats de color

HEX (#RRGGBB) és el format més habitual al web: tres parells de xifres hexadecimals amb la quantitat de vermell, verd i blau, de 00 a FF. RGB expressa el mateix en decimal, de 0 a 255. HSL descriu el color pel to (0-360°), la saturació i la lluminositat en percentatge, cosa que facilita crear variants més clares o més fosques d'un mateix color.

CMYK (cian, magenta, groc i negre) és el model de la impremta. La conversió des de RGB és aproximada: per imprimir amb precisió cal fer servir el perfil de color de la impremta.

Transparència, HWB i OKLCH

La transparència s'indica amb un quart valor, el canal alfa: #FF880080 (HEX de 8 xifres), rgba(255, 136, 0, 0.5) o, amb la sintaxi moderna, rgb(255 136 0 / 50%). 0 és totalment transparent i 1 (o 100%) totalment opac.

HWB (to, blanc i negre) i OKLCH (lluminositat, croma i to) són formats de CSS Color 4 que ja admeten tots els navegadors actuals. OKLCH és perceptualment uniforme: dos colors amb la mateixa lluminositat es veuen igual de clars, i per això és ideal per crear paletes i variants. HSV/HSB no existeix en CSS, però és el que fan servir Photoshop, Figma i altres programes de disseny.

El CSS també defineix 148 noms de color (tomato, rebeccapurple, steelblue…). Si el teu color no té nom, et mostrem el nom CSS més semblant.

Contrast i accessibilitat

Les pautes d'accessibilitat WCAG exigeixen un contrast mínim entre el text i el fons perquè el puguin llegir persones amb baixa visió: 4,5:1 per al text normal en el nivell AA i 7:1 en el nivell AAA (3:1 i 4,5:1 per als textos grans). El contrast va d'1:1 (el mateix color) a 21:1 (negre sobre blanc).