# La saturación en diseño: cuándo subir o bajar el color

[Canonical HTML page](https://gradiently.design/es/guide/color-saturation)

La saturación es el mando entre lo vivo y lo gris, y cambia lo ruidoso, barato, sereno o caro que se siente un diseño. Aquí tienes cuándo subirla, cuándo bajarla y los códigos para hacer cualquiera de las dos cosas.

## The short version

- 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.

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](https://gradiently.design/es/guide/hue-saturation-brightness) explica cómo se relacionan los tres.

- Rojo, saturación del 85% al 0%: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Azul, saturación del 85% al 0%: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Verde, saturación del 70% al 0%: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Tres tonos con la luminosidad fija mientras baja la saturación. El centro de cada franja es donde viven muchos colores de marca sofisticados.

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](https://gradiently.design/es/guide/hsl-colors) 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](https://gradiently.design/es/guide/accent-color).
- **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](https://gradiently.design/es/guide/dark-mode-design) tiene los detalles.
- **Detrás de fotografías y texto.** Un fondo más discreto deja que la foto y las palabras manden.

Un post vertical de rebajas que dice Rebajas de fin de semana, solo 48 horas

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.

Un post vertical de diario titulado Notas desde el estudio

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()`.

```css
: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);
}
```

Tres formas de bajar la saturación manteniendo el tono: la saturación de HSL, el croma de oklch y la mezcla con gris.

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](https://gradiently.design/es/guide/rgb-vs-cmyk) explica la diferencia.

- Rojo pleno: #e8173a
- Rojo apagado: #b8505f
- Azul pleno: #1c7ae0
- Azul apagado: #4f6f93
- Verde pleno: #14a85a
- Verde apagado: #5b8a6f

Cada color de marca con dos saturaciones. Las versiones plenas son para momentos pequeños y ruidosos; las apagadas cubren superficies grandes y sobreviven mejor a la impresión.

La saturación también trabaja junto a la [temperatura de color](https://gradiently.design/es/guide/color-temperature): 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](https://gradiently.design/es/guide/muted-color-palettes) y [paletas de colores vivos](https://gradiently.design/es/guide/bright-color-palettes).

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.

## FAQ

### ¿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)`.