Palettes de couleurs sombres : des codes intenses qui restent lisibles

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

Forêt de nuit

Sang-de-bœuf et cuivre

Aubergine

Anthracite et braise

Sarcelle profond

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 et les dégradés d’ambiance.

Les règles d’une palette sombre lisible

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.

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. Ici, une couleur de marque corail, #e0525d, devient une gamme sombre complète.

1. 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. 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. 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. 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. 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.

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 couvre les décisions plus larges, comme les images, les bordures et les graphiques.

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

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.

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 et l’esthétique dark academia.