# Degradados vibrantes: códigos saturados que no vibran

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

El color saturado es la forma más rápida de llamar la atención y la más rápida de cansar la vista. Estos códigos son brillantes a propósito y están hechos para que sus bordes nunca titilen, con las razones, para que puedas crear los tuyos.

## The short version

- Un degradado vibrante usa colores muy saturados, pero solo resulta cómodo de mirar cuando los colores vecinos tienen matices cercanos y se diferencian claramente en luminosidad.
- Los colores de matiz opuesto y luminosidad parecida colocados borde con borde parecen titilar, un efecto que suele llamarse vibración cromática.
- Los opuestos saturados mezclados directamente en sRGB pasan por un centro grisáceo, algo que interpolar en oklch evita en gran medida.
- Una base oscura o neutra da a la vista un lugar donde descansar y hace que el color vibrante parezca más brillante que sobre blanco.
- El texto sobre un degradado vibrante se lee mejor en casi negro o en blanco, nunca en otro color saturado de luminosidad parecida.

Un **degradado vibrante** es brillante y saturado sin chirriar cuando se cumplen dos reglas: cada color está cerca de su vecino en la rueda de color, y cada paso cambia claramente de luminosidad. Si rompes la primera, el centro se vuelve turbio; si rompes la segunda, poniendo matices opuestos de igual brillo uno junto a otro, el borde parece titilar. Los doce códigos siguientes cumplen ambas reglas, así que son llamativos como lo es un póster, no como lo es una migraña.

## Doce códigos de degradados vibrantes

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Violeta eléctrico: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Laguna: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamenco: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Refresco de lima: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Cereza pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Glaciar: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa sobre noche: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Brasa: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Ascenso cobalto: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Coral a oro, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Cada mezcla recorre matices vecinos mientras se aclara o se oscurece, y eso es lo que la mantiene limpia. La última está escrita en oklch y necesita un navegador actual.

## Por qué vibran algunos degradados brillantes

Pon un rojo saturado justo contra un azul saturado de brillo parecido y el límite parece parpadear, como si los dos colores no pudieran decidir cuál va delante. Los diseñadores lo llaman vibración cromática. Es más fuerte en bordes duros, en líneas finas y en texto de color, y es la razón por la que el texto rojo sobre fondo azul cansa tanto. Los colores en sí están bien; lo que lo provoca es la combinación de matiz opuesto y luminosidad igual, en contacto.

- Vibra: borde duro, mismo brillo: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Tranquilo: un paso oscuro entre ambos: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

El mismo rojo y el mismo azul. A la izquierda se tocan con el mismo brillo y el borde titila; a la derecha un paso profundo los separa y ambos colores parecen más intensos.

