# Palettes de couleurs atténuées : codes poudrés pour marques calmes

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

La sauge, le vieux rose, l’ardoise et l’argile paraissent calmes parce que la couleur a été adoucie avec du gris. Voici comment fonctionne l’atténuation, sept palettes à copier, et la seule chose qui évite qu’un ensemble atténué ne tourne au brouillard.

## The short version

- Une palette de couleurs atténuées se compose de couleurs à saturation réduite, généralement en mêlant du gris ou un peu de la teinte opposée.
- Les couleurs atténuées comme la sauge, le vieux rose, le bleu ardoise, le mauve et l’argile se lisent comme calmes, naturelles et adultes.
- Les couleurs atténuées partagent souvent la même clarté : une palette atténuée a donc besoin d’une couleur beaucoup plus foncée pour le texte et les bords.
- Le vert sauge et le vieux rose diffèrent par la teinte mais sont presque identiques en clarté, ce qui rend illisible le texte de l’un sur l’autre.
- En CSS, color-mix() dans l’espace oklch est un moyen fiable d’atténuer n’importe quelle couleur de marque en la mêlant à du gris.

Une **palette de couleurs atténuées** est un ensemble de couleurs dont la saturation est baissée, si bien qu’elles paraissent poudrées, douces et légèrement grises plutôt que pures. La sauge `#9CAF88`, le vieux rose `#C9A9A6`, le bleu ardoise `#6B7F99`, le mauve `#B48A9B` et l’argile `#B5826B` en sont typiques. Elles conviennent aux marques qui veulent paraître calmes et réfléchies : céramique, bien-être, papeterie, architecture, mode lente. Le piège est que les couleurs atténuées dérivent vers la même clarté : toute bonne palette atténuée comprend donc un sombre ferme pour tenir l’ensemble.

## Ce qui rend une couleur atténuée

