Convertidor de códigos de color
Escribe o pega un color en cualquier formato común y míralo convertido a HEX, RGB, HSL, HSV, CMYK, CIE LAB, LCH y OKLCH a la vez. Todos los campos son editables, así que también puedes empezar desde CMYK o LAB, y un modo por lotes convierte listas completas de colores a CSV.
Última actualización:
Detectado: HEX
Convertir por lotes una lista de colores
Cómo usar Convertidor de códigos de color
- Introduce un color en el cuadro superior: un código HEX, rgb(), hsl(), hsv(), cmyk(), lab(), lch(), oklch() o un nombre como tomato. También puedes usar el selector de color.
- Consulta los resultados en las tarjetas de formato. La muestra enseña el color y el formato de entrada detectado.
- Edita cualquier tarjeta para convertir desde ese formato, por ejemplo, escribe porcentajes CMYK en el campo CMYK.
- Ajusta la opacidad con el control deslizante si necesitas un valor RGBA o HEX de 8 dígitos.
- Copia un solo valor o usa Copiar todos los formatos. Para muchos colores, abre Convertir por lotes y descarga el CSV.
Guía rápida de formatos de color
El mismo verde bosque, #2F6B4F, escrito en todos los formatos que admite el convertidor:
| Formato | Ejemplo | Rango de cada valor | Se usa en |
|---|---|---|---|
| HEX | #2F6B4F | 00–FF por canal (la forma de 8 dígitos añade alfa) | HTML, CSS, herramientas de diseño |
| RGB / RGBA | rgb(47, 107, 79) | 0–255, alfa 0–1 | CSS, pantallas, código |
| HSL | hsl(152, 39%, 30.2%) | tono 0–360°, S y L 0–100% | CSS, temas |
| HSV / HSB | hsv(152, 56.1%, 42%) | tono 0–360°, S y V 0–100% | Photoshop, Figma, selectores |
| CMYK | cmyk(56.1%, 0%, 26.2%, 58%) | 0–100% de tinta | Estimaciones de impresión |
| CIE LAB | lab(40.65% -25.91 9.58) | L 0–100, a y b aprox. de −128 a 127 | Ciencia del color, CSS Color 4 |
| CIE LCH | lch(40.65% 27.63 159.71) | L 0–100, C 0–150, tono 0–360° | CSS Color 4 |
| OKLCH | oklch(47.94% 0.078 161.08) | L 0–100%, C aprox. 0–0.4, tono 0–360° | CSS moderno, sistemas de diseño |
Los valores se redondean para mostrarlos; el convertidor mantiene la precisión completa internamente, así que convertir de un formato a otro y viceversa no produce desviaciones.
Cómo funcionan las conversiones
- HEX ↔ RGB es un cambio de base 16 a base 10 para cada par de dígitos.
- RGB → HSL: con R, G, B en 0–1, L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), y el tono depende de qué canal es el mayor.
- RGB → HSV: V = max, S = (max − min) / max, mismo tono que HSL.
- RGB → CMYK: K = 1 − max(R, G, B), luego C = (1 − R − K) / (1 − K) y lo mismo para M e Y.
- RGB → LAB / LCH: se deshace la curva gamma de sRGB, se convierte el RGB lineal a CIE XYZ (D65), se adapta a D50 con la matriz de Bradford y luego se aplica la fórmula CIE Lab. LCH es LAB en forma polar: C = √(a² + b²), h = atan2(b, a).
- RGB → OKLCH: el RGB lineal se convierte al espacio de conos LMS de Ottosson, se le aplica la raíz cúbica y se mezcla en OKLab, y luego se pasa a forma polar como LCH.
Consejos
- El CMYK obtenido de un color de pantalla es una aproximación. Para logotipos y envases, pide una prueba a la imprenta o busca un equivalente Pantone con HEX a Pantone.
- Comprueba que el texto siga siendo legible sobre tu color con el Comprobador de contraste de color; WCAG AA exige 4.5:1 para texto normal.
- Para crear una paleta, mantén el tono y el croma OKLCH y cambia solo la luminosidad, o usa el Generador de tonos de color.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Divide el código HEX de seis dígitos en tres pares y convierte cada par de base 16 a base 10. Para #2F6B4F: 2F = 2 × 16 + 15 = 47, 6B = 6 × 16 + 11 = 107 y 4F = 4 × 16 + 15 = 79, así que el color es rgb(47, 107, 79). El convertidor lo hace al instante con cualquier código, incluidos los HEX de 3 y 8 dígitos.
¿Cómo se convierte RGB a CMYK?
La fórmula habitual primero calcula K = 1 − max(R, G, B) con R, G y B escalados de 0 a 1, y luego C = (1 − R − K) / (1 − K), M = (1 − G − K) / (1 − K) e Y = (1 − B − K) / (1 − K). Esto da una estimación independiente del dispositivo. Las imprentas usan perfiles de color ICC para la mezcla exacta de tintas, así que comprueba los colores de marca importantes con tu imprenta.
¿Cuál es la diferencia entre HSL y HSV?
Ambos describen un color por tono y saturación, pero HSL usa la luminosidad, donde el 50 % es el color puro y el 100 % es blanco, mientras que HSV (también llamado HSB) usa el valor o brillo, donde el 100 % es el color puro a máxima intensidad. HSL se usa en CSS; HSV es lo que muestran Photoshop, Figma y la mayoría de los selectores de color.
¿Qué punto blanco usa la conversión a LAB?
Los valores LAB y LCH siguen la definición de CSS Color 4: CIE Lab relativo al punto blanco D50, convertido desde sRGB (D65) con una adaptación cromática de Bradford. Algunas herramientas antiguas usan Lab D65, que da números a* y b* ligeramente distintos para el mismo color.
¿Qué es OKLCH y por qué usarlo?
OKLCH es la forma polar del espacio de color OKLab publicado por Björn Ottosson en 2020. Su luminosidad se ajusta mucho mejor que HSL a cómo percibimos el brillo de los colores, así que las paletas creadas cambiando solo L se ven uniformes. Todos los navegadores modernos admiten oklch() en CSS.
¿Por qué mi color LAB u OKLCH muestra un aviso?
LAB, LCH y OKLCH pueden describir colores que una pantalla sRGB normal no puede mostrar. HEX, RGB, HSL, HSV y CMYK están limitados a sRGB, así que el convertidor muestra el color visualizable más cercano en esos formatos reduciendo el croma y manteniendo la luminosidad y el tono, y te avisa de que el original está fuera de gama.
¿Puedo convertir muchos colores a la vez?
Sí. Abre Convertir por lotes una lista de colores, pega un color por línea en cualquier combinación de formatos y pulsa Convertir lista. Obtendrás una tabla con todos los formatos que puedes descargar en CSV o copiar en una hoja de cálculo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.