# Degradados iridiscentes: cambios de color nacarados

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

La iridiscencia es la prima discreta de lo holográfico: una perla, una pompa de jabón, el interior de una concha. Estos son los colores, los códigos y las reglas que hacen que parezca una superficie y no un arcoíris.

## The short version

- Un degradado iridiscente mezcla varios tintes pálidos muy próximos, normalmente lila, menta, rosa empolvado, cielo y crema, de modo que la superficie parece cambiar de color al recorrerla con la vista.
- La iridiscencia se diferencia del diseño holográfico en la intensidad: lo holográfico recorre todo el arcoíris con alta saturación, mientras que lo iridiscente se mantiene suave, pálido y casi neutro.
- El efecto nacarado viene de una base clara, poca saturación, un brillo blanco y tintes que están uno junto a otro en la rueda cromática.
- La iridiscencia oscura, como una mancha de aceite o el caparazón de un escarabajo, usa la misma idea sobre un fondo casi negro con turquesa profundo, violeta y bronce.
- El texto sobre un fondo iridiscente necesita una zona tranquila y uniforme detrás, porque los tintes pálidos cambiantes dan poco contraste al texto claro y un contraste inquieto al texto oscuro.

Un **degradado iridiscente** es una mezcla de tintes pálidos muy próximos, típicamente lila, menta, rosa empolvado, azul cielo y un crema cálido, sobre una base clara con un suave brillo blanco. El efecto imita cosas iridiscentes reales: perlas, pompas de jabón, el interior de una concha de abulón. Los colores son delicados y cambian poco a poco por la superficie, así que se lee como un brillo y no como una franja de color. Los códigos de abajo están listos para pegar en CSS o en cualquier herramienta de diseño que acepte hex.

## Códigos de degradado iridiscente

Cada uno parte de un casi blanco o un casi negro y añade tintes vecinos entre sí. Copia uno tal cual, o cambia una sola parada para hacerlo tuyo.

- Perla: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Ópalo: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Pompa de jabón: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abulón: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Mancha de aceite: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Caparazón de escarabajo: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Cuatro mezclas iridiscentes claras y dos oscuras. Las seis mantienen sus tintes con una intensidad parecida, que es lo que evita que se lean como un arcoíris.

