L’essentiel en bref
- 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.
Sur cette page
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.
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 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 la détaille en entier.
Irisé
Holographique
Holographique
Irisé
Holographique
Irisé
Holographique
Holographique
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 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.
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 donne les détails.
@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; }
}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.
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é.
Des mots posés directement sur les teintes changeantes perdent leurs bords là où le lustre est le plus vif.
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.
- 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 est le cousin plus dur et plus froid.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil