# Palettes de couleurs sombres : des codes intenses qui restent lisibles

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

Une palette sombre paraît luxueuse quand elle est faite de quasi noirs avec une trace de couleur, et bon marché quand c’est du noir pur avec du néon. En voici six réussies, avec tous les codes.

## The short version

- Une bonne palette de couleurs sombres repose sur un quasi noir légèrement teinté plutôt que sur le #000000 pur.
- Sur une palette sombre, le texte se lit mieux dans un blanc cassé doux, qui garde un fort contraste sans l’éblouissement du blanc pur.
- Les couleurs d’accent sur fond sombre doivent être plus claires et moins saturées que sur blanc, car les couleurs vives vibrent contre le noir.
- Les interfaces sombres montrent la profondeur en éclaircissant légèrement les surfaces surélevées, pas en ajoutant des ombres.
- Chaque couleur de texte d’une palette sombre doit quand même passer un test de contraste contre la surface sur laquelle elle se trouve réellement.

Une **palette de couleurs sombres** qui reste lisible a trois composantes : un fond quasi noir avec une pointe de couleur, un blanc cassé doux pour le texte, et un ou deux accents plus clairs et plus calmes que ceux que vous utiliseriez sur blanc. Le noir pur avec du néon saturé paraît dur et fatigue les yeux. Des sombres teintés avec des rehauts doux paraissent voulus et luxueux. Les six palettes ci-dessous suivent cette recette, avec des codes hex à copier et des rapports de contraste déjà vérifiés.

## Six palettes de couleurs sombres avec codes hex

Chaque palette a les cinq mêmes rôles, de gauche à droite : **fond** (la page), **surface** (cartes et panneaux, un cran plus clair), **profond** (une couleur intermédiaire riche pour les formes et les grandes zones), **accent** (pour les liens, boutons et mises en valeur) et **texte**.

### Encre de minuit

- Fond #0b0f1a: #0b0f1a
- Surface #151b2c: #151b2c
- Marine profond #2b3a67: #2b3a67
- Pervenche #8fa3d9: #8fa3d9
- Texte #e8e6f0: #e8e6f0

Froide, calme et technique. Le texte sur le fond atteint 15,5:1 ; l’accent pervenche 7,7:1, assez pour les liens et les petites étiquettes.

### Forêt de nuit

- Fond #0c1410: #0c1410
- Surface #15231c: #15231c
- Pin profond #2f5d46: #2f5d46
- Sauge #9cc5a1: #9cc5a1
- Texte #ece7da: #ece7da

Naturelle et discrète, idéale pour les marques bien-être, outdoor et alimentaires. Texte 15,1:1, sauge 9,7:1.

### Sang-de-bœuf et cuivre

- Fond #140a0b: #140a0b
- Surface #241214: #241214
- Sang-de-bœuf #6b1e26: #6b1e26
- Cuivre #c9855b: #c9855b
- Texte #f1e6dc: #f1e6dc

Chaude et riche, à sa place sur une carte des vins, au théâtre et pour les soirées. Texte 15,9:1, cuivre 6,5:1.

### Aubergine

- Fond #120b17: #120b17
- Surface #1e1326: #1e1326
- Prune #4a2a63: #4a2a63
- Orchidée #c79ad8: #c79ad8
- Texte #f3ecf6: #f3ecf6

Créative et nocturne, une alternative plus douce au violet néon. Texte 16,7:1, orchidée 8,3:1.

### Anthracite et braise

- Fond #121212: #121212
- Surface #1e1e1e: #1e1e1e
- Graphite #3a3a3a: #3a3a3a
- Braise #ff8a3d: #ff8a3d
- Texte #ededed: #ededed

Des gris neutres avec un seul accent chaud, le classique des applis et tableaux de bord. Texte 16:1, braise 8:1.

### Sarcelle profond

- Fond #071a1c: #071a1c
- Surface #0f2a2d: #0f2a2d
- Sarcelle profond #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Texte #e6f2ef: #e6f2ef

Océanique et posée, adaptée à la finance et à la santé. Texte 15,6:1, aqua 8,5:1.

Les couleurs profondes de chaque palette servent aux surfaces, pas aux mots : le marine sur le fond Encre de minuit, par exemple, n’atteint qu’environ 1,7:1. Utilisez-les pour les formes, les illustrations et les fonds derrière un texte dans les couleurs claires.

## Les mêmes palettes en dégradés sombres

