# Dégradés irisés : reflets nacrés avec codes

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

L’irisation est la cousine discrète de l’holographique : une perle, une bulle de savon, l’intérieur d’un coquillage. Voici les couleurs, les codes et les règles qui en font une surface et non un arc-en-ciel.

## The short version

- Un dégradé irisé fond plusieurs teintes pâles et proches, le plus souvent lilas, menthe, rose poudré, bleu ciel et crème, si bien que la surface semble changer de couleur au fil du regard.
- L’irisé se distingue du design holographique par son intensité : l’holographique déroule tout l’arc-en-ciel en haute saturation, alors que l’irisé reste doux, pâle et surtout neutre.
- L’effet nacré vient d’une base claire, d’une faible saturation, d’un reflet blanc et de teintes voisines sur le cercle chromatique.
- L’irisé sombre, comme une nappe d’huile ou une carapace de scarabée, reprend la même idée sur un fond presque noir avec du bleu canard profond, du violet et du bronze.
- Le texte sur un fond irisé a besoin d’une zone calme et uniforme derrière lui, car des teintes pâles et changeantes donnent un faible contraste au texte clair et un contraste agité au texte sombre.

Un **dégradé irisé** est un fondu de teintes pâles très proches, typiquement lilas, menthe, rose poudré, bleu ciel et crème chaude, posées sur une base claire avec un doux reflet blanc. L’effet imite de vraies choses irisées : les perles, les bulles de savon, l’intérieur d’un ormeau. Les couleurs sont douces et changent progressivement sur la surface, si bien qu’on lit un lustre plutôt qu’une bande de couleur. Les codes ci-dessous sont prêts à coller dans le CSS ou dans tout outil de design qui accepte l’hexadécimal.

## Codes de dégradé irisé

Chacun part d’un quasi-blanc ou d’un quasi-noir et ajoute des teintes voisines. Copiez-en un tel quel, ou changez un seul arrêt pour le personnaliser.

- Perle: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opale: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Bulle de savon: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Ormeau: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Nappe d’huile: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Carapace de scarabée: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Quatre fondus irisés clairs et deux sombres. Les six gardent des teintes d’intensité proche, ce qui évite qu’ils se lisent comme un arc-en-ciel.

