El RGB no es suficiente: las notaciones de color HSL, CMYK y OKLCH

En el artículo anterior, Cómo genera colores el ordenador: RGB, HEX y números binarios, vimos que un color no es más que tres números — rojo, verde, azul, cada uno entre 0 y 255. Las pantallas funcionan perfectamente con esos números. Pero en cuanto un humano empieza a trabajar con el color, el RGB se vuelve incómodo enseguida.

RGB es práctico, pero no intuitivo

“Un rojo un poco más claro.” ¿Cómo se hace eso en RGB? Hay que subir los tres canales a la vez. “Solo quiero bajar la saturación un poco” — solo viendo RGB no sabes qué canal ajustar. “Quiero imprimirlo exactamente igual en papel” — con RGB eso directamente no es posible.

Otros sistemas de color surgieron precisamente para resolver estos problemas.

HSL — la forma en que piensa el ser humano

HSL divide el color en tres componentes: tono · saturación · luminosidad. hsl(14, 100%, 60%) es el mismo color que #FF5733, pero queda claro de qué parte viene cada cosa.

Si RGB es el lenguaje del ordenador, HSL es el lenguaje del diseñador. Permite trabajar el mismo color desde el punto de vista de qué quieres cambiar.

Hue — el tono es un círculo de 360°

El tono da la vuelta completa como un reloj, de 0° a 360°. Los 0° y los 360° son el mismo rojo.

Saturation — la saturación es la intensidad del color

Con el mismo tono, reducir la saturación va acercando el color al gris.

Lightness — la luminosidad va del negro al blanco

L al 0% siempre es negro, al 100% siempre es blanco. El 50% corresponde al brillo “natural” de ese color.

Para qué sirve realmente HSL — crear paletas

Manteniendo el mismo tono (Hue) y cambiando solo L, se obtiene un conjunto de colores que armonizan de forma natural. Para hacer lo mismo con RGB habría que calcular manualmente 9 celdas, pero con HSL basta con ir variando L de 12% a 92% por pasos.

Ambas paletas se pueden generar con una sola línea:

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... solo cambiar L de 10 en 10 */
}

Es donde HSL brilla más a la hora de construir un sistema de diseño.

CMYK — el lenguaje de la tinta

Para dar color al papel en lugar de a una pantalla, se necesita un sistema completamente diferente. CMYK es la proporción de cuatro tintas que utiliza una imprenta.

¿Por qué el negro se llama “K” en lugar de “B”? Para no confundirse con Blue. Además, el término viene de “Key plate” en la jerga de imprenta — la plancha de referencia que alinea las demás tintas.

La luz suma brillo; la tinta suma oscuridad

La diferencia más grande entre RGB y CMYK es la forma de mezclar.

La tinta roja se ve roja porque absorbe las otras longitudes de onda y solo refleja el rojo. La tinta sustrae luz. Por eso, cuanta más tinta se mezcla, más oscuro queda el color. En teoría, mezclar CMY debería dar negro, pero en la práctica resulta un marrón sucio. De ahí que exista una tinta negra independiente (K).

¿Dónde se usa CMYK?

Si diseñas para pantalla, casi nunca tendrás que tocar CMYK. Aparece únicamente cuando se imprime en papel.

• Al enviar archivos a la imprenta — tarjetas de visita, carteles, libros, packaging. La imprenta convierte los archivos RGB a CMYK.
• Al trabajar en Photoshop / Illustrator para imprenta — se empieza con el modo de color en CMYK desde el principio.
• En guías de marca — se anotan tanto el HEX para pantalla como los valores CMYK para imprenta. El mismo color de marca debe verse parecido en ambos medios.

Por qué el color en pantalla y en papel no es igual — Gamut

El rango de colores que puede mostrar una pantalla (gamut RGB) y el que puede reproducir la tinta (gamut CMYK) no coinciden. Un rosa fluorescente brillante en pantalla no saldrá igual impreso — simplemente no es un color reproducible con tinta.

Por eso los diseñadores de impresión trabajan desde el principio eligiendo solo colores dentro del rango CMYK. Es habitual que un diseño hecho en RGB pierda viveza al imprimirse.

Cómo se escriben los valores CMYK

Se indica qué porcentaje de cada tinta se aplica. 0% significa que no se aplica; 100% es a tope.

Con solo K al 100% el negro queda apagado, parecido al gris. Por eso en imprenta se añaden también CMY para conseguir un negro más profundo.

OKLCH — las coordenadas humanas

Es un modelo de color que llegó con fuerza en los años 2020. La idea clave es una sola: “natural para el ojo humano.”

Sus tres coordenadas tienen nombres similares a los de HSL:

