HEX vs RGB vs HSL vs CMYK: qué formato de color usar y cuándo

El mismo color, cuatro idiomas distintos

Elige cualquier color, por ejemplo un coral cálido. Ahora descríbelo de cuatro maneras:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Los cuatro describen exactamente el mismo color. No son estándares que compitan entre sí: son representaciones distintas del color, optimizadas para contextos distintos. La confusión surge cuando no sabemos qué contexto pide qué formato.

Esta guía desglosa cada formato en lenguaje claro: qué es, cómo funciona, cuándo usarlo y cuándo es la elección equivocada. Si trabajas con color en cualquier ámbito (diseño, desarrollo, impresión, marketing), esto te evitará elegir el formato incorrecto para tu proyecto.

HEX: el estándar de la web

Qué es

HEX (hexadecimal) es un código de seis caracteres precedido por una almohadilla: #E8635A. Cada par de caracteres representa los canales Rojo, Verde y Azul en notación base 16 (de 00 a FF).

Es funcionalmente idéntico a RGB, solo que escrito de otra forma. #E8635A es lo mismo que rgb(232, 99, 90). HEX es simplemente una manera más compacta de escribir valores RGB.

Cuándo usar HEX

• CSS y desarrollo web: HEX es la notación de color por defecto en CSS. Todos los navegadores la entienden. color: #E8635A; es la forma más común de especificar color en la web.
• Herramientas de diseño: Figma, Sketch, Adobe XD y Canva usan HEX como entrada principal. Cuando un diseñador dice «el azul es #3B82F6», todo el mundo sabe a qué se refiere.
• Guías de marca: las guías de marca digitales casi siempre incluyen valores HEX porque son cortos, inequívocos y fáciles de copiar y pegar.
• Comunicación rápida: «usa #333» es más rápido que «usa rgb(51, 51, 51)» en un mensaje de Slack.

Cuándo NO usar HEX

