Des dégradés arc-en-ciel qui ne ressemblent pas à un préréglage

Un dégradé arc-en-ciel traverse les teintes du spectre, du rouge à l’orange, au jaune, au vert, au bleu et au violet. La version que donnent la plupart des outils fait préréglage parce qu’elle saute en luminosité : une bande jaune criarde, une bande bleue sombre et des bords nets entre elles. Un arc-en-ciel qui paraît conçu garde toutes les couleurs à une luminosité proche, utilise un peu moins de saturation, et ne couvre souvent qu’une partie du spectre.

Ce guide montre pourquoi le préréglage paraît faux, trois façons de le corriger, des codes d’arc-en-ciel à copier et le CSS qui crée des arcs-en-ciel réguliers dans les navigateurs modernes. Si la teinte, la luminosité et la chroma sont nouvelles pour vous, les codes couleur expliqués les présente d’abord.

Pourquoi l’arc-en-ciel par défaut fait bon marché

L’arc-en-ciel classique se construit en HSL en faisant varier la teinte à saturation et luminosité fixes. Or la luminosité HSL est une formule, pas une mesure de la clarté perçue des couleurs. Pour votre œil, le jaune pur est bien plus clair que le bleu pur, même si HSL les note tous deux à 50 %. OKLCH mesure la luminosité perçue, et les chiffres montrent clairement le problème.

Comment donner à un dégradé arc-en-ciel un air conçu

1. 1

   Égalisez la luminosité

   Choisissez une seule luminosité perçue, par exemple 72 % en OKLCH, et gardez-y chaque arrêt. Ce seul changement supprime la bande jaune et le trou bleu.

2. 2

   Baissez un peu la chroma

   Les couleurs d’écran pleinement saturées se battent entre elles. Une chroma d’environ 0,12 en OKLCH garde chaque teinte vive tout en restant dans ce que les écrans ordinaires peuvent afficher.

3. 3

   Utilisez un arc, pas toute la roue

   Trois ou quatre teintes voisines, comme du corail à l’or ou du bleu canard au violet, se lisent comme un choix réfléchi. Le spectre complet ressemble à une mire, sauf si c’est le propos.

4. 4

   Donnez-lui un fond

   Un arc-en-ciel sur blanc évoque un jouet d’enfant ; le même arc-en-ciel surgissant d’un presque noir évoque la lumière à travers un prisme. Décidez lequel vous voulez.

5. 5

   Ajoutez de la texture ou de la douceur

   Du grain, du flou ou une lente décroissance radiale transforment des bandes de couleur en lumière. Voyez les dégradés granuleux pour le grain.

Des codes de dégradé arc-en-ciel à copier

Les trois premiers couvrent tout le spectre à différents niveaux de luminosité. Les suivants sont des arcs : une partie de l’arc-en-ciel choisie pour une ambiance, ce qui est la façon dont fonctionnent en réalité la plupart des identités arc-en-ciel.

Des arcs-en-ciel réguliers en CSS grâce à l’interpolation des teintes en OKLCH

Le CSS moderne peut faire le tour de la roue des teintes à votre place. Régler l’interpolation sur oklch et la méthode de teinte sur longer hue fait passer le navigateur par le chemin le plus long entre deux couleurs : deux arrêts de même teinte produisent alors un arc-en-ciel complet et régulier. Cela fonctionne dans les versions actuelles de Chrome, Edge, Safari et Firefox ; consultez le tableau de compatibilité de MDN pour votre public.

.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));
}

Gardez une chroma modérée dans ce cas. À chroma élevée, certaines teintes, surtout le bleu et le violet, sortent de ce qu’un écran sRGB ordinaire peut afficher, et le navigateur doit les ramener dans la gamme, ce qui fait revenir des bandes irrégulières. Plus de détails dans des dégradés CSS plus doux avec OKLCH.

Poser du texte sur un dégradé arc-en-ciel

Un arc-en-ciel est le fond le plus difficile pour le texte, car le contraste change sur toute sa longueur. Un texte sombre bien lisible sur du bleu canard peut disparaître sur du violet. Placez les mots sur la partie la plus calme, posez-les sur un bandeau ou une carte discrète, ou utilisez un arc-en-ciel pastel avec un texte sombre, en vérifiant les points les plus clairs et les plus sombres derrière chaque ligne. Le texte sur un dégradé passe en revue les options.

Où les dégradés arc-en-ciel ont leur place

• Outils créatifs et produits liés à la couleur, où le spectre montre l’étendue des possibles
• Marques pour enfants et éducation, en général dans la version pastel
• Musique, festivals et vie nocturne, comme un prisme sur fond sombre
• Styles holographiques et irisés, comme un reflet nacré pâle ; voyez les dégradés holographiques
• Campagnes des Fiertés, où le drapeau arc-en-ciel a son propre sens et ses six bandes : utilisez-le avec intention plutôt que comme décoration

Un Mark Gradiently peut contenir jusqu’à huit couleurs, assez pour un arc-en-ciel complet et régulier avec une matière et du grain par-dessus. Vous pouvez en construire un réglage par réglage dans la Forge.