Formatos compatibles y cuándo usar cada uno
El conversor acepta texto libre: HEX de 3 o 6 dígitos (con o sin #), rgb(), hsl(), hsv() o hsb() y cmyk(). Si prefieres elegir de forma visual, usa el selector de color nativo del navegador. En cuanto se reconoce el color, todos los formatos aparecen juntos, cada uno con su botón de copiar. La tabla usa #FF5733 como ejemplo.
| Formato | Ejemplo | Cuándo usarlo |
|---|---|---|
| HEX | #FF5733 | CSS, HTML, Figma y manuales de marca. Compacto y universal en la web. |
| RGB | rgb(255, 87, 51) | Código que manipula canales (JavaScript, canvas) y transparencia con rgb(255 87 51 / 50%). |
| HSL | hsl(11, 100%, 60%) | Crear variaciones a mano: cambia solo la luminosidad para aclarar u oscurecer. |
| HSV / HSB | hsv(11, 80%, 100%) | Selectores de color de programas como Photoshop, Illustrator y Figma. |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Punto de partida para impresión, siempre confirmado con la imprenta. |
| CIE LAB | ≈ lab(61% 64 56) | Medir diferencias entre colores y trabajar con gestión del color. |
| OKLCH | ≈ oklch(68% 0.21 33.7) | CSS moderno, escalas de color y sistemas de diseño. |
Los valores de LAB y OKLCH pueden variar en los decimales según el redondeo y el punto blanco de referencia. Además de los formatos, la herramienta genera una variable CSS lista para pegar en tu :root.
Cómo convertir HEX a RGB (y al revés) a mano
Un código HEX no es más que RGB escrito en base 16. Los seis dígitos forman tres pares: rojo, verde y azul. Cada dígito va de 0 a F (donde A=10, B=11, C=12, D=13, E=14 y F=15), y cada par se convierte multiplicando el primer dígito por 16 y sumando el segundo:
FF→ 15 × 16 + 15 = 25557→ 5 × 16 + 7 = 8733→ 3 × 16 + 3 = 51
Resultado: #FF5733 = rgb(255, 87, 51). En la forma abreviada de 3 dígitos, cada dígito se duplica: #F53 equivale a #FF5533.
El camino inverso es dividir entre 16: 87 ÷ 16 = 5, con resto 7, así que 87 se convierte en 57. Repite con los tres canales y une los pares.
Cómo convertir RGB a HSL, con un ejemplo
La conversión a HSL reorganiza los mismos datos en tono (la posición en el círculo cromático), saturación y luminosidad. Sigamos con rgb(255, 87, 51):
- Normaliza los canales dividiéndolos entre 255: R = 1, G ≈ 0,341, B = 0,2.
- Busca el máximo y el mínimo: máx = 1, mín = 0,2. La diferencia (Δ) es 0,8.
- Luminosidad: L = (máx + mín) ÷ 2 = 1,2 ÷ 2 = 0,6, es decir, 60 %.
- Saturación: S = Δ ÷ (1 − |2L − 1|) = 0,8 ÷ (1 − 0,2) = 1, es decir, 100 %.
- Tono: como el máximo es el rojo, H = 60 × ((G − B) ÷ Δ) = 60 × (0,141 ÷ 0,8) ≈ 10,6°, redondeado a 11°. Si el máximo fuera el verde, la fórmula sería 60 × ((B − R) ÷ Δ + 2); si fuera el azul, 60 × ((R − G) ÷ Δ + 4).
Resultado: hsl(11, 100%, 60%). HSV usa el mismo tono, pero define V = máx (100 %) y S = Δ ÷ máx (80 %), por lo que queda hsv(11, 80%, 100%). La guía de códigos de color explica en qué se diferencian los modelos.
RGB a CMYK y los límites de la impresión
La fórmula sencilla que usan los conversores en línea parte de los canales normalizados:
K = 1 − máx(R, G, B)
C = (1 − R − K) ÷ (1 − K)
M = (1 − G − K) ÷ (1 − K)
Y = (1 − B − K) ÷ (1 − K)En nuestro ejemplo, K = 0, C = 0, M ≈ 0,66 e Y = 0,8, es decir, cmyk(0%, 66%, 80%, 0%).
El cálculo es exacto, pero no predice cómo se verá el color en papel. RGB es un modelo aditivo basado en luz, mientras que CMYK es sustractivo y se basa en tinta. Muchos colores de pantalla, sobre todo los verdes y azules muy saturados y los naranjas flúor, quedan fuera de la gama de impresión y salen más apagados. El resultado real depende del perfil ICC de la imprenta (por ejemplo, FOGRA o GRACoL), del tipo de papel y de la tinta. Usa el valor del conversor como punto de partida y pide una prueba de color. La guía RGB vs. CMYK profundiza en el tema.
LAB y OKLCH: colores pensados para el ojo humano
HEX, RGB y HSL describen cómo la pantalla produce el color, no cómo lo percibimos. Un ejemplo lo deja claro: amarillo #FFFF00 y azul #0000FF tienen ambos un 50 % de luminosidad en HSL, pero el amarillo parece mucho más claro. En OKLCH, la luminosidad del amarillo es de alrededor del 97 % y la del azul, de alrededor del 45 %, lo que coincide con lo que ve el ojo.
CIE LAB se diseñó para ser perceptualmente uniforme: distancias iguales entre valores deberían corresponder a diferencias visuales parecidas. Es la base de medidas como el Delta E, usado en control de calidad del color. OKLCH es una versión más reciente y precisa de la misma idea, expresada en luminosidad, croma y tono. Los navegadores actuales lo admiten y permite crear escalas con pasos visualmente regulares:
:root { --brand: oklch(68% 0.21 33.7); }
.boton:hover { background: oklch(60% 0.19 33.7); }Para saber más sobre oklch(), color-mix() y los nuevos espacios de color, consulta la guía de colores en CSS moderno y la referencia de MDN.
Nombre del color, color de texto y enlace para compartir
Además de las conversiones, el conversor muestra el nombre del color con nombre más cercano, algo útil para describir un color en una conversación o encontrarlo en el catálogo de colores. También indica si el texto sobre ese color se lee mejor en negro o en blanco, calculado a partir de la luminancia. Para comprobar otras combinaciones, usa el verificador de contraste.
La URL de la página se actualiza con el parámetro ?c= seguido del HEX, por ejemplo ?c=FF5733. Copia la dirección para enviarle el color exacto a un compañero o guardarlo en tus marcadores.