• L — Lightness (luminosidad, 0–1)
• C — Chroma (saturación, 0–~0,4)
• H — Hue (tono, 0–360°)

Sin embargo, HSL tiene un problema oculto: aunque el valor L = 50% sea el mismo, la luminosidad percibida varía enormemente según el color. Compruébalo directamente.

En una sola frase — RGB y HSL son coordenadas de máquina. OKLCH son coordenadas humanas.

L · C · H, el papel de cada uno

Veamos qué ocurre cuando se cambia solo una coordenada en un mismo color.

Dónde se usa

• Paletas con luminosidad uniforme — cuando se quiere que 8 colores de categoría tengan exactamente la misma luminosidad
• Conversión automática modo oscuro/claro — invirtiendo solo L se obtiene un tema oscuro natural
• Accesibilidad — permite predecir con precisión la diferencia de luminosidad entre texto y fondo
• Degradados — flujo natural sin esa franja grisácea en el centro

Está recogido en CSS Color Level 4 y se puede usar directamente en los navegadores modernos.

.btn { background: oklch(67% 0.18 30); }       /* naranja */
.btn:hover { background: oklch(60% 0.18 30); } /* solo L baja 7 → exactamente más oscuro */

Cuándo usar cada uno

Para la mayoría del trabajo digital, RGB/HEX es suficiente. HSL es útil al crear paletas, y OKLCH ayuda mucho en diseño con modo oscuro/claro.

Cómo manejar el color con fns

Una vez que sabes que el color es un número, el siguiente paso es tener tus colores favoritos al alcance de la mano. fns agrupa en una sola tecla el flujo de capturar, guardar y recuperar colores.

Eyedropper para capturar color desde cualquier punto de la pantalla — ⌘+Shift+K

Eyedropper es una herramienta que captura con precisión el color exacto de cualquier píxel de la pantalla. Es como sacar el selector de color de Figma/Photoshop y llevarlo a todo el sistema.

Pulsa ⌘+Shift+K desde cualquier lugar y aparece el Eyedropper de fns. Un píxel de la maqueta, una zona de una fotografía, el color de fondo de otra aplicación — mueve el ratón y haz clic para capturarlo con exactitud.

• Cada clic guarda el color automáticamente en el portapapeles. No hace falta ninguna acción adicional de “copiar”.
• En el widget Eyedropper puedes elegir en qué formato (RGB / HEX / HSL / CMYK / OKLCH) se guardará en el portapapeles.
• Muestra también una vista previa visual del color capturado y los colores del sistema más cercanos.

Eyedropper → guardado automático en portapapeles → recuperación desde el selector de portapapeles — el flujo no se interrumpe. Sin necesidad de abrir el medidor de color digital de Mac por separado, ni de pulsar el atajo de copiar cada vez.

El portapapeles reconoce los colores automáticamente

El historial del portapapeles de fns detecta automáticamente si el texto copiado es un código de color, independientemente del formato.

Al recuperar un color copiado del historial, es difícil recordar de qué color era viendo solo el texto. fns muestra una pequeña muestra de color junto a cada elemento para que lo identifiques de un vistazo.

Ver solo los colores

Con una sola tecla puedes filtrar el historial del portapapeles para ver únicamente los códigos de color. En medio de un trabajo de diseño, si quieres revisar solo los colores recientes, no tienes que buscar entre textos, URLs y código.

• Desde el mismo selector, escribe el filtro color: → solo se muestran los elementos de color
• Búsqueda por nombre de color — busca “blue” o “red” y se filtran los colores de esa gama
• Los colores similares se agrupan y ordenan visualmente

Convertir un color a otro formato

Puedes convertir el mismo color a otra notación y recuperarlo directamente. Si copiaste #FF5733 en Figma y quieres pegarlo en CSS como rgb(...), selecciona ese elemento en el selector de portapapeles de fns y con un atajo se convierte automáticamente.

Ya no hace falta abrir un conversor cada vez que vas de Figma (HSB) a CSS (HSL/HEX/OKLCH).

Expansión de texto y agrupación

Los colores de marca que usas a menudo se registran como abreviaturas de texto.

La misma abreviatura funciona en cualquier sitio: el campo de color de CSS, el de Figma, un mensaje de Slack, un editor de código. Se acaba el tiempo perdido buscando y copiando el color de la guía de marca cada vez.

Prueba a reducir con fns el tiempo que pasas abriendo conversores y moviendo códigos de color de un formato a otro.

¿Te preguntas de dónde vienen estos números — los fundamentos de los tres canales RGB, el binario y la notación HEX? Empieza con Cómo genera colores el ordenador: RGB, HEX y números binarios.