# Dégradés pastel qui restent frais, pas sucrés à l’excès

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

Les pastels sont les dégradés les plus faciles à aimer et les plus faciles à forcer. Quelques règles les gardent proches de la lumière de printemps sur du papier plutôt que d’un gâteau d’anniversaire.

## The short version

- Un dégradé pastel fond des couleurs pâles, très claires et à la saturation douce, comme le rose poudré, le beurre, le lilas et la menthe.
- Le texte blanc ne fonctionne presque jamais sur un dégradé pastel ; une encre sombre d’une teinte voisine et profonde se lit bien plus facilement.
- Un dégradé pastel paraît sucré quand toutes les couleurs sont également douces et saturées, et frais quand une couleur est plus poudrée, plus profonde ou inattendue.
- Un fond blanc cassé façon papier sous la couleur pastel la fait paraître imprimée et calme plutôt que numérique.
- OKLCH rend les pastels faciles : gardez la luminosité et le chroma fixes et ne changez que la teinte.

Un **dégradé pastel** est un fondu de couleurs pâles et doucement teintées : rose poudré vers beurre, lilas vers ciel, menthe vers crème. Les pastels ont une luminosité élevée et très peu de saturation, ce qui explique leur côté doux, frais et amical. Le hic, c’est qu’il est aussi facile de les rendre trop sucrés, et presque impossible d’y lire du texte blanc. Les deux se corrigent avec une encre sombre, un fond papier et une couleur un peu moins évidente que les autres.

## Ce qui rend une couleur pastel

Un pastel est une couleur qui contient beaucoup de blanc : luminosité élevée, saturation faible à modérée. Dans l’espace colorimétrique OKLCH, la plupart des pastels se situent autour de 0,88 à 0,95 de luminosité avec un petit chroma. Cela donne une astuce pour des dégradés pastel réguliers : fixez la luminosité et le chroma, et ne changez que la teinte. Chaque couleur porte alors le même poids visuel, et aucune ne crie.

- Spectre pastel en OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))`
- Rose poudré et beurre: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)`
- Glycine: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)`
- Crème de pistache: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)`
- Ciel et menthe: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)`
- Brume pervenche: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)`
- Vieux rose et sauge: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)`
- Écume de mer: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)`
- Abricot rosé: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)`

Des paires pastel avec des codes à copier. La première est construite en OKLCH avec luminosité et chroma fixes : ses trois teintes paraissent donc également douces.

## Frais ou sucré : la différence

Les pastels basculent dans le sucré quand tout est également doux : rose, bleu layette et lilas à la même saturation, texte blanc, tout arrondi. Ils paraissent frais quand quelque chose dans le design fait contrepoids. Ce peut être une couleur plus poudrée et plus grise, une encre profonde pour les mots, un fond blanc cassé façon papier ou une typographie nette et sérieuse.

### Sucré

- Rose, bleu layette et lilas à intensité égale
- Texte blanc sur un fond pâle
- Fond blanc pur, parfaitement lisse
- Tous les éléments arrondis et bulleux

### Frais

- Une couleur poudrée ou inattendue, comme la sauge ou l’abricot
- Une encre profonde d’une teinte voisine
- Un fond blanc cassé façon papier avec un léger grain
- Un empattement assuré ou un sans-serif serré pour les mots

## Associer les pastels à une encre sombre

Un texte blanc sur un pastel échoue presque toujours au contraste, car les deux sont très clairs. La solution est une encre sombre : une version profonde de l’une des teintes du dégradé, comme l’indigo sur le lilas ou le bordeaux sur le rose poudré. Elle garde la palette dans une même famille et se lit confortablement. Voici des rapports mesurés pour des encres courantes sur fonds pastel. Pour les règles qui les sous-tendent, voyez [le contraste des couleurs et l’accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

| Couleur du texte | Sur rose poudré `#fbcfe8` | Sur lilas `#c4b5fd` |
| --- | --- | --- |
| `#ffffff` blanc | 1,4:1, échec | 1,9:1, échec |
| `#6b7280` gris moyen | 3,5:1, grand texte seulement | 2,6:1, échec |
| `#9d174d` bordeaux | 5,7:1, réussit AA | 4,3:1, grand texte seulement |
| `#312e81` indigo | 8,3:1, réussit AAA | 6,2:1, réussit AA |
| `#1f2937` encre | 10,6:1, réussit AAA | 8,0:1, réussit AAA |

