La versión corta
- La saturación en diseño es la intensidad de un color, de totalmente vivo a completamente gris, con independencia de su tono.
- Una saturación alta atrae la atención y transmite energía, así que funciona mejor en superficies pequeñas como botones, acentos y realces.
- Una saturación más baja se siente más tranquila y a menudo más premium, y encaja en superficies grandes como fondos y zonas de lectura larga.
- Dos colores complementarios muy saturados colocados uno junto a otro pueden parecer vibrar, lo que hace cansado leer texto sobre ellos.
- Los colores saturados suelen necesitar suavizarse en modo oscuro y a menudo no se pueden reproducir con exactitud en impresión CMYK.
En esta página
La saturación en diseño es la intensidad de un color: totalmente saturado es vivo y puro, totalmente desaturado es gris. Súbela donde quieras atención y energía, en un botón, un precio rebajado o un único realce. Bájala en superficies grandes, lectura larga, marcas premium e interfaces oscuras, donde el color vivo cansa enseguida. La mayoría de las buenas paletas mezclan ambas cosas a propósito: una base tranquila de saturación más baja con una o dos notas saturadas.
Qué es la saturación y qué no es
Todo color se puede describir con tres propiedades: tono (qué color es), luminosidad (lo cerca que está del blanco o del negro) y saturación (lo puro o agrisado que está). Cambia solo la saturación y un rojo cereza se desliza hacia un rosa empolvado y luego hacia el gris, sin volverse más claro ni más oscuro. Tono, saturación y brillo explica cómo se relacionan los tres.
En HSL, la saturación es el segundo número. En el espacio de color oklch, más reciente, el equivalente es el croma, y se comporta de forma más uniforme entre tonos, así que un amarillo y un azul con el mismo croma se ven igual de intensos. Colores HSL explica el modelo anterior y cómo leer sus números.
Cuándo subir la saturación
- Lo único que hay que pulsar. Un botón saturado en una página tranquila no necesita una flecha que lo señale. Esa es la función de un color de acento.
- Momentos cortos y ruidosos. Los anuncios de rebajas, los posts de lanzamiento y las cuentas atrás de eventos están para interrumpir el scroll.
- Marcas jóvenes, lúdicas o deportivas. Los productos infantiles, las bebidas energéticas y los festivales suelen llevar la saturación alta como parte de su personalidad.
- Datos que tienen que destacar. En un gráfico, satura la serie que importa y pon el resto en gris.
- Superficies pequeñas sobre fondos oscuros. Un color vivo en una zona pequeña sobre un casi negro se lee como luz, por eso el neón funciona de noche.
Cuándo bajar la saturación
- Superficies grandes. Una pantalla entera de color puro saturado cansa. Los fondos suelen funcionar mejor ligeramente agrisados.
- Posicionamiento premium. Los colores apagados y complejos, como el oliva, el burdeos y el pizarra, suelen leerse como más pensados y caros que los primarios.
- Lectura larga. Artículos, documentos y paneles necesitan una superficie tranquila que se pueda mirar durante una hora.
- Modo oscuro. Los colores saturados brillan y se emborronan sobre fondos oscuros. Baja la saturación y sube un poco la luminosidad; diseño en modo oscuro tiene los detalles.
- Detrás de fotografías y texto. Un fondo más discreto deja que la foto y las palabras manden.
Un momento corto y ruidoso como unas rebajas de fin de semana es donde la saturación alta se gana su sitio. Post vertical de 1080×1350.
Algo en lo que la gente debe detenerse, como una entrada de diario, es donde encaja un color más tranquilo y menos saturado.
El problema de la vibración
Pon dos colores complementarios muy saturados uno junto a otro, como rojo sobre verde o azul sobre naranja, y el borde entre ellos parece titilar. Es un efecto óptico, y hace que leer texto sobre esas parejas sea realmente incómodo aunque la relación de contraste parezca aceptable. La solución es desaturar uno de los dos o separarlos con un neutro.
Vibra
- Texto rojo puro sobre verde puro
- Azul saturado sobre naranja saturado
- Magenta junto a lima a plena intensidad
- Colores vivos juntos en todo un cartel
Se lee con calma
- Texto rojo profundo sobre un salvia apagado
- Azul marino sobre un albaricoque suave
- Acento magenta sobre un fondo lima agrisado
- Un color vivo sobre una base de saturación más baja
Cómo ajustar la saturación en CSS
Los códigos hex esconden la saturación, por eso ajustarla a ojo en hex es lento. Trabaja en HSL u oklch, o mezcla un color con gris usando color-mix().
:root {
/* HSL: the second value is saturation */
--brand: hsl(350 80% 48%);
--brand-muted: hsl(350 35% 48%);
/* oklch: the second value is chroma */
--accent: oklch(0.65 0.2 30);
--accent-soft: oklch(0.65 0.08 30);
/* color-mix: blend towards a grey of similar lightness */
--brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}Un hábito útil es definir cada color de marca con dos saturaciones desde el principio: una versión plena para los acentos y una apagada para los rellenos grandes. Así nadie tiene que improvisar después un tono más suave.
Las fotografías siguen la misma lógica. Una foto saturada y recargada detrás de un titular compite con él; baja su saturación más o menos un tercio y las palabras toman el mando sin ninguna caja ni sombra detrás. En sentido contrario, un único objeto saturado en una foto por lo demás apagada, un abrigo rojo en una calle gris, es una de las formas más antiguas de dirigir la mirada.
La saturación en impresión
Las pantallas pueden mostrar colores más saturados de los que la tinta CMYK puede imprimir, sobre todo azules, verdes, naranjas y morados intensos. Un color vivo en pantalla suele imprimirse bastante más apagado. Si la saturación es central para tu marca, plantéate una tinta directa Pantone para la impresión y revisa una prueba antes de una tirada grande. RGB frente a CMYK explica la diferencia.
La saturación también trabaja junto a la temperatura de color: una paleta cálida y apagada se siente vintage, una fría y apagada se siente escandinava. Para conjuntos ya hechos en cada extremo del mando, consulta paletas de colores apagados y paletas de colores vivos.
Los Marks de Gradiently aplican el mismo principio a un fondo vivo: la zona más tranquila y con mejor contraste se desplaza detrás del texto y el detalle recargado se relaja ahí, así que las palabras quedan sobre una zona más serena mientras el resto del Mark conserva su color.
Preguntas frecuentes
¿Qué es la saturación en diseño?
La intensidad o pureza de un color, de totalmente vivo a completamente gris. Es independiente del tono y de la luminosidad.
¿Es mala una saturación alta?
No, pero funciona mejor en superficies pequeñas y momentos cortos. Las superficies grandes muy saturadas cansan y pueden verse baratas.
¿Qué diferencia hay entre saturación y brillo?
La saturación es cuánto gris lleva mezclado un color; el brillo o la luminosidad es lo cerca que está del blanco o del negro. Puedes cambiar uno sin tocar el otro.
¿Por qué los colores saturados se ven peor en modo oscuro?
Sobre fondos oscuros los colores vivos parecen brillar y difuminarse en los bordes. Bajar un poco la saturación y subir la luminosidad los mantiene nítidos.
¿Cómo hago un color menos saturado en CSS?
Baja el segundo valor de hsl() u oklch(), o mézclalo con gris usando color-mix(in oklch, yourcolour 60%, #808080).
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil