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

Mismo color, cuatro idiomas diferentes

Mira este coral. Es exactamente el mismo color, pero se puede escribir de cuatro maneras diferentes:

Cada formato tiene su propósito. Elegir el incorrecto no hará que tu proyecto se rompa, pero elegir el correcto te ahorrará tiempo, evitará errores de conversión y mantendrá la consistencia de tu marca en todas las plataformas.

Esta guía explica exactamente cuándo usar cada uno, con ejemplos reales y referencias rápidas.

HEX: El estándar web

Qué es: Un código hexadecimal de 6 dígitos que representa los valores rojo, verde y azul. Siempre empieza con #. Ejemplo: #FF6F61 significa 255 de rojo, 111 de verde, 97 de azul.

Cuándo usar HEX

• Hojas de estilo CSS — Es el formato predeterminado que la mayoría de desarrolladores web usan y esperan.
• Herramientas de diseño — Figma, Sketch y Canva muestran HEX de forma prominente en sus selectores de color.
• Guías de marca — La mayoría de guías de marca listan colores en HEX porque es corto y fácil de copiar y pegar.
• Comunicación — Cuando necesitas compartir un color exacto en Slack o correo electrónico, HEX es universalmente entendido.

Cuándo NO usar HEX

• Cuando necesitas transparencia — HEX no soporta alfa nativamente. Puedes usar HEX de 8 dígitos (#FF6F6180), pero el soporte es inconsistente entre herramientas.
• Manipulación programática de colores — Aclarar u oscurecer un color HEX requiere conversión primero.
• Diseño para impresión — La impresión usa CMYK. Enviar HEX a una imprenta garantiza un desajuste de color.

Ejemplo real: Variables CSS

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: El modelo de color de pantalla

Qué es: Tres números (0–255) que representan rojo, verde y azul, los colores reales de luz que emite tu pantalla. Ejemplo: rgb(255, 111, 97).

Cuándo usar RGB

• Transparencia (RGBA) — rgba(255, 111, 97, 0.5) te da un control exacto de opacidad. Es el método más ampliamente soportado para colores semitransparentes en CSS.
• Desarrollo de apps — Swift, Kotlin y Flutter usan valores RGB internamente. Trabajar en RGB evita conversiones innecesarias.
• Iluminación LED e IoT — Las tiras LED y bombillas inteligentes esperan valores RGB.
• Matemáticas de color — Mezclar dos colores o interpolar entre ellos es sencillo aritméticamente en RGB.

Cuándo NO usar RGB

• Diseño para impresión — Los valores RGB no corresponden directamente a la mezcla de tintas. Siempre convierte a CMYK antes de enviar a imprenta.
• Ajustar saturación o brillo — Cambiar la saturación en RGB requiere fórmulas complejas. HSL es mucho más fácil para esto.

Ejemplo real: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: El formato del diseñador

Qué es: Tres valores — Tono (0–360°, la posición en la rueda de color), Saturación (0–100%, de gris a vibrante) y Luminosidad (0–100%, de negro a blanco). Ejemplo: hsl(5, 100%, 69%).

Cuándo usar HSL

• Sistemas de diseño — Crea una escala de color completa manteniendo el tono y la saturación fijos y cambiando solo la luminosidad.
• Modo oscuro — Generar variantes oscuras es tan simple como reducir la luminosidad. Sin adivinanzas, sin fórmulas.
• Generación programática de colores — ¿Necesitas 12 colores distintos equidistantes? Incrementa el tono en 30° manteniendo la saturación y luminosidad iguales.
• Accesibilidad — Verificar el contraste es más intuitivo cuando puedes leer el valor de luminosidad directamente.

Cuándo NO usar HSL

• Comunicación entre equipos — La mayoría de personas no piensan en tono/saturación/luminosidad. HEX o RGB suelen ser más claros en conversaciones.
• Flujos de trabajo de impresión — HSL no tiene equivalente directo en impresión. Convierte a CMYK primero.

Ejemplo real: Escala de colores con Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%, 95%)',
          100: 'hsl(5, 100%, 90%)',
          200: 'hsl(5, 100%, 82%)',
          300: 'hsl(5, 100%, 75%)',
          400: 'hsl(5, 100%, 69%)', /* base */
          500: 'hsl(5, 85%, 58%)',
          600: 'hsl(5, 70%, 48%)',
          700: 'hsl(5, 65%, 38%)',
          800: 'hsl(5, 60%, 28%)',
          900: 'hsl(5, 55%, 18%)',
        }
      }
    }
  }
}

CMYK: El formato de impresión

Qué es: Cuatro valores — Cian, Magenta, Amarillo y Negro (Key). A diferencia de RGB (que suma luz), CMYK es sustractivo — describe cuánta tinta absorbe la luz del papel blanco. Ejemplo: 0, 56, 62, 0.

Cuándo usar CMYK

• Todo lo impreso — Tarjetas de presentación, carteles, empaques, revistas. Si pasa por una imprenta, debe ser CMYK.
• InDesign y flujos de impresión — Diseña en CMYK desde el principio para evitar sorpresas con colores fuera del rango.
• Pruebas de color — Las pruebas en pantalla simulan la salida de la impresora, lo cual solo funciona cuando tus colores fuente ya están en CMYK.

Cuándo NO usar CMYK

• Pantallas — Los monitores usan luz (RGB). Los valores CMYK deben convertirse, y la conversión siempre es una aproximación.
• Edición fotográfica — Trabaja en RGB durante la edición. Convierte a CMYK solo como último paso si se imprimirá.

Ejemplo real: Exportar desde Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

Tabla de referencia rápida

Hoja de referencia: Tipo de proyecto → Formato de color

Conversiones: Lo que necesitas saber

• HEX ↔ RGB — Conversión sin pérdida. Son representaciones diferentes del mismo modelo. #FF6F61 es exactamente rgb(255, 111, 97).
• RGB ↔ HSL — Conversión sin pérdida. Son expresiones matemáticas diferentes del mismo conjunto de colores.
• RGB → CMYK — Conversión con pérdida. El rango de CMYK es menor que el de RGB. Los colores vibrantes de pantalla suelen apagarse en impresión.
• CMYK → RGB — El resultado depende del perfil ICC utilizado. El mismo valor CMYK puede verse diferente con distintos perfiles.

La app Color Picker Camera muestra los cuatro formatos simultáneamente — apunta a cualquier color del mundo real y obtén HEX, RGB, HSL y CMYK al instante. Sin conversión manual.

Errores comunes (y cómo evitarlos)

1. Enviar RGB a la imprenta

Las impresoras mezclan tintas, no luz. Si envías un archivo RGB, el software de la imprenta adivinará la conversión CMYK y los resultados rara vez coinciden con lo que ves en pantalla. Diseña siempre para impresión en CMYK desde el principio.

2. Usar HEX para transparencia

El HEX de 8 dígitos (#FF6F6180) existe, pero muchas herramientas no lo reconocen. Usa rgba() o hsla() para transparencia confiable.

3. Construir un sistema de diseño solo con HEX

Generar tonos claros y oscuros a partir de un código HEX requiere prueba y error. HSL permite cambiar la luminosidad directamente, haciendo las escalas de color predecibles y consistentes.

4. Convertir CMYK → HEX y esperar el mismo color

CMYK tiene un rango más pequeño que RGB/HEX. Al convertir de vuelta, el color se aproxima y puede verse apagado o ligeramente cambiado. Verifica siempre visualmente.

Preguntas frecuentes

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

Ninguna en términos de colores disponibles. Ambos cubren los mismos 16,7 millones de colores. HEX es simplemente una forma más corta de escribir valores RGB en notación hexadecimal. #FF6F61 = rgb(255, 111, 97). La única diferencia práctica es la transparencia: RGB tiene RGBA incorporado, mientras que HEX de 8 dígitos tiene soporte limitado.

¿Cuándo debería usar CMYK?

Siempre que tu diseño se imprima físicamente: tarjetas de presentación, folletos, carteles, empaques. Si solo se verá en pantalla, usa HEX, RGB o HSL.

¿Es HSL mejor que RGB?

No es mejor, es más fácil de razonar para diseñadores. Si necesitas crear un esquema de color, generar temas de modo oscuro o verificar contraste de accesibilidad, HSL es más intuitivo. Para desarrollo de apps donde los frameworks esperan RGB, usa RGB.

¿Hay alguna app que muestre los 4 formatos de color a la vez?

Sí. Color Picker Camera te permite apuntar tu teléfono a cualquier color del mundo real y ver instantáneamente HEX, RGB, HSL y CMYK en una sola pantalla. Disponible para iOS y Android.

En resumen

Usa HEX para la web. Usa RGB para apps y pantallas. Usa HSL para sistemas de diseño y temas. Usa CMYK para impresión.

Si trabajas con colores del mundo real — una pared pintada, una muestra de tela, un logotipo en un letrero — Color Picker Camera actúa como tu calculadora de colores. Apunta, captura y obtén los cuatro formatos al instante.

Descargar para iOS Descargar para Android