Hay dos soluciones. O separas los colores con un paso más oscuro o más claro entre ellos, como a la derecha, o eliges vecinos en lugar de opuestos. [Colores complementarios](https://gradiently.design/es/guide/complementary-colors) explica cuándo los opuestos merecen la pena.

## Reglas para crear tu propio degradado vibrante

| Regla | Por qué | Ejemplo |
| --- | --- | --- |
| Quédate dentro de un tercio de la rueda | Los vecinos se mezclan sin pasar por el gris | Índigo, violeta, magenta |
| Escalona la luminosidad | Da profundidad y evita que los bordes chirríen | Del profundo `#1d4ed8` al brillante `#38bdf8` |
| Usa un color protagonista | Tres colores igual de intensos se pelean | El magenta es el pico; el resto lo acompaña |
| Añade una base | Una zona oscura o neutra deja descansar la vista | Rosa sobre noche, brasa |
| Mezcla en oklch | Mantiene saturado el punto medio, no apagado | Coral a oro, oklch |

Cinco reglas detrás de cada código anterior. Rompe una a propósito, nunca por accidente.

La turbidez es la otra forma en que fallan los degradados brillantes. Mezcla dos opuestos saturados en sRGB simple y el color intermedio cae hacia el gris, algo que se explica en [degradados turbios](https://gradiently.design/es/guide/muddy-gradients) y, a un nivel más técnico, en [interpolación de degradados](https://gradiently.design/es/guide/gradient-interpolation). La saturación es un dial, no un interruptor; [la saturación en diseño](https://gradiently.design/es/guide/color-saturation) muestra cómo ajustarla.

## Degradados vibrantes en CSS

Los navegadores modernos pueden mezclar en un espacio de color perceptual si añades `in oklch` al degradado. Así el centro de una mezcla amplia queda tan vivo como sus extremos. Da primero una versión en hex a los navegadores antiguos.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

El degradado Ultra con una alternativa de tres paradas, y una versión oklch de dos paradas que se mantiene viva en el centro sin una parada de apoyo.

## Dónde funcionan mejor los degradados vibrantes

El color vibrante se gana la atención, así que gástalo donde la atención es todo el trabajo: un feed que se desliza, una miniatura entre otras veinte, un póster al otro lado de la calle. Funciona peor donde hay que leer mucho rato, como documentos, paneles y artículos largos, donde un campo saturado cansa la vista en pocos párrafos. Ahí, limita el degradado vibrante a una cabecera o a un solo botón y deja que una superficie tranquila sostenga el resto.

| Uso | Prueba | Tamaño |
| --- | --- | --- |
| Publicación de rebajas o lanzamiento | Mango, Flamenco | 1080×1350 |
| Miniatura de YouTube | Violeta eléctrico, Brasa | 1280×720 |
| Portada de app o producto | Laguna, Glaciar | 1920×1080 |
| Portada de historia o Reel | Refresco de lima, Cereza pop | 1080×1920 |
| Portada de playlist | Rosa sobre noche, Ultra | 1080×1080 |
| Póster A4 de evento | Ultra, Ascenso cobalto | 2480×3508 |

Seis lugares donde los degradados vibrantes rinden, con códigos de la cuadrícula anterior y el tamaño al que diseñar.

La impresión es el único sitio donde cabe esperar un susto. Los colores de pantalla más brillantes, sobre todo los azules eléctricos, los rosas intensos y los verdes ácidos, quedan fuera de lo que pueden reproducir las tintas CMYK y salen bastante más apagados en papel. [RGB o CMYK](https://gradiently.design/es/guide/rgb-vs-cmyk) explica por qué; elige tú versiones algo más profundas y pide una prueba antes de una tirada.

## Texto sobre un degradado vibrante

Los fondos saturados cambian mucho de brillo de un extremo a otro, así que un único color de texto que se lee en el extremo oscuro puede desaparecer en el claro. Usa solo blanco o casi negro, coloca el titular donde el degradado es más profundo o más pálido, y comprueba el contraste en el peor punto, no en la media. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) tiene las cifras a las que apuntar.

Una publicación vertical de rebajas con tipografía gruesa sobre un fondo brillante y saturado

Un fondo llamativo con tipografía sencilla y gruesa. El color vende; las palabras solo tienen que ser legibles.

Aquí es donde un Mark de Gradiently ayuda con el color brillante: sabe dónde están las palabras, oscurece o aclara el color cerca de las letras, y la tinta automática elige texto claro u oscuro para cada línea a partir de su propia paleta. Un estilo saturado sigue siendo legible en cualquier tamaño sin una caja ni una sombra detrás del titular. Para estilos neón en concreto, consulta [degradados neón](https://gradiently.design/es/guide/neon-gradients); para el otro extremo del dial, [degradados sutiles](https://gradiently.design/es/guide/subtle-gradients).

## FAQ

### ¿Qué hace que un degradado se vea vibrante?

Colores muy saturados que están cerca entre sí en la rueda de color, con un cambio claro de luminosidad de un extremo a otro.

### ¿Por qué algunas combinaciones de colores brillantes molestan a la vista?

Los matices opuestos de luminosidad parecida colocados borde con borde parecen titilar. Sepáralos con un paso más oscuro o más claro, o elige colores vecinos.

### ¿Cómo evito que un degradado brillante se vuelva gris en el centro?

Usa matices vecinos, añade una parada intermedia o mezcla en oklch con `linear-gradient(in oklch, ...)` en los navegadores que lo admiten.

### ¿Qué color de texto funciona sobre un degradado vibrante?

Blanco o casi negro. Comprueba el contraste en el punto más brillante y en el más oscuro detrás de las palabras, no solo en el centro.

### ¿Qué degradado vibrante va bien para la portada de una web?

Prueba `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` con texto blanco.