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

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

L’arc-en-ciel par défaut a une bande jaune criarde et un trou bleu sombre. Corrigez la luminosité, choisissez votre arc, et le spectre devient l’un des outils les plus joyeux à votre disposition.

## The short version

- Un dégradé arc-en-ciel traverse les teintes du spectre, et la version par défaut fait bon marché parce que ses couleurs ont des luminosités très différentes.
- En OKLCH, le jaune pur a une luminosité d’environ 97 % alors que le bleu pur se situe près de 45 %, ce qui explique la bande claire et la bande sombre d’un arc-en-ciel par défaut.
- Un dégradé arc-en-ciel paraît conçu quand chaque arrêt garde une luminosité proche, avec une chroma un peu réduite, et n’utilise que la partie du spectre dont vous avez besoin.
- Le CSS peut fondre un arc-en-ciel pour vous avec `linear-gradient(in oklch longer hue, ...)`, qui fait tout le tour de la roue des teintes entre deux couleurs.
- Un texte sur un arc-en-ciel a besoin d’une zone calme ou d’un bandeau derrière lui, car le contraste change sur toute la longueur du dégradé.

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](https://gradiently.design/fr/guide/color-codes-explained) 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.

| Couleur | Hex | Luminosité HSL | Luminosité OKLCH |
| --- | --- | --- | --- |
| Rouge | `#ff0000` | 50 % | 62,8 % |
| Jaune | `#ffff00` | 50 % | 96,8 % |
| Vert | `#00ff00` | 50 % | 86,6 % |
| Cyan | `#00ffff` | 50 % | 90,5 % |
| Bleu | `#0000ff` | 50 % | 45,2 % |
| Magenta | `#ff00ff` | 50 % | 70,2 % |

Pour HSL, elles sont toutes aussi claires. La luminosité perçue va de 45 % à 97 %, d’où l’effet de bandes de l’arc-en-ciel par défaut.

- Arc-en-ciel HSL par défaut: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Arc-en-ciel à luminosité égale: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Le même tour de la roue des teintes. Le second garde chaque arrêt près de 72 % de luminosité OKLCH, si bien qu’aucune couleur ne ressort ni ne s’enfonce.

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

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. **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. **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. **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. **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](https://gradiently.design/fr/guide/grainy-gradients) 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.

- Spectre équilibré: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Arc-en-ciel pastel: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Roue du spectre: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Arc aurore: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Arc lagon: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Arc crépuscule: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisme sur noir: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Reflet nacré: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Huit dégradés arc-en-ciel. L’équilibré et le pastel gardent chaque arrêt à une même luminosité ; les arcs choisissent un coin de la roue ; les deux derniers utilisent le spectre comme lumière.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) pour votre public.

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

La première règle dessine un arc-en-ciel complet à partir d’une seule couleur. La seconde dessine un arc, en prenant le chemin le plus court entre deux teintes.

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](https://gradiently.design/fr/guide/css-gradient-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é](https://gradiently.design/fr/guide/text-on-gradient) passe en revue les options.

Un post carré avec les mots Bonjour, la couleur traversant un dégradé arc-en-ciel, certaines lettres moins lisibles

Sans aide, les mots traversent toutes les teintes et leur contraste ne cesse de changer.

Le même post carré où le dégradé s’adoucit derrière les mots Bonjour, la couleur pour que le texte se lise nettement

Avec un champ qui se calme derrière les mots, l’arc-en-ciel reste joyeux et la ligne se lit.

## 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](https://gradiently.design/fr/guide/holographic-gradients)
- **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

> **Choisissez d’abord l’arc** Avant de sortir le spectre complet, demandez-vous quelles trois ou quatre teintes portent l’ambiance. La plupart des créations arc-en-ciel qui paraissent haut de gamme sont en réalité des arcs.

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.

## FAQ

### Comment faire un dégradé arc-en-ciel en CSS ?

Utilisez `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` pour un arc-en-ciel doux et régulier, précédé d’un dégradé à arrêts hexadécimaux comme solution de repli.

### Pourquoi mon dégradé arc-en-ciel a-t-il une bande jaune trop claire ?

Le jaune est perçu comme bien plus clair que le bleu ou le rouge à luminosité HSL égale. Gardez chaque arrêt à une même luminosité perçue, par exemple 72 % en OKLCH, pour supprimer la bande.

### Quels codes hexadécimaux pour un dégradé arc-en-ciel pastel ?

Essayez `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` et `#e6c3ee`, qui ont tous une luminosité élevée et proche.

### Peut-on poser du texte sur un dégradé arc-en-ciel ?

Oui, mais le contraste change d’un bout à l’autre du dégradé. Placez le texte sur la zone la plus calme, sur un bandeau ou une carte, ou utilisez un arc-en-ciel pastel avec un texte sombre en vérifiant chaque point derrière les mots.