Conversor de colores

Elige un color o escríbelo en cualquier formato (HEX, RGB, HSL, OKLCH, un nombre como «tomato»…) y obtén al instante su valor en los demás, listo para copiar en tu CSS. Ajusta la transparencia y comprueba si se lee bien sobre blanco y sobre negro.

Formatos de color

HEX (#RRGGBB) es el formato más habitual en la web: tres pares de cifras hexadecimales con la cantidad de rojo, verde y azul, de 00 a FF. RGB expresa lo mismo en decimal, de 0 a 255. HSL describe el color por su tono (0-360°), su saturación y su luminosidad en porcentaje, lo que facilita crear variantes más claras u oscuras de un mismo color.

CMYK (cian, magenta, amarillo y negro) es el modelo de la imprenta. La conversión desde RGB es aproximada: para imprimir con precisión hay que usar el perfil de color de la imprenta.

Transparencia, HWB y OKLCH

La transparencia se indica con un cuarto valor, el canal alfa: #FF880080 (HEX de 8 cifras), rgba(255, 136, 0, 0.5) o, con la sintaxis moderna, rgb(255 136 0 / 50%). 0 es totalmente transparente y 1 (o 100%) totalmente opaco.

HWB (tono, blanco y negro) y OKLCH (luminosidad, croma y tono) son formatos de CSS Color 4 que ya admiten todos los navegadores actuales. OKLCH es perceptualmente uniforme: dos colores con la misma luminosidad se ven igual de claros, lo que lo hace ideal para crear paletas y variantes. HSV/HSB no existe en CSS, pero es el que usan Photoshop, Figma y otros programas de diseño.

CSS define además 148 nombres de color (tomato, rebeccapurple, steelblue…). Si tu color no tiene nombre, te mostramos el nombre CSS más parecido.

Contraste y accesibilidad

Las pautas de accesibilidad WCAG exigen un contraste mínimo entre el texto y el fondo para que lo puedan leer personas con baja visión: 4,5:1 para el texto normal en el nivel AA y 7:1 en el nivel AAA (3:1 y 4,5:1 para textos grandes). El contraste va de 1:1 (mismo color) a 21:1 (negro sobre blanco).