Conversor Colores HEX, RGB, HSL, CMYK
Convierte cualquier color entre los formatos HEX, RGB, HSL y CMYK con preview visual interactivo.
rgb(59, 130, 246)
hsl(217, 91%, 60%)
Hue (matiz): 217°. Saturation: 91%. Lightness: 60%.
cmyk(76%, 47%, 0%, 4%)
¿Trabajas con identidad visual?
OCC organiza recursos de marca y design system en una plataforma
Descubre OCC →¿Necesitas algo más que esta herramienta? OCC te lo monta
No vendemos software de terceros: somos el equipo que ejecuta. Escríbenos por WhatsApp y te conectamos con el especialista o construimos lo que necesites.
Conectamos con diseñadores verificados para identidad visual, branding, web y assets para redes.
Te montamos un design system completo en Figma con tokens, componentes y guía de marca.
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.
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.
Revisado por Javier Andreo