Une palette sombre prend vie quand la couleur profonde rayonne depuis le fond, comme une lumière dans une pièce tamisée. Ces dégradés n’utilisent que les codes ci-dessus, ils s’accordent donc exactement aux palettes unies. D’autres techniques dans [les fonds dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) et [les dégradés d’ambiance](https://gradiently.design/fr/guide/moody-gradients).

- Encre de minuit: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Forêt de nuit: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Sang-de-bœuf: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Aubergine: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Anthracite et braise: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Sarcelle profond: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Les dégradés sombres créent plus d’effet de bandes que tous les autres. Ajoutez un peu de grain et évitez une forte compression JPEG à l’export.

## Les règles d’une palette sombre lisible

### À éviter

- Le #000000 pur comme fond
- Le #ffffff pur pour de longs passages de texte
- Des accents totalement saturés, qui semblent vibrer
- Des ombres portées pour montrer quelle carte est au-dessus
- Une typographie fine et légère en petite taille

### À faire

- Un quasi noir teinté vers la teinte de votre marque
- Un blanc cassé teinté de la même façon
- Des versions plus claires et plus douces des couleurs d’accent
- Des surfaces plus claires pour les éléments surélevés
- Des graisses regular ou medium, un interlettrage un peu plus large

**Pourquoi pas le noir pur ?** Le noir avec un texte blanc pur est le contraste maximal qu’un écran puisse afficher, 21:1, et sur un écran lumineux il peut éblouir, surtout sur de longs passages. Un quasi noir teinté autour de 15:1 reste bien au-dessus de tous les seuils d’accessibilité et se lit bien plus facilement dans la durée. Il donne aussi une température à la palette, ce que le noir pur n’a jamais.

**Pourquoi des accents plus calmes ?** Un bleu ou un rouge saturé qui va bien sur blanc semble briller et trembler sur ses bords sur du noir. Augmentez sa luminosité et baissez un peu sa saturation, comme pour la pervenche et la sauge ci-dessus, et il se tient tranquille. Vérifiez chaque accent utilisé pour du texte avec un [vérificateur de contraste](https://gradiently.design/fr/guide/color-contrast-accessibility).

## Créer une palette sombre à partir de votre couleur de marque

Inutile d’emprunter l’une des palettes ci-dessus. N’importe quelle couleur de marque peut devenir une palette sombre en gardant sa teinte et en ne changeant que la luminosité et la saturation. Cela fonctionne mieux dans un format qui sépare les deux, comme le [HSL](https://gradiently.design/fr/guide/hsl-colors). Ici, une couleur de marque corail, `#e0525d`, devient une gamme sombre complète.

1. **Fond : même teinte, presque pas de lumière** Gardez la teinte, descendez la saturation à environ 30 % et la luminosité à environ 7 % : `#170c0d`. Il se lit comme du noir mais paraît chaud.
2. **Surface : un cran au-dessus** Montez la luminosité à environ 12 % et baissez un peu la saturation : `#261718`. Les cartes et panneaux se placent ici.
3. **Profond : un ton moyen riche pour les surfaces** Une luminosité autour de 28 % donne `#68272d`, un lie-de-vin sourd pour les formes et l’illustration, jamais pour le texte.
4. **Accent : plus clair et plus doux que la marque** Montez le corail à environ 72 % de luminosité : `#ea868e` atteint 7,6:1 sur le fond, quand le corail d’origine plafonne à 5,1:1 et paraît plus dur.
5. **Texte : un blanc cassé avec une trace de la teinte** `#f2e9e9` donne 16:1 sur le fond et s’accorde discrètement avec tout le reste.

- Fond #170c0d: #170c0d
- Surface #261718: #261718
- Lie-de-vin #68272d: #68272d
- Corail doux #ea868e: #ea868e
- Texte #f2e9e9: #f2e9e9

Une palette sombre dérivée d’un seul corail. Toutes les couleurs partagent la teinte, c’est pourquoi l’ensemble ressemble à une seule marque, de nuit.

## Utiliser une palette sombre en CSS

Nommez les couleurs par rôle pour que les mêmes composants fonctionnent en thème clair et en thème sombre. Le modèle ci-dessous définit Encre de minuit comme thème sombre et laisse le réglage du système choisir. [Le design du mode sombre](https://gradiently.design/fr/guide/dark-mode-design) couvre les décisions plus larges, comme les images, les bordures et les graphiques.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }
```

L’accent change d’un thème à l’autre : marine profond sur clair, pervenche sur sombre. Une même couleur fonctionne rarement sur les deux.

## Palettes sombres pour les réseaux sociaux

Dans un fil, une publication sombre se détache parmi les photos lumineuses, mais seulement si les mots se lisent à taille de téléphone. Gardez une typographie grande, éloignez la partie la plus lumineuse du fond du titre, et donnez aux mots la zone la plus calme du cadre.

Une publication Instagram portrait sombre annonçant une nocturne de galerie, avec un texte clair sur un fond profond

Une publication sombre et intense où le texte repose sur la partie la plus calme du fond, et où la lueur reste à l’écart des mots.

C’est là qu’un Mark Gradiently aide : il place sa zone la plus calme et la mieux contrastée derrière le texte, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne dans la propre palette du Mark, si bien qu’un fond sombre n’avale jamais le titre. Pour des looks sombres au caractère plus riche et haut de gamme, voyez [les palettes de couleurs luxe](https://gradiently.design/fr/guide/luxury-color-palettes) et [l’esthétique dark academia](https://gradiently.design/fr/guide/dark-academia-aesthetic).

## FAQ

### Quelles couleurs mettre dans une palette de couleurs sombres ?

Un quasi noir teinté pour le fond, une couleur de surface légèrement plus claire, une couleur moyenne profonde pour les grandes zones, un accent plus clair et un blanc cassé doux pour le texte.

### Faut-il utiliser le noir pur pour le mode sombre ?

En général non. Un quasi noir comme #121212 ou un sombre teinté comme #0b0f1a réduit l’éblouissement avec un texte blanc et donne quand même un contraste très élevé.

### Quelle couleur de texte fonctionne le mieux sur un fond sombre ?

Un blanc cassé doux comme #e8e6f0 ou #ededed. Il garde un contraste d’environ 15:1 ou plus sans la dureté du blanc pur.

### Pourquoi les couleurs vives rendent-elles mal sur un fond sombre ?

Les couleurs saturées semblent vibrer contre le noir. Utilisez des versions plus claires et légèrement moins saturées pour les accents sur fond sombre.