Remarquez ce que les clairs ont en commun : aucun arrêt n’est pleinement saturé, et le point le plus clair est blanc pur ou presque. Poussez un arrêt vers une couleur forte et la perle devient un [dégradé pastel](https://gradiently.design/fr/guide/pastel-gradients) ou, plus loin encore, un arc-en-ciel.

## Irisé ou holographique

On emploie souvent les deux mots pour la même chose, mais en design ils décrivent des looks différents. L’holographique imite les autocollants métallisés et les hologrammes des cartes bancaires : toutes les teintes, haute saturation, bandes nettes. L’irisé imite les surfaces naturelles qui changent de couleur en douceur. Pour la version plus bruyante, [les dégradés holographiques](https://gradiently.design/fr/guide/holographic-gradients) la détaille en entier.

| Qualité | Irisé | Holographique |
| --- | --- | --- |
| Saturation | Faible, teintes pâles | Haute, tout l’arc-en-ciel |
| Base | Quasi-blanc ou quasi-noir | Souvent argent ou les couleurs elles-mêmes |
| Transitions | Longues et douces | Courtes, souvent en bandes |
| Référence réelle | Perle, coquillage, bulle de savon, huile sur l’eau | Feuille métallisée, autocollants, hologrammes de sécurité |
| Ambiance | Calme, raffinée, soins de la peau, mariage | Joueuse, bruyante, Y2K, musique |

Le test le plus rapide : plissez les yeux. Si vous voyez encore des teintes distinctes, c’est de l’holographique. Si vous voyez une surface douce et pâle avec une pointe de couleur, c’est de l’irisé.

## Comment construire un dégradé irisé de zéro

1. **Choisissez la base** L’irisé clair part du blanc ou d’un blanc cassé légèrement chaud comme `#fbf9f6`. L’irisé sombre part d’un noir bleuté comme `#0d0f1a`. La base doit couvrir un tiers de la surface ou plus.
2. **Prenez trois à cinq teintes voisines** Parcourez le cercle chromatique à petits pas : du lilas au ciel, à la menthe, à la crème, au rose poudré. Gardez-les à une luminosité proche, pour qu’aucune ne saute aux yeux.
3. **Baissez la saturation** Si une teinte ressemble à une couleur qu’on pourrait nommer d’un bout de la pièce, elle est trop forte. Pour les versions claires, visez des teintes surtout blanches avec une trace de couleur.
4. **Ajoutez un reflet** Une petite tache radiale blanche, décalée vers un angle, dit à l’œil d’où vient la lumière. Un seul suffit ; deux commencent à faire bouton brillant.
5. **Terminez par un grain fin** Les fondus pâles forment facilement des bandes à l’écran. Un peu de bruit casse les paliers, ce que [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) explique avec la solution.

L’étape la plus importante est la troisième. La plupart des designs irisés qui échouent sont tout simplement trop colorés. La vraie perle est massivement blanche ; la couleur, on la remarque en second.

- Blanc coquille: #fbf9f6
- Lustre lilas: #ece6f6
- Lustre menthe: #dff3f4
- Lustre ciel: #e4ecf7
- Lustre rose poudré: #fbe7f0
- Lustre crème: #fff6e0
- Encre graphite: #3d3a4a

Une palette irisée qui marche : une base, cinq lustres et une encre sombre pour le texte. L’encre donne aux couleurs pâles quelque chose contre quoi se détacher.

## Un irisé en CSS avec changement de couleur au survol

Sur le web, vous pouvez faire bouger le lustre quand on le pointe, seule chose qu’une perle imprimée fait et qu’une image plate ne peut pas faire. Déclarer l’angle avec `@property` permet au navigateur de l’animer en douceur ; les navigateurs sans prise en charge affichent simplement l’état de repos. [La page MDN sur @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) donne les détails.

```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; }
}
```

Une carte perle dont le lustre tourne au survol. La couche radiale blanche est le reflet ; la couche linéaire porte les teintes.

Faire tourner l’angle est plus doux que faire glisser la position du fond, car les teintes restent en place et seule leur direction change, ce qui ressemble davantage à la façon dont une vraie surface accroche la lumière. Pour des fondus qui se mêlent plus uniformément, définir les arrêts en OKLCH aide ; voyez [les dégradés OKLCH en CSS](https://gradiently.design/fr/guide/css-gradient-oklch).

## Placer des mots sur un fond irisé

L’irisé pâle est une surface difficile pour le texte. Le blanc y disparaît, et le texte sombre ne fonctionne que si la zone derrière lui est uniforme. Utilisez une encre sombre tirée de la palette plutôt que du noir pur, gardez les mots sur la partie la plus calme du fondu et laissez le changement le plus agité dans un coin. Les règles générales figurent dans [le texte sur un fond en dégradé](https://gradiently.design/fr/guide/text-on-gradient).

Une publication de lancement de produit pâle et nacrée où le titre passe sur la partie la plus vive du lustre et paraît faible

Des mots posés directement sur les teintes changeantes perdent leurs bords là où le lustre est le plus vif.

La même publication nacrée de lancement de produit avec une zone uniforme derrière le titre et le changement de couleur déplacé dans un coin

Avec la zone la plus calme derrière le titre et le changement de couleur repoussé sur le côté, la même publication se lit d’un coup d’œil.

C’est là qu’un Mark Gradiently fait ses preuves. Un Mark sait où sont les mots : il place sa zone la plus calme derrière eux et l’encre automatique choisit un texte clair ou foncé ligne par ligne à partir de la palette du Mark, si bien qu’une surface nacrée et douce reste lisible à chaque taille, sans cadres ni ombres.

## Où l’irisé fonctionne le mieux

- **Soins de la peau et beauté** : publications de lancement, nuanciers et autocollants d’emballage. Il évoque la rosée et la lumière sur la peau ; voyez [le design de marque de soins de la peau](https://gradiently.design/fr/guide/skincare-brand-design).
- **Mariage** : invitations et save the dates sur perle, avec de l’encre graphite et de larges marges.
- **Bijouterie** : un fond perle ou opale derrière les photos de produits fait ressortir les pierres sans leur faire concurrence.
- **Musique et vie nocturne** : le fondu sombre en nappe d’huile sur une story 1080×1920, avec une ligne de texte blanc sur la zone la plus sombre.
- **Pages produit tech** : une bannière perle avec le lustre au survol ci-dessus, gardée derrière un titre court.

L’irisé s’accorde bien avec une serif épurée ou une sans serif légère et un large espacement. Il jure avec les ombres portées lourdes, les contours épais et les accents saturés. Si vous voulez du métal plutôt que de la perle, [l’effet chrome](https://gradiently.design/fr/guide/chrome-effect) est le cousin plus dur et plus froid.

## FAQ

### Quelles couleurs composent un dégradé irisé ?

Lilas pâle, menthe, bleu ciel, rose poudré et crème sur une base blanche, plus un doux reflet blanc. Pour une version sombre, utilisez du bleu canard profond, du violet et du bronze sur un noir bleuté.

### Quelle différence entre irisé et holographique ?

L’irisé est doux et pâle, comme une perle ou une bulle de savon. L’holographique déroule tout l’arc-en-ciel en haute saturation, comme les autocollants métallisés.

### Comment faire un effet irisé en CSS ?

Superposez un reflet radial blanc à un dégradé linéaire de teintes voisines et pâles. Pour le faire bouger, déclarez un angle avec `@property` et changez-le au survol.

### Nacré et irisé, est-ce pareil ?

Le nacré est une forme d’irisation : surtout blanc avec un faible changement de couleur. L’irisé couvre aussi des changements plus sombres comme l’huile sur l’eau ou une carapace de scarabée.

### Quelle couleur de police fonctionne sur un fond irisé ?

Une encre sombre tirée de la palette, comme un graphite à pointe de violet, placée sur la zone la plus calme. Le texte blanc se lit rarement sur de l’irisé pâle.