Cómo convertir un color
- Elige un color o escríbelo en HEX (#0071e3), RGB, HSL o CMYK.
- Aparecen todos los formatos a la vez. Pulsa Copiar junto al que necesites.
- Más abajo tienes paletas, versiones más claras y oscuras y un comprobador de contraste para texto.
Cómo funciona
Todos los formatos se calculan a partir del mismo valor RGB, así que siempre coinciden. HSL y HSV describen un color por tono, saturación y luminosidad o brillo, lo que facilita crear armonías: los complementarios están a 180° en el círculo cromático y los de tríada, a 120°. Los tintes y sombras mantienen tono y saturación y solo cambian la luminosidad.
El comprobador usa la fórmula de luminancia relativa de WCAG 2, la misma de las auditorías de accesibilidad.
Un ejemplo resuelto
Nuestro azul #0071e3 es rgb(0, 113, 227), hsl(210, 100%, 44,5%) y aproximadamente cmyk(100%, 50%, 0%, 11%). Sobre blanco alcanza un contraste de 4,70:1, justo por encima del 4,5:1 que pide WCAG AA para texto normal.
El gris clásico #767676 sobre blanco da 4,54:1 y aprueba; uno un paso más claro, #777777, da 4,48:1 y suspende. Por eso los diseñadores comprueban en vez de adivinar. El naranja vivo #ff9f0a sobre blanco se queda en 2,06:1: vale para un icono grande, no para texto.
Cuándo usarlo
Para pasar un color de una guía de marca a valores CSS, Android o de imprenta. Para montar una paleta para diapositivas, una web o un logo. Para comprobar que el texto de un botón se lee bien antes de publicar. Para encontrar un tono más oscuro para el estado hover.
Para poner colores en un código QR, usa Generador de códigos QR. Para texto sobre una imagen, Generador de memes tiene sus propias opciones de color.
Límites
- Los valores CMYK son una conversión matemática simple, no un perfil de impresión. Para imprenta profesional, pide el perfil a tu imprenta.
- Los colores son sRGB. Los de gama amplia (Display P3) se recortan a sRGB.
- El contraste se calcula sobre un fondo liso; el texto sobre fotos requiere otra comprobación.
Preguntas frecuentes
¿Cómo paso de HEX a RGB?
Divide los seis dígitos en tres pares y lee cada uno en hexadecimal: #0071e3 → 00, 71, e3 → 0, 113, 227. La herramienta lo hace al escribir.
¿Qué contraste necesito?
WCAG AA pide al menos 4,5:1 para texto normal y 3:1 para texto grande (unos 24 px, o 19 px en negrita). AAA pide 7:1.
¿El valor CMYK sirve para imprimir?
Es un buen punto de partida, pero el color impreso depende del papel y las tintas. Para colores de marca, pide una prueba a la imprenta.
¿Qué formato uso en CSS?
Cualquiera funciona. HEX es el más común; hsl() va bien si quieres ajustar la luminosidad a mano.