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

En el artículo anterior, Cómo hace los colores la computadora: 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 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 simplemente 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 de la computadora, 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, bajar 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 combinan de manera 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 darle color al papel en lugar de a una pantalla, se necesita un sistema completamente diferente. CMYK es la proporción de cuatro tintas que usa una imprenta.

¿Por qué el negro se llama “K” en vez de “B”? Para no confundirse con Blue. Además, el término viene de “Key plate” en la jerga de imprenta — la placa 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 quita 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 café sucio. De ahí que exista una tinta negra independiente (K).

¿Dónde se usa CMYK?

Si diseñas para pantalla, casi nunca vas a necesitar tocar CMYK. Aparece únicamente cuando se imprime en papel.

• Al mandar archivos a la imprenta — tarjetas de presentación, posters, libros, empaques. La imprenta convierte los archivos RGB a CMYK.
• Al trabajar en Photoshop / Illustrator para impresión — 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 va a salir igual impreso — simplemente no es un color que se pueda hacer con tinta.

Por eso los diseñadores de impresión trabajan desde el principio eligiendo solo colores dentro del rango CMYK. Es muy común 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 al máximo.

Con solo K al 100% el negro queda apagado, parecido al gris. Por eso en la imprenta se agregan también CMY para lograr 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 parecidos 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 que se percibe varía mucho según el color. Chécalo 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é pasa cuando se cambia solo una coordenada en un mismo color.

Dónde se usa

• Paletas con luminosidad uniforme — cuando quieres 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á incluido 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. 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 pixel de la pantalla. Es como sacar el selector de color de Figma/Photoshop y llevarlo a todo el sistema.

Presiona ⌘+Shift+K desde donde sea y aparece el Eyedropper de fns. Un pixel de la propuesta de diseño, una zona de una foto, el color de fondo de otra app — mueve el mouse y haz clic para capturarlo con exactitud.

• Cada clic guarda el color automáticamente en el portapapeles. No hace falta ninguna acción extra 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 presionar 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, sin importar el 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 andar buscando 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 seguido se registran como atajos de texto.

El mismo atajo funciona en cualquier lugar: 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 hace los colores la computadora: RGB, HEX y números binarios.