Pasar del diseño al código
Convertir los colores de una maqueta a HEX o RGB es el paso obligado para llevarlos a la hoja de estilos.
Conversor de color
Conversor de colores online gratis. Convierte entre HEX, RGB, HSL, CMYK al instante. Herramienta esencial para diseñadores.
🔒 Este archivo se procesa en tu navegador. No se sube a ningún servidor.
…
Para qué sirve
Un mismo color se escribe de formas distintas según dónde vaya a usarse, y esta herramienta traduce entre todas ellas. HEX es el código de seis caracteres habitual en web, RGB expresa el color como mezcla de rojo, verde y azul, HSL lo describe por tono, saturación y luminosidad, y CMYK es el sistema de la impresión.
La conversión hace falta a diario porque cada programa habla su idioma. El diseñador entrega un HEX, la herramienta de maquetación pide RGB, la imprenta trabaja en CMYK y la hoja de estilos admite cualquiera de los tres. Traducir a mano es posible pero tedioso y propenso a errores.
HSL merece una mención aparte porque es el más intuitivo para ajustar un color a ojo. Mantener el tono y subir la luminosidad da una variante más clara del mismo color, algo mucho más difícil de conseguir tocando los tres números de RGB.
Cómo funciona
- Elige un color con el selector visual o escribe directamente su código HEX.
- La herramienta calcula al instante sus equivalentes en RGB, HSL y CMYK.
- Copia el formato que necesites para tu diseño o tu código.
Cuándo usarlo
Preparar para imprenta
Los colores de pantalla se definen en RGB, pero la impresión trabaja en CMYK. La conversión da el punto de partida.
Crear variantes
Ajustando la luminosidad en HSL se obtienen las versiones clara y oscura de un color de marca sin perder el tono.
Consejos prácticos
- La conversión a CMYK es la fórmula matemática estándar. Para una impresión profesional, la imprenta puede pedir un perfil de color concreto que dé valores algo distintos.
- No todos los colores de pantalla se pueden imprimir: los verdes y azules muy saturados quedan siempre más apagados en papel.
- Guarda los colores de tu proyecto en HEX, que es el formato más portátil entre herramientas.
- Antes de dar por bueno un color para texto, comprueba su contraste contra el fondo previsto.
Preguntas frecuentes
¿Por qué necesito varios formatos de color?
Cada contexto usa uno distinto: CSS suele usar HEX o RGB, el diseño impreso usa CMYK, y HSL es más intuitivo para ajustar tono y luminosidad a mano.
¿Es exacta la conversión a CMYK?
Es una conversión matemática estándar RGB→CMYK; para impresión profesional, la imprenta puede requerir un perfil de color específico distinto.