Degradados arcoíris que no parecen un ajuste por defecto

Un degradado arcoíris recorre los tonos del espectro, del rojo al naranja, el amarillo, el verde, el azul y el violeta. La versión que te dan la mayoría de las herramientas parece un ajuste por defecto porque salta en luminosidad: una franja amarilla chillona, una banda azul oscura y bordes duros entre ellas. Un arcoíris que parece diseñado mantiene todos los colores con una luminosidad parecida, usa algo menos de saturación y a menudo cubre solo una parte del espectro.

Esta guía muestra por qué el ajuste por defecto se ve mal, tres formas de arreglarlo, códigos de arcoíris para copiar y el CSS que crea arcoíris suaves en los navegadores modernos. Si el tono, la luminosidad y el croma son nuevos para ti, los códigos de color explicados los cubren primero.

Por qué el arcoíris por defecto parece barato

El arcoíris clásico se construye en HSL avanzando el tono con la saturación y la luminosidad fijas. La luminosidad de HSL es una fórmula, no una medida de lo claros que se ven los colores. A tu ojo, el amarillo puro es mucho más claro que el azul puro, aunque HSL diga que ambos están al 50%. OKLCH mide la luminosidad percibida, y los números muestran el problema con claridad.

Cómo hacer que un degradado arcoíris parezca diseñado

1. 1

   Iguala la luminosidad

   Elige una sola luminosidad percibida, por ejemplo el 72% en OKLCH, y mantén ahí todas las paradas. Este único cambio elimina la franja amarilla y el agujero azul.

2. 2

   Baja un poco el croma

   Los colores de pantalla totalmente saturados se pelean entre sí. Un croma de alrededor de 0,12 en OKLCH mantiene cada tono vivo y dentro de lo que una pantalla normal puede mostrar.

3. 3

   Usa un arco, no la rueda entera

   Tres o cuatro tonos vecinos, como del coral al dorado o del verde azulado al violeta, se leen como una elección pensada. El espectro completo parece una carta de ajuste, salvo que sea precisamente lo que buscas.

4. 4

   Dale un fondo

   Un arcoíris sobre blanco parece un juguete infantil; el mismo arcoíris surgiendo de un casi negro parece luz a través de un prisma. Decide cuál quieres.

5. 5

   Añade textura o suavidad

   El grano, el desenfoque o una caída radial lenta convierten las bandas de color en luz. Mira degradados con grano para la parte del grano.

Códigos de degradados arcoíris para copiar

Los tres primeros cubren todo el espectro con distintos niveles de luminosidad. El resto son arcos: una parte del arcoíris elegida por su ambiente, que es como funcionan en realidad la mayoría de las identidades arcoíris.

Arcoíris suaves en CSS con interpolación de tono en OKLCH

El CSS moderno puede dar la vuelta a la rueda de tonos por ti. Si fijas la interpolación en oklch y el método de tono en longer hue, el navegador toma el camino largo entre dos colores, así que dos paradas con el mismo tono producen un arcoíris completo y uniforme. Funciona en las versiones actuales de Chrome, Edge, Safari y Firefox; consulta la tabla de compatibilidad de MDN según tu público.

.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}

Mantén un croma moderado cuando lo hagas. Con un croma alto, algunos tonos, sobre todo el azul y el violeta, quedan fuera de lo que una pantalla sRGB normal puede mostrar, y el navegador tiene que comprimirlos, lo que devuelve las bandas desiguales. Hay más sobre esto en degradados CSS más suaves con OKLCH.

Texto sobre un degradado arcoíris

Un arcoíris es el fondo más difícil para el texto porque el contraste cambia a lo largo de toda su extensión. Un texto oscuro que se lee bien sobre el verde azulado puede desaparecer sobre el violeta. Coloca las palabras sobre la parte más tranquila, ponlas sobre una banda o una tarjeta discreta, o usa un arcoíris pastel con texto oscuro y comprueba los puntos más claros y más oscuros detrás de cada línea. Texto sobre un degradado repasa las opciones.

Dónde encajan los degradados arcoíris

• Herramientas creativas y productos de color, donde el espectro muestra amplitud
• Marcas infantiles y educación, normalmente en la versión pastel
• Música, festivales y vida nocturna, como un prisma sobre un fondo oscuro
• Estéticas holográficas e iridiscentes, como un brillo de perla pálido; mira degradados holográficos
• Campañas del Orgullo, donde la bandera arcoíris tiene su propio significado y sus propias seis franjas, así que úsala con intención y no como decoración

Un Mark de Gradiently puede tener hasta ocho colores, suficientes para un arcoíris completo y uniforme con un material y grano encima. Puedes construir uno control a control en la Forge.