Degradados vibrantes: códigos saturados que no vibran

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

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.

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 explica cuándo los opuestos merecen la pena.

Reglas para crear tu propio degradado vibrante

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 y, a un nivel más técnico, en interpolación de degradados. La saturación es un dial, no un interruptor; la saturación en diseño 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.

.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 */
}

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.

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 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 tiene las cifras a las que apuntar.

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; para el otro extremo del dial, degradados sutiles.