• Cuando necesitas transparencia: el HEX estándar de 6 dígitos no admite canal alfa ni opacidad. Necesitas HEX de 8 dígitos (#E8635A80), que es menos legible, o cambiar a RGBA.
• Cuando necesitas ajustar colores mediante código: «haz esto un 20% más claro» es casi imposible de calcular mentalmente en HEX. HSL es mucho mejor para eso.
• Producción para imprenta: las imprentas no usan HEX. Nunca.

Ejemplo real

Estás escribiendo el CSS de una landing page. El diseñador te entrega una guía de estilo con los colores de marca. Escribes:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX es perfecto aquí: compacto, legible y compatible con todo.

RGB: el modelo de color de las pantallas

Qué es

RGB significa Red, Green, Blue (rojo, verde, azul): los tres colores de luz que las pantallas mezclan para producir todos los colores que ves. Cada canal va de 0 a 255. rgb(232, 99, 90) significa 232 unidades de rojo, 99 de verde y 90 de azul.

RGB es la base de todo el color digital. HEX es solo RGB con otra notación. HSL es una transformación de RGB pensada para las personas. Todo lo que hay en tu pantalla acaba convertido en valores RGB enviados a los píxeles.

Cuándo usar RGB

• Cuando necesitas transparencia: RGBA añade un canal alfa: rgba(232, 99, 90, 0.5) para un 50% de opacidad. Es más limpio que el HEX de 8 dígitos y está ampliamente admitido en CSS, herramientas de diseño y programación.
• Programación y desarrollo de apps: Swift, Kotlin, Flutter, React Native; los frameworks de apps suelen trabajar internamente con valores RGB/RGBA.
• LED e iluminación: las luces inteligentes (Philips Hue, tiras LED) usan valores RGB. Si diseñas instalaciones de luz física, RGB es el formato nativo.
• Matemáticas del color: mezclar colores, interpolar degradados o generar color por código es sencillo en RGB.

Cuándo NO usar RGB

• Impresión: las pantallas emiten luz (mezcla aditiva); el papel la refleja (mezcla sustractiva). RGB no puede representar con fidelidad lo que saldrá de una impresora.
• Ajustar luminosidad o saturación: «baja la saturación de este color un 30%» no es intuitivo en RGB. Tendrías que convertirlo antes a HSL.

Ejemplo real

Estás construyendo una app en React Native y necesitas una capa semitransparente:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB con alfa es la elección natural: directa, legible y nativa del motor de renderizado.

HSL: el formato del diseñador

Qué es

HSL significa Hue, Saturation, Lightness (tono, saturación, luminosidad):

• Tono (0°–360°): el color en sí, como posición en la rueda cromática. 0° es rojo, 120° es verde, 240° es azul.
• Saturación (0%–100%): lo vivo que es el color. 0% es gris, 100% es la forma más pura del tono.
• Luminosidad (0%–100%): lo claro u oscuro que es. 0% es negro, 100% es blanco y 50% es el color «verdadero».

hsl(4, 75%, 63%) significa: un tono rojizo (4°), muy vivo (75% de saturación) y ligeramente claro (63%).

Cuándo usar HSL

• Sistemas de diseño y temas: HSL es el mejor formato para crear escalas de color coherentes. ¿Quieres 10 tonalidades de tu color principal? Mantén el tono y varía la luminosidad del 10% al 95%. ¿Quieres una versión apagada? Baja la saturación. Esto es casi imposible de hacer de forma intuitiva en HEX o RGB.
• Modo oscuro / modo claro: cambiar de tema significa ajustar luminosidad y saturación, que se corresponden directamente con parámetros de HSL. Tailwind CSS, Radix Colors y muchos sistemas de diseño modernos se apoyan en HSL.
• Generación de color por código: crear estados hover, estados deshabilitados, fondos y bordes a partir de un único color base es trivial en HSL: hsl(4, 75%, 73%) para una variante más clara, hsl(4, 75%, 43%) para una más oscura.
• Accesibilidad: comprobar los ratios de contraste resulta más intuitivo cuando puedes ver y ajustar la luminosidad directamente.

Cuándo NO usar HSL

• Comunicación entre equipos: la mayoría de la gente no piensa en grados y porcentajes. Decir «el botón es hsl(4, 75%, 63%)» es menos claro que «el botón es #E8635A» en una entrega de diseño.
• Impresión: igual que RGB, HSL es un modelo de color de pantalla.

Ejemplo real

Estás construyendo un sistema de diseño en Tailwind CSS y necesitas una escala de color coherente:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Mismo tono, misma saturación, distinta luminosidad. Una escala perfecta en 30 segundos. Intenta eso en HEX.

CMYK: el formato de la imprenta

Qué es

CMYK significa Cyan, Magenta, Yellow, Key (cian, magenta, amarillo y negro). Describe el color como una mezcla de tinta aplicada sobre papel blanco. Cada valor va del 0% al 100%: 0, 57, 61, 9 significa 0% de cian, 57% de magenta, 61% de amarillo y 9% de negro.

A diferencia de RGB (que suma luz para crear colores), CMYK resta luz al papel blanco. Más tinta = color más oscuro. Por eso se le llama modelo de color sustractivo.

Cuándo usar CMYK

• Diseño para imprenta: tarjetas de visita, folletos, packaging, carteles, revistas. Cualquier archivo enviado a una imprenta comercial debería estar en modo de color CMYK.
• Preparar archivos para imprenta en InDesign o Illustrator: estas herramientas te permiten trabajar en modo CMYK para previsualizar cómo se verán los colores sobre papel (siempre menos vibrantes que en pantalla).
• Pruebas de color: comprobar si los colores de tu diseño son reproducibles en CMYK. Algunos colores RGB muy vivos (sobre todo verdes neón y azules eléctricos) son físicamente imposibles de imprimir en CMYK: quedan «fuera de gama».

Cuándo NO usar CMYK

• Cualquier cosa en pantalla: webs, apps, redes sociales, presentaciones, correos. Las pantallas usan RGB. Especificar CMYK para una web es como dar indicaciones de conducción en millas náuticas: técnicamente es una distancia, pero no sirve para el trayecto.
• Edición fotográfica: edita en RGB y convierte a CMYK solo en la exportación final para imprenta.

Ejemplo real

Has diseñado un cartel en Illustrator. Antes de enviarlo a la imprenta conviertes el documento al modo de color CMYK (File → Document Color Mode → CMYK Color), compruebas los avisos de fuera de gama y corriges los azules eléctricos que se han desplazado hacia un turquesa apagado. El PDF final se guarda en CMYK con el perfil ICC de la imprenta.

Tabla de referencia rápida

La chuleta: qué formato para cada trabajo

¿Se pueden convertir entre sí?

Sí, con matices.

• HEX ↔ RGB: sin pérdida, son los mismos datos en otra notación.
• RGB ↔ HSL: sin pérdida, es una transformación matemática.
• RGB → CMYK: con pérdida. Algunos colores RGB (azules vivos, neones, verdes brillantes) no pueden reproducirse en CMYK. La conversión los desplaza al equivalente imprimible más cercano, que suele verse más apagado.
• CMYK → RGB: técnicamente posible, pero el resultado depende del perfil ICC utilizado. Dos conversores pueden dar valores RGB ligeramente distintos para la misma entrada CMYK.

Para conversiones rápidas sobre la marcha, un selector de color en el móvil que muestre los cuatro formatos a la vez es el flujo de trabajo más rápido. Color Picker Camera: HEX RGB hace exactamente eso: apunta la cámara a cualquier color y verás HEX, RGB, HSL y CMYK uno al lado del otro. Un toque copia cualquier valor. Disponible en iPhone y Android.

Errores habituales

1. Diseñar para imprenta en RGB

Es el error clásico de principiante. Diseñas un cartel vibrante en Photoshop en modo RGB, lo envías a la imprenta y el resultado sale lavado, sobre todo los verdes y los azules. Convierte siempre a CMYK antes de exportar para imprenta y revisa los avisos de gama.

2. Usar HEX cuando necesitas transparencia

Si tu diseño requiere capas semitransparentes, sombras o efectos de glassmorphism, cambia a RGBA o HSLA. El HEX estándar de 6 dígitos no lleva información de opacidad, y el de 8 dígitos se usa poco porque cuesta leerlo.

3. Construir un sistema de diseño en HEX

«#3B82F6 pero un 20% más claro» exige convertir, calcular y volver a convertir. En HSL: sube la luminosidad un 20%. Los tokens de diseño, los generadores de temas y las custom properties modernas de CSS funcionan mucho mejor en HSL.

4. Convertir CMYK a HEX para la web y esperar el mismo color

Una marca definida en CMYK para imprenta se verá distinta si se convierte ingenuamente a HEX para la web. El enfoque correcto: iguala visualmente el color en pantalla con la versión impresa y define después valores HEX específicos para uso digital. La guía de marca debería incluir ambos.

Preguntas frecuentes

¿Cuál es la diferencia entre HEX y RGB?

Ninguna en cuanto al color: solo en la notación. HEX escribe los mismos valores de rojo, verde y azul en base 16. #FF0000 es idéntico a rgb(255, 0, 0). HEX es más corto de escribir; RGB es más fácil de modificar por código y admite un canal alfa (RGBA).

¿Cuándo debo usar CMYK en lugar de RGB?

Siempre que el resultado final se imprima sobre un material físico: papel, cartón, tela, plástico. Si se queda en una pantalla, usa RGB (o HEX/HSL). Si se imprime, cambia a CMYK en la fase de exportación.

¿Es HSL mejor que HEX?

Para sistemas de diseño, temas y manipulación de color, sí. Para comunicar rápido y copiar y pegar en herramientas, HEX es más práctico. Describen los mismos colores; HSL solo organiza la información de una forma que encaja con cómo pensamos el color las personas (tono → viveza → brillo).

¿Puede mi móvil mostrar los cuatro formatos a la vez?

Sí. Color Picker Camera: HEX RGB captura un color con la cámara o desde una foto y muestra HEX, RGB, HSL y CMYK simultáneamente. Toca cualquier valor para copiarlo. Funciona como una calculadora de formatos de color del mundo real: una captura, cuatro formatos.

En resumen

HEX para la web y la comunicación rápida. RGB para desarrollo de apps y transparencia. HSL para sistemas de diseño y manipulación de color. CMYK para imprenta.

No tienes que elegir uno: tienes que usar el adecuado en cada contexto. Y cuando necesites convertir entre ellos o capturar un color del mundo real en los cuatro formatos a la vez, un selector de color en el móvil es la herramienta más rápida que existe.

Descarga Color Picker Camera para iPhone | Descárgala para Android

Descargar PDF

Otros formatos: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Licencia: CC BY 4.0