Conversor de cores

Escolle unha cor ou escríbea en calquera formato (HEX, RGB, HSL, OKLCH, un nome como «tomato»…) e obtén ao momento o seu valor en todos os demais, listo para copiar no teu CSS. Axusta a transparencia e comproba se se le ben sobre branco e sobre negro.

Formatos de cor

HEX (#RRGGBB) é o formato máis habitual na web: tres pares de cifras hexadecimais coa cantidade de vermello, verde e azul, de 00 a FF. RGB expresa o mesmo en decimal, de 0 a 255. HSL describe a cor polo seu ton (0-360°), a súa saturación e a súa luminosidade en porcentaxe, o que facilita crear variantes máis claras ou escuras dunha mesma cor.

CMYK (cian, maxenta, amarelo e negro) é o modelo da imprenta. A conversión desde RGB é aproximada: para imprimir con precisión cómpre usar o perfil de cor da imprenta.

Transparencia, HWB e OKLCH

A transparencia indícase cun cuarto valor, a canle alfa: #FF880080 (HEX de 8 cifras), rgba(255, 136, 0, 0.5) ou, coa sintaxe moderna, rgb(255 136 0 / 50%). 0 é totalmente transparente e 1 (ou 100%) totalmente opaco.

HWB (ton, branco e negro) e OKLCH (luminosidade, croma e ton) son formatos de CSS Color 4 que xa admiten todos os navegadores actuais. OKLCH é perceptualmente uniforme: dúas cores coa mesma luminosidade vense igual de claras, o que o fai ideal para crear paletas e variantes. HSV/HSB non existe en CSS, pero é o que usan Photoshop, Figma e outros programas de deseño.

O CSS define ademais 148 nomes de cor (tomato, rebeccapurple, steelblue…). Se a túa cor non ten nome, amosámosche o nome CSS máis parecido.

Contraste e accesibilidade

As pautas de accesibilidade WCAG esixen un contraste mínimo entre o texto e o fondo para que o poidan ler as persoas con baixa visión: 4,5:1 para o texto normal no nivel AA e 7:1 no nivel AAA (3:1 e 4,5:1 para os textos grandes). O contraste vai de 1:1 (a mesma cor) a 21:1 (negro sobre branco).