Fíjate en lo que tienen en común las claras: ninguna parada está totalmente saturada y el punto más claro es blanco puro o casi puro. Lleva cualquier parada a un color fuerte y la perla se convierte en un [degradado pastel](https://gradiently.design/es/guide/pastel-gradients) o, más aún, en un arcoíris.

## Iridiscente frente a holográfico

La gente suele usar las dos palabras para lo mismo, pero en diseño describen aspectos distintos. Lo holográfico imita las pegatinas de lámina y los hologramas de las tarjetas de crédito: todos los tonos, alta saturación, bandas duras. Lo iridiscente imita superficies naturales que cambian de color con discreción. Si quieres la versión más ruidosa, [degradados holográficos](https://gradiently.design/es/guide/holographic-gradients) la trata por completo.

| Cualidad | Iridiscente | Holográfico |
| --- | --- | --- |
| Saturación | Baja, tintes pálidos | Alta, arcoíris completo |
| Base | Casi blanco o casi negro | A menudo plata o los propios colores |
| Transiciones | Largas y suaves | Cortas, a menudo con bandas |
| Referencia del mundo real | Perla, concha, pompa de jabón, aceite sobre agua | Lámina, pegatinas, hologramas de seguridad |
| Ambiente | Sereno, refinado, cuidado de la piel, novias | Juguetón, ruidoso, Y2K, música |

La prueba más rápida: entrecierra los ojos. Si aún ves tonos distintos, es holográfico. Si ves una superficie suave y pálida con un toque de color, es iridiscente.

## Cómo construir un degradado iridiscente desde cero

1. **Elige la base** La iridiscencia clara parte del blanco o de un blanco roto ligeramente cálido como `#fbf9f6`. La iridiscencia oscura parte de un negro azulado como `#0d0f1a`. La base debe cubrir un tercio o más de la superficie.
2. **Elige de tres a cinco tintes vecinos** Recorre la rueda cromática en pasos pequeños: de lila a cielo, a menta, a crema, a rosa empolvado. Mantenlos con una luminosidad parecida, para que ninguno salte al frente.
3. **Baja la saturación** Si un tinte parece un color al que podrías poner nombre desde el otro lado de la sala, es demasiado fuerte. En las versiones claras, busca tintes que sean sobre todo blancos con un rastro de tono.
4. **Añade un brillo** Un pequeño punto radial blanco, desplazado hacia una esquina, le dice al ojo de dónde viene la luz. Uno basta; dos empiezan a parecer un botón brillante.
5. **Termina con grano fino** Las mezclas pálidas forman bandas con facilidad en pantalla. Un poco de ruido rompe los escalones, algo que [bandas en los degradados](https://gradiently.design/es/guide/gradient-banding) explica con la solución.

El paso que más importa es el tercero. La mayoría de los diseños iridiscentes que fallan son sencillamente demasiado coloridos. La perla real es abrumadoramente blanca; el color es algo que notas en segundo lugar.

- Blanco concha: #fbf9f6
- Brillo lila: #ece6f6
- Brillo menta: #dff3f4
- Brillo cielo: #e4ecf7
- Brillo rosado: #fbe7f0
- Brillo crema: #fff6e0
- Tinta grafito: #3d3a4a

Una paleta de colores iridiscente funcional: una base, cinco brillos y una tinta oscura para el texto. La tinta es lo que da a los colores pálidos algo contra lo que apoyarse.

## CSS iridiscente con cambio de color al pasar el cursor

En la web puedes hacer que el brillo se mueva cuando alguien apunta a él, que es lo único que hace una perla impresa y no puede hacer una imagen plana. Registrar el ángulo con `@property` permite al navegador animarlo con suavidad; los navegadores sin soporte simplemente muestran el estado de reposo. La [página de MDN sobre @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) tiene los detalles.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}
```

Una tarjeta perla cuyo brillo gira al pasar el cursor. La capa radial blanca es el brillo; la capa lineal lleva los tintes.

Girar el ángulo es más suave que desplazar la posición del fondo, porque los tintes se quedan en su sitio y solo cambia su dirección, lo que se parece más a cómo capta la luz una superficie real. Para mezclas más uniformes, ayuda definir las paradas en OKLCH; mira [degradados OKLCH en CSS](https://gradiently.design/es/guide/css-gradient-oklch).

## Poner palabras sobre un fondo iridiscente

La iridiscencia pálida es una superficie difícil para el texto. El texto blanco desaparece sobre ella, y el texto oscuro solo funciona si la zona de detrás es uniforme. Usa una tinta oscura tomada de la paleta y no negro puro, mantén las palabras sobre la parte más tranquila de la mezcla y deja el cambio más movido en una esquina. Las reglas generales están en [texto sobre un fondo con degradado](https://gradiently.design/es/guide/text-on-gradient).

Una publicación vertical pálida y nacarada de lanzamiento de producto donde el titular cruza la parte más brillante del reflejo y se ve tenue

Las palabras colocadas directamente sobre los tintes cambiantes pierden sus bordes donde el brillo es más intenso.

La misma publicación nacarada de lanzamiento de producto con una zona uniforme detrás del titular y el cambio de color movido a una esquina

Con la región más tranquila detrás del titular y el cambio de color apartado, la misma publicación se lee de un vistazo.

Aquí es donde un Mark de Gradiently se gana el sueldo. Un Mark sabe dónde están las palabras: mueve su región más tranquila detrás de ellas y la tinta automática elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, de modo que una superficie nacarada y suave sigue siendo legible en cada tamaño sin cajas ni sombras.

## Dónde funciona mejor la iridiscencia

- **Cuidado de la piel y belleza**: publicaciones de lanzamiento, cartas de tonos y pegatinas de packaging. Sugiere rocío y luz sobre la piel; mira [diseño de marcas de cuidado de la piel](https://gradiently.design/es/guide/skincare-brand-design).
- **Novias y bodas**: invitaciones y save the dates sobre perla, con tinta grafito y márgenes generosos.
- **Joyería**: un fondo perla u ópalo detrás de las fotos de producto resalta las piedras sin competir con ellas.
- **Música y vida nocturna**: la mezcla oscura de mancha de aceite en una historia de 1080×1920, con una línea de texto blanco sobre la zona más oscura.
- **Páginas de producto tecnológico**: una cabecera perla con el brillo al pasar el cursor de arriba, detrás de un titular corto.

La iridiscencia combina bien con tipografías serif limpias o sans ligeras y un espaciado amplio. Choca con las sombras proyectadas pesadas, los contornos gruesos y los acentos saturados. Si quieres metal en lugar de perla, el [efecto cromado](https://gradiently.design/es/guide/chrome-effect) es el hermano más duro y frío.

## FAQ

### ¿Qué colores forman un degradado iridiscente?

Lila pálido, menta, azul cielo, rosa empolvado y crema sobre una base blanca, más un suave brillo blanco. Para una versión oscura, turquesa profundo, violeta y bronce sobre un negro azulado.

### ¿Qué diferencia hay entre iridiscente y holográfico?

Lo iridiscente es suave y pálido, como una perla o una pompa de jabón. Lo holográfico recorre todo el arcoíris con alta saturación, como las pegatinas de lámina.

### ¿Cómo hago un efecto iridiscente en CSS?

Superpón un brillo radial blanco a un degradado lineal de tintes pálidos vecinos. Para que cambie, registra un ángulo con `@property` y cámbialo al pasar el cursor.

### ¿Es lo mismo nacarado que iridiscente?

Lo nacarado es un tipo de iridiscencia: sobre todo blanco con un leve cambio de color. Lo iridiscente también abarca cambios más oscuros como el aceite sobre el agua o el caparazón de un escarabajo.

### ¿Qué color de fuente funciona sobre un fondo iridiscente?

Una tinta oscura de la paleta, como un grafito con un toque de violeta, colocada sobre la zona más tranquila. El texto blanco rara vez se lee sobre una iridiscencia pálida.