Conversor Colores HEX, RGB, HSL, CMYK

Los cuatro formatos de color principales

Existen cuatro formatos estándar para representar colores digitalmente, cada uno con sus usos óptimos:

HEX (hexadecimal): notación compacta de 6 caracteres precedida de #. Cada par representa un canal RGB en hexadecimal (00-FF). #FF0000 = rojo puro. Es el formato dominante en CSS y diseño web.

RGB (Red, Green, Blue): tres valores 0-255 que representan la intensidad de cada canal de color primario aditivo. rgb(255, 0, 0) = rojo. Es el modelo nativo de pantallas.

HSL (Hue, Saturation, Lightness): tres valores que separan matiz (0-360°), saturación (0-100%) y luminosidad (0-100%). Es más intuitivo para diseñadores: cambiar la luminosidad o saturación es directo. hsl(0, 100%, 50%) = rojo puro.

CMYK (Cyan, Magenta, Yellow, Key/Black): cuatro valores 0-100% usados en impresión profesional. Modelo sustractivo (los pigmentos absorben luz). cmyk(0%, 100%, 100%, 0%) = rojo en impresión. La fórmula que convierte matiz, saturación y luminosidad en los canales rojo, verde y azul aparece en la notación HSL del Módulo de Color de CSS del W3C.

Nuestro conversor de colores completo online convierte instantáneamente entre los cuatro formatos partiendo de cualquiera.

Cuándo usar cada formato

HEX: el más popular en CSS por concisión. background-color: #3B82F6 es compacto y legible.

RGB y RGBA: usar RGB cuando necesitas transparencia (rgba con cuarto parámetro de 0-1 para alpha). rgba(255, 0, 0, 0.5) = rojo con 50% opacidad.

HSL: ideal para sistemas de diseño y temas. Cambiar la luminosidad para variantes hover/active es trivial: hsl(220, 80%, 50%) base, hsl(220, 80%, 45%) hover.

CMYK: solo para impresión. Nunca en web (los navegadores no lo entienden). Si diseñas algo que se imprimirá (folletos, carteles), trabaja en CMYK con Adobe Illustrator o InDesign.

RGB vs CMYK: aditivo vs sustractivo

RGB (aditivo): mezcla luz. R+G+B = blanco. Se usa en pantallas. Imposible representar todos los colores RGB en impresión.

CMYK (sustractivo): los pigmentos absorben luz. C+M+Y teóricamente = negro pero en práctica da marrón. Por eso se añade K (Key = negro puro). Imposible representar algunos colores RGB vibrantes en CMYK (típicamente verdes y azules saturados).

La conversión RGB → CMYK siempre pierde fidelidad. Diseña directamente en CMYK si tu producto final es impreso.

Modelos de color modernos

OKLCH: nuevo en CSS4. Más perceptualmente uniforme que HSL. Tailwind v4 ya lo usa.

P3 (Display P3): espacio de color más amplio que sRGB. Pantallas Apple modernas, iPhone 7+ lo soportan.

Wide Gamut: color con más rango que sRGB. Solo visible en pantallas compatibles. En CSS se usa color(display-p3 r g b).

Preguntas frecuentes

¿Por qué hay diferencia entre HEX y RGB?
No hay diferencia de color, solo de notación. #FF0000 y rgb(255, 0, 0) son exactamente el mismo color. HEX es más compacto, RGB permite transparencia con rgba(). Ambos representan el mismo modelo de color sRGB.

¿Cómo convierto un color HEX a CMYK?
Primero a RGB (#3B82F6 → 59, 130, 246), luego a CMYK. La conversión es matemática pero da resultados aproximados. Para impresión profesional, usa Adobe Color o calibra tu monitor + impresora juntos para máxima fidelidad.

¿Es lo mismo HSL que HSB/HSV?
No. HSL (Hue, Saturation, Lightness) y HSB/HSV (Hue, Saturation, Brightness/Value) son distintos. Diferencia: HSL al 100% L es blanco; HSB al 100% V es color puro saturado. Photoshop usa HSB; CSS usa HSL.

¿Mis datos se almacenan?
No. La conversión se ejecuta en tu navegador. Ningún color introducido se transmite a servidores externos.

Herramientas relacionadas: HEX a RGB, Paleta de Colores, Contraste WCAG.