Conversor de colores HEX, RGB, HSL, CMYK y OKLCH
Escribe o pega un color en cualquier formato (HEX, RGB, HSL, HSV, CMYK u OKLCH) y obtén al momento su equivalencia en todos los demás, lista para copiar en tu CSS, en Figma o en un documento de impresión.
| Formato | Valor | Acción |
|---|
Cómo usar el conversor
- Pega el color tal como lo tengas: con o sin almohadilla (
1e90ff), con comas o con la sintaxis moderna de CSS separada por espacios (rgb(30 144 255 / 50%)). - Si no tienes el código, usa el selector de color del navegador o prueba el selector de color avanzado, que incluye cuentagotas de pantalla.
- Copia el formato que necesites con su botón. Si el color tiene transparencia, HEX se muestra con 8 dígitos (el último par es el canal alfa) y RGB/HSL en su versión con alfa.
El último color que escribiste se guarda en tu navegador para que lo encuentres al volver. Nada se envía a ningún servidor.
Cómo se convierte entre formatos
HEX ↔ RGB
Un código HEX son tres números de 0 a 255 escritos en base 16. Cada par de dígitos es un canal: rojo, verde y azul. Para pasar de HEX a RGB se convierte cada par a decimal; para el camino inverso, cada número a hexadecimal de dos cifras. Si necesitas practicar el cambio de base, el conversor de bases numéricas muestra el proceso paso a paso.
1E → 1×16 + 14 = 30 · 90 → 9×16 + 0 = 144 · FF → 15×16 + 15 = 255
RGB → HSL
Con los canales normalizados a 0–1, se calculan el máximo (M), el mínimo (m) y su diferencia d = M − m:
L = (M + m) ÷ 2 · S = d ÷ (1 − |2L − 1|) · H = 60° × posición del canal dominante
El tono (H) es un ángulo de 0 a 360°: 0° rojo, 120° verde y 240° azul. HSV usa el mismo tono, pero V = M y S = d ÷ M.
RGB → CMYK
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)
Es una conversión ingenua, sin perfil de color: sirve como referencia, no como prueba de imprenta. Los colores RGB muy saturados (verdes y azules eléctricos) no se pueden reproducir con tintas y en papel saldrán más apagados.
RGB → OKLCH
Primero se linealiza cada canal sRGB (se deshace la corrección gamma), luego se pasa al espacio OKLab de Björn Ottosson mediante dos matrices y una raíz cúbica, y por último se expresa en coordenadas polares: luminosidad L (0–100 %), croma C (0 a ~0,37) y tono h (grados). Algunos colores OKLCH no existen en sRGB; en ese caso la herramienta avisa y muestra el más cercano.
Ejemplos de equivalencias
| Color | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Rojo puro | #FF0000 | 255, 0, 0 | 0°, 100 %, 50 % | 0, 100, 100, 0 |
| Azul Dodger | #1E90FF | 30, 144, 255 | 210°, 100 %, 56 % | 88, 44, 0, 0 |
| Verde azulado | #008080 | 0, 128, 128 | 180°, 100 %, 25 % | 100, 0, 0, 50 |
| Naranja | #FFA500 | 255, 165, 0 | 39°, 100 %, 50 % | 0, 35, 100, 0 |
| Gris medio | #808080 | 128, 128, 128 | 0°, 0 %, 50 % | 0, 0, 0, 50 |
| Blanco | #FFFFFF | 255, 255, 255 | 0°, 0 %, 100 % | 0, 0, 0, 0 |
Muchos de estos colores tienen nombre propio en CSS (dodgerblue, teal, orange): consulta la lista completa de nombres de colores HTML.
Qué formato usar en cada caso
- HEX: el más compacto y compatible; ideal para guías de estilo y para compartir colores.
- RGB: útil cuando necesitas transparencia en navegadores antiguos o cuando trabajas con canvas y píxeles.
- HSL: cómodo para crear variaciones a mano (subir o bajar la luminosidad), aunque la claridad percibida no es uniforme entre tonos: un amarillo y un azul con L = 50 % no parecen igual de claros.
- OKLCH: la mejor opción actual para generar escalas y paletas de colores coherentes, y para mantener un contraste predecible al cambiar de tono.
- CMYK: solo para material impreso, y siempre revisado con el perfil de la imprenta.
Error frecuente: confundir el orden de los canales. En HEX y RGB el orden es siempre rojo, verde, azul; algunos lenguajes y formatos de imagen almacenan BGR, lo que intercambia rojos y azules.
Preguntas frecuentes
¿Cómo convierto un color HEX a RGB?
Separa el código en tres pares de dígitos hexadecimales y pasa cada uno a decimal. En #1E90FF: 1E = 30, 90 = 144 y FF = 255, es decir, rgb(30, 144, 255).
¿Por qué el CMYK que obtengo no coincide con el de mi imprenta?
La conversión directa desde RGB es matemática y no tiene en cuenta el papel ni las tintas. Para impresión profesional hay que usar el perfil ICC que indique la imprenta (por ejemplo, FOGRA39 en Europa o GRACoL en América).
¿Qué diferencia hay entre HSL y HSV?
Ambos usan tono y saturación, pero HSL mide la luminosidad (50 % es el color puro y 100 % es blanco) y HSV mide el valor o brillo (100 % es el color puro). Por eso el mismo color tiene saturaciones distintas en cada modelo.
¿Qué es OKLCH y por qué se usa en CSS?
Es un espacio de color perceptual: cambiar la luminosidad L afecta a la claridad percibida de forma uniforme, sin desplazar el tono. Los navegadores modernos lo admiten con la función oklch() y facilita crear escalas y paletas coherentes.
¿Se pierde precisión al convertir?
RGB de 8 bits solo tiene 256 valores por canal, así que al convertir HSL u OKLCH a HEX el resultado se redondea al entero más cercano. Una ida y vuelta puede variar 1 unidad en algún canal.