Diseño y desarrollo

Conversor de colores

Convierte códigos de color entre HEX, RGB, HSL, HSV y CMYK. Ajusta cualquier canal y los demás formatos se actualizan al instante; lo que escribes se queda en tu navegador

Funciona en tu navegador: lo que ingresas se queda en tu dispositivo

Controles de color

Selector visual

Hexadecimal (HEX)

Canales RGB (0–255)

HSL (matiz, saturación, luminosidad)

Siempre sincronizado: cambia cualquier control, el código HEX o el selector y todos los demás formatos se actualizan al instante.

Text on Color (White) Text on Color (Black)

HEX #059669

RGB (CSS) rgb(5, 150, 105)

HSL (CSS) hsl(161, 94%, 30%)

HSV / HSB hsv(161, 97%, 59%)

CMYK cmyk(97%, 0%, 30%, 41%)

Luminancia relativa (WCAG 2.1): 0,2286

Compartir esta herramienta

Cómo usar esta herramienta

Elige un color con el selector visual, escribe un código HEX o mueve los controles RGB y HSL; todos los formatos se actualizan a la vez.
Usa «Color aleatorio» para explorar ideas.
Lee los valores HEX, RGB, HSL, HSV y CMYK, además de la luminancia relativa y el contraste con texto blanco y negro.
Presiona Copiar junto al formato que necesites para pegarlo en CSS, software de diseño o código.

Ejemplo práctico

El verde esmeralda #059669 equivale a rgb(5, 150, 105), hsl(161, 94 %, 30 %), hsv(161, 97 %, 59 %) y cmyk(97 %, 0 %, 30 %, 41 %), con una luminancia relativa de 0,2286. El texto blanco encima tiene un contraste de 3,77:1 y el negro, de 5,57:1. Las WCAG piden al menos 4,5:1 para texto normal y 3:1 para texto grande, así que el blanco sobre este verde solo sirve para títulos grandes, mientras que el negro cumple en todos los casos. Los valores CMYK salen de una fórmula simple sin perfil ICC, por lo que no coincidirán con una prueba de imprenta.

Metodología

Cada formato se calcula a partir de una tripleta sRGB de 8 bits. El sRGB está definido en la norma IEC 61966-2-1; las notaciones HEX, RGB y HSL son las de la especificación W3C CSS Color; la luminancia relativa sigue las WCAG 2.1. Todos los valores se redondean a enteros, por lo que ir y volver puede mover un valor en 1.

RGB, HEX y HSL: El HEX escribe los tres canales en base 16: rgb(255, 128, 0) es #FF8000. Para HSL los canales se escalan de 0 a 1, luego L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), y el matiz es el ángulo del canal dominante en un círculo de 360 grados. El mismo color da hsl(30, 100%, 50%). El HSV comparte el matiz pero usa V = max y S = (max − min) / max. Las formas cortas como #F80 se expanden a #FF8800, y un HEX de 8 dígitos se acepta pero se ignora su par alfa.

CMYK y luminancia: El CMYK usa la fórmula simple e independiente del dispositivo K = 1 − max(R, G, B), con C, M y Y escalados por el resto; #FF8000 da cmyk(0%, 50%, 100%, 0%). No interviene ningún perfil ICC, tinta ni papel, así que no coincidirá con una prueba de imprenta. La luminancia relativa linealiza cada canal (v / 12,92 por debajo de 0,03928, y si no ((v + 0,055) / 1,055)^2,4) y los pondera con 0,2126, 0,7152 y 0,0722. Para #FF8000 resulta 0,3670, es decir, un contraste de 2,52:1 con blanco y 8,34:1 con negro. Un gris medio como #808080 tiene luminancia 0,2159, no 0,5.

Siete colores clásicos y su contraste con blanco y negro

Siete colores conocidos, convertidos con las fórmulas de esta herramienta. La última columna muestra la relación de contraste del texto blanco y del texto negro sobre cada color.

Color	HSL	CMYK (%)	Contraste blanco / negro
#FF0000 Rojo	0, 100%, 50%	0, 100, 100, 0	4,00:1 / 5,25:1
#0000FF Azul	240, 100%, 50%	100, 100, 0, 0	8,59:1 / 2,44:1
#FFFF00 Amarillo	60, 100%, 50%	0, 0, 100, 0	1,07:1 / 19,56:1
#808080 Gris medio	0, 0%, 50%	0, 0, 0, 50	3,95:1 / 5,32:1
#008080 Verde azulado	180, 100%, 25%	100, 0, 0, 50	4,77:1 / 4,40:1
#800080 Morado	300, 100%, 25%	0, 100, 0, 50	9,42:1 / 2,23:1
#000080 Azul marino	240, 100%, 25%	100, 100, 0, 50	16,01:1 / 1,31:1

Cómo leerla: WCAG 2.1 pide 4,5:1 para texto normal en el nivel AA. El amarillo es el caso extremo, con 1,07:1 para texto blanco pero 19,56:1 para negro. El gris medio #808080 sorprende a mucha gente: está justo en la mitad del rango 0–255, pero ni el blanco (3,95:1) ni el negro (5,32:1) quedan equilibrados, porque el brillo percibido no es lineal. El verde azulado y el gris medio son casos límite, así que revisa siempre la combinación exacta que vas a usar.

Límites: los valores se redondean a enteros y el CMYK sale de una fórmula simple sin perfil ICC, por lo que no coincidirá con una prueba impresa.

Herramientas relacionadas

Verificador de contraste de colores WCAG Conversor de codificación (Base64, URL, hex, binario, texto)Creador de enlaces para bio Zona segura para video vertical (TikTok, Reels, Shorts)

Preguntas frecuentes

¿Cuál es la diferencia entre RGB y HSL en CSS? ▼

Ambos describen los mismos colores sRGB. RGB mezcla luz roja, verde y azul, que es como funcionan las pantallas. HSL describe un color por su matiz (un ángulo en el círculo cromático), saturación y luminosidad, así que aclarar o desaturar un color es cambiar un solo número. Ejemplo: hsl(30, 100%, 50%) y rgb(255, 128, 0) son el mismo naranja, pero una versión más oscura es simplemente hsl(30, 100%, 35%).

¿Se puede convertir CMYK a RGB con exactitud? ▼

No. RGB es luz aditiva en pantalla, CMYK es tinta sustractiva sobre papel, y el rango imprimible depende de las tintas, el papel y la imprenta. El CMYK que se muestra aquí sale de una fórmula matemática simple sin perfil de color; úsalo como punto de partida y confirma los colores con el perfil ICC de tu imprenta o con una prueba.

¿Cómo se calcula la luminancia relativa y para qué sirve? ▼

Cada canal sRGB se linealiza (se quita la curva gamma) y se combina como L = 0,2126 R + 0,7152 G + 0,0722 B, la fórmula de las WCAG 2.1. Los pesos reflejan que el ojo es más sensible al verde. La relación de contraste es entonces (L1 + 0,05) / (L2 + 0,05), con L1 el color más claro. Las WCAG piden en el nivel AA 4,5:1 para texto normal y 3:1 para texto grande.

¿Por qué mi valor cambió en 1 al convertir de vuelta? ▼

HSL, HSV y CMYK se muestran como números enteros, y varios colores RGB dan el mismo HSL redondeado. Si editas los campos HSL, la herramienta conserva tus valores HSL y deriva el RGB; si luego editas el RGB, el HSL se recalcula y puede diferir un poco. El matiz no está definido para los grises y se muestra como 0. Para valores exactos conserva el código HEX o RGB como fuente.