Une couleur a trois réglages : teinte, saturation et clarté (voir [teinte, saturation et luminosité](https://gradiently.design/fr/guide/hue-saturation-brightness)). Atténuer baisse la saturation tout en laissant la teinte reconnaissable. Il y a deux façons classiques de le faire : mêler du gris, ce que les designers appellent faire un ton, ou mêler un peu de la couleur complémentaire, ce que les peintres ont toujours fait. Les deux tirent la couleur vers le neutre.

### Pure

- Vert `#2ECC71`
- Rose `#FF5C8A`
- Bleu `#2F6BFF`
- Orange `#FF7A1A`

### Atténuée

- Sauge `#9CAF88`
- Vieux rose `#C9A9A6`
- Bleu ardoise `#6B7F99`
- Argile `#B5826B`

Atténué ne veut pas dire pastel. Un pastel ajoute du blanc : il reste net et clair ; une couleur atténuée ajoute du gris : elle peut être claire, moyenne ou foncée et paraît toujours un peu poudrée. Les [palettes de couleurs pastel](https://gradiently.design/fr/guide/pastel-color-palettes) et les [teintes, tons et nuances](https://gradiently.design/fr/guide/tints-tones-shades) tracent la frontière plus en détail.

## Sept palettes de couleurs atténuées avec codes hex

- Craie: #eef0e8
- Sauge: #9caf88
- Vieux rose: #c9a9a6
- Argile: #b5826b
- Encre de mousse: #2e3a2c

Atelier de jardin, la palette que la plupart imaginent en entendant atténué. L’encre de mousse est l’ancre qui rend les quatre autres utilisables.

- **Port :** brouillard `#E6E9EA`, bleu ardoise `#6B7F99`, gris marin `#93A3A6`, cordage `#C2AD8E`, marine profond `#22303C`.
- **Céramique :** biscuit `#F1E8DD`, argile `#B5826B`, émail cendré `#A7A39A`, fer `#5B4A42`, noir de four `#231D1A`.
- **Poussière de lavande :** brume `#F1EBE6`, mauve `#B48A9B`, bruyère `#8E8AA6`, sauge `#9CAF88`, aubergine `#4A3F4F`.
- **Oliveraie :** crème `#F2EDE1`, olive `#8A8A5C`, herbe séchée `#B1A87F`, terracotta `#A9674E`, écorce `#3A3328`.
- **Nordique :** neige `#F2F3F1`, bouleau `#D8D1C4`, lichen `#A3AE9D`, fjord `#5F7A80`, pin `#24302E`.
- **Crépuscule poudré :** parchemin `#EFE6DA`, poussière de pêche `#D9A88F`, brun rosé `#A06F6B`, gris prune `#6E5866`, nuit `#2A2329`.

Chacune se termine par un sombre. Ce n’est pas de la décoration. Sans lui, il n’y a rien pour composer le texte ni pour tracer un bord, et la palette ressemble à une photo oubliée au soleil.

## Pourquoi les palettes atténuées tournent au brouillard

Atténuer supprime les plus fortes différences entre les couleurs : la clarté devient donc la seule chose qui reste pour les séparer. La sauge `#9CAF88` et le vieux rose `#C9A9A6` ressemblent à un joli contraste de vert et de rose, pourtant leur rapport de contraste est de 1,09:1 : presque la même clarté. Le texte de l’un sur l’autre est illisible. Même la sauge sur blanc pur n’atteint que 2,36:1.

| Paire | Contraste | À utiliser pour |
| --- | --- | --- |
| Sauge sur vieux rose | 1,09:1 | Deux formes côte à côte, jamais du texte |
| Sauge sur blanc | 2,36:1 | Grandes formes et illustration |
| Bleu ardoise sur blanc | 4,10:1 | Grands titres seulement |
| Vieux rose avec texte `#3A2A2A` | 6,29:1 | Corps du texte, réussit AA |
| Encre de mousse `#2E3A2C` sur craie | 10,39:1 | Corps du texte, réussit AAA |
| Aubergine `#4A3F4F` sur brume | 8,40:1 | Corps du texte, réussit AAA |

Le WCAG demande 4,5:1 pour le corps du texte et 3:1 pour le grand texte. Dans une palette atténuée, l’ancre sombre fait tout le travail de lecture.

Vérifiez vos propres paires avec les conseils du [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility). Une bonne habitude : passer un instant la palette en niveaux de gris ; si deux couleurs deviennent le même gris, ne placez jamais l’une sur l’autre.

## Comment atténuer n’importe quelle couleur en CSS

Si vous avez déjà une couleur de marque vive et voulez une compagne plus calme, mêlez-la à du gris plutôt que de choisir une nouvelle couleur à l’œil. `color-mix()` dans l’espace oklch garde la teinte stable tandis que la saturation baisse, et il est pris en charge par tous les grands navigateurs actuels.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Mélanger vers un gris moyen atténue sans changer la teinte. En oklch, une chroma d’environ 0,03 à 0,07 se lit comme atténuée ; 0,15 et plus se lit comme vive.

[OKLCH expliqué](https://gradiently.design/fr/guide/oklch-explained) couvre pourquoi cet espace se comporte plus uniformément que TSL, et la [saturation en design](https://gradiently.design/fr/guide/color-saturation) couvre quand la remonter.

## Dégradés et fonds atténués

Les couleurs atténuées donnent des dégradés doux et discrets, surtout quand les arrêts sont proches en teinte et que la lumière vient d’un côté. Ajoutez un peu de grain : les dégradés à faible contraste montrent facilement le banding, et la texture les fait paraître une surface plutôt qu’un réglage d’écran.

- Matin de sauge: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Poussière de pêche: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Brume de port: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Soir de mauve: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Quatre dégradés atténués. Chacun garde des teintes voisines : le dégradé ne devient donc jamais brun au milieu.

Un ensemble atténué peut aussi accueillir une couleur un peu plus forte en accent, comme un terracotta parmi des sauges ou un sarcelle plus profond parmi des gris. Limitez-la à un seul élément par design : un prix, un bouton, une date. Elle donne à l’œil un endroit où se poser sans rompre le calme, et c’est ainsi que fonctionnent d’ordinaire les [palettes de tons terre](https://gradiently.design/fr/guide/earth-tone-colors) auxquelles les ensembles atténués empruntent.

Une publication verticale pour une collection de céramique avec un lettrage foncé sur un fond doux et poudré

Une publication de céramique en 1080×1350. Les couleurs atténuées portent l’ambiance ; la typographie foncée porte le message.

Si votre marque vit dans les couleurs atténuées, un fond avec son propre grain et sa propre lumière fait beaucoup du travail. Un Mark de Gradiently vous offre une surface douce et distinctive qui garde le texte lisible toute seule, ce qui compte plus dans un ensemble atténué que dans tout autre.

## FAQ

### Qu’est-ce qu’une palette de couleurs atténuées ?

Une palette de couleurs à saturation réduite, qui paraissent douces, poudrées et légèrement grises. La sauge, le vieux rose, le bleu ardoise et l’argile en sont des exemples courants.

### Quelle différence entre couleurs atténuées et couleurs pastel ?

Les pastels s’obtiennent en ajoutant du blanc : ils restent clairs et nets. Les couleurs atténuées s’obtiennent en ajoutant du gris : elles peuvent avoir n’importe quelle clarté et paraissent toujours un peu poudrées.

### Comment atténuer une couleur ?

Baissez sa saturation, mêlez-y du gris, ou ajoutez une petite quantité de sa couleur complémentaire. En CSS, `color-mix(in oklch, yourcolour 50%, #8c8c8c)` le fait de façon fiable.

### Quelles couleurs vont avec le vert sauge ?

Le vieux rose, l’argile, la crème, le gris chaud et une mousse profonde ou un anthracite pour le texte. Évitez de composer du texte en sauge sur vieux rose : leur clarté est presque identique.

### Les couleurs atténuées conviennent-elles au branding ?

Elles conviennent bien aux marques calmes, artisanales et de bien-être. Incluez un sombre fort pour le texte et les bords afin que la palette reste lisible.