Rapports de contraste selon les WCAG 2. Le texte courant demande au moins 4,5:1, le grand texte au moins 3:1. Plus le pastel est profond, plus l’encre doit être sombre.

- Papier: #f8f1ea
- Rose poudré: #fbcfe8
- Lilas: #e9d5ff
- Sauge: #d5e3d0
- Beurre: #fde68a
- Encre indigo: #312e81

Un système pastel complet : un fond papier, trois pastels, un accent chaud et une encre sombre pour chaque mot.

## Utiliser un fond papier

Les pastels sur du blanc pur peuvent paraître délavés, et à l’écran, le blanc pur est ce qu’il y a de plus lumineux. Un fond blanc cassé chaud, comme `#f8f1ea`, donne aux pastels un air voulu, comme de l’aquarelle ou de l’encre risographique sur papier. Laissez le pastel éclore depuis un coin et s’estomper dans le papier, plutôt que de remplir toute la surface.

- Éclosion rose sur papier: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)`
- Éclosion sauge sur papier: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)`
- Lilas venu d’en haut: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)`

Des éclosions pastel sur un fond papier. L’essentiel de la surface reste du papier, ce qui les garde calmes.

Un léger grain pousse plus loin la sensation de papier. Gardez-le très discret sur les pastels, car le bruit se voit facilement sur les couleurs claires ; les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donnent des quantités de départ.

## Un dégradé pastel en CSS

En CSS, le fond papier, l’éclosion et l’encre se rejoignent en quelques lignes. Mélanger les pastels en OKLCH évite que le milieu tourne à la craie quand les teintes sont éloignées, et un point de transition laisse le papier occuper l’essentiel de la surface.

```css
.pastel {
  background-color: #f8f1ea; /* paper */
  background-image:
    radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
    linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
  color: #312e81; /* indigo ink */
}
```

Des éclosions rose poudré et sauge sur un lavis du papier au lilas, avec de l’encre indigo pour les mots.

Gardez les paires pastel proches en teinte pour le résultat le plus net, comme dans les [dégradés à deux couleurs](https://gradiently.design/fr/guide/two-color-gradients). Quand vous voulez vraiment associer des pastels éloignés, faites-les passer par un lilas pâle ou un beurre pour que le milieu reste teinté au lieu de virer à un gris blanchâtre.

## Où les dégradés pastel fonctionnent

- Beauté, soins de la peau, bien-être et parfum
- Bébé, mariage, papeterie et cadeaux
- Campagnes de printemps et de Pâques, boulangeries et cafés
- Onboarding de logiciel apaisant et pages d’aide
- Esthétiques douces et rêveuses, surtout avec un reflet holographique ; voyez les [dégradés holographiques](https://gradiently.design/fr/guide/holographic-gradients)

Un post de soldes en portrait intitulé Édition de printemps sur un dégradé pastel doux avec des lettres sombres

Un champ pastel avec une encre sombre se lit comme calme et assuré à la taille d’un fil.

Une version verticale en story du même design de soldes pastel

Le même style en story, avec la couleur qui éclôt depuis le haut.

Si vous aimez la douceur mais voulez plus de contraste, faites un pas vers les [arrière-plans esthétiques](https://gradiently.design/fr/guide/aesthetic-backgrounds) avec un accent plus profond. Vous pouvez aussi chercher sur le Marché des mots comme « lilas doux » ou « pêche pâle » pour trouver des Marks pastel et créer avec eux tout de suite.

## FAQ

### Qu’est-ce qu’un dégradé pastel ?

Un dégradé pastel est un fondu de couleurs pâles et doucement saturées, comme le rose poudré, le lilas, le beurre et la menthe.

### Quelle couleur de texte sur un dégradé pastel ?

Une encre sombre, idéalement une version profonde de l’une des teintes du dégradé, comme l’indigo ou le bordeaux. Le texte blanc échoue en général au contraste sur les pastels.

### Comment rendre régulières les couleurs d’un dégradé pastel ?

Construisez-les en OKLCH avec la même luminosité et le même chroma, en ne changeant que la teinte : chaque couleur porte alors le même poids.

### Comment éviter qu’un dégradé pastel paraisse trop sucré ?

Ajoutez une couleur poudrée ou inattendue, utilisez une encre sombre pour le texte, posez-le sur un fond blanc cassé façon papier et associez-le à une typographie assurée.

### Quelle couleur de fond avec des pastels ?

Un blanc cassé chaud comme `#f8f1ea` donne aux pastels un air imprimé et calme ; le blanc pur peut les faire paraître délavés.