Palettes de couleurs pour le mode sombre : 12 palettes avec codes hex pour la nuit
Douze palettes de couleurs pour le mode sombre avec codes hex exacts : des accents qui brillent la nuit, des accents qui coulent, un accent pour deux thèmes, et un texte blanc cassé qui n'éblouit pas.
Une palette de mode sombre n'est pas la palette claire retournée comme une crêpe. L'accent se comporte autrement sur une page sombre, le texte doit être plus doux, et certaines couleurs cessent tout simplement de fonctionner. Voici douze palettes sombres avec chaque code hex, conçues pour montrer ce qui change la nuit.
Le mode sombre retourne votre accent
Les accents qui peinent sur blanc sont ceux qui brillent sur une surface sombre. Ceux qui paraissent solides sur blanc peuvent perdre leur mordant. Un thème sombre ne peut donc pas emprunter l'accent du thème clair sans vérification.
Chaque palette ci-dessous se compose d'une encre claire, d'un accent et d'une surface sombre. Les tuiles montrent l'accent sur la page sombre et sur blanc. Pour le système derrière un thème sombre, consultez notre papier sur les systèmes de couleurs du mode sombre.
Lime
Electric Lime #C6F432 sur Graphite #17181C : brille
Même accent sur blanc : faible
Chalk #F2F3EE sur Graphite
Electric Lime est presque invisible sur blanc et brille sur Graphite. Les couleurs qui peinent sur blanc sont celles qui éclatent la nuit.
Pink
Hot Pink #FF4F9A sur Night Plum #1A1218 : brille
Même accent sur blanc : plus faible
Blush White #F6EEF2 sur Night Plum
Hot Pink est plus faible sur blanc et bien plus fort sur Night Plum.
Amber
Amber #FFB020 sur Coffee Black #1B1610 : brille
Même accent sur blanc : faible
Warm White #F5F0E6 sur Coffee Black
Amber est un accent faible sur blanc et un accent chaud et puissant sur Coffee Black.
Royal
Royal #3B4CCA sur Midnight #121426 : coule
Même accent sur blanc : fort
Frost #EEF0FA sur Midnight
Royal est le bleu d'école du mode clair. Sur Midnight, il tombe sous ce qu'il faut à un bouton pour être perçu comme une forme : même hex, autre page.
Même hex, autre page. Royal est celui à surveiller : un bouton qui marche sur blanc peut couler la nuit.
Un accent, deux thèmes
Un bouton doit se détacher de la page sur laquelle il se trouve. Waikiki y arrive sur sa page claire comme sur sa page sombre. Very Berry aussi. Un seul hex, les deux thèmes.
Lime Punch et Gentian Blue, non. Chacun est superbe dans un thème et disparaît dans l'autre.
Waikiki
Waikiki
Sur Silver Bird #FBF8F1 : réussi
Sur Midnight Oil #10141F : réussi
Un turquoise de ton moyen qui se détache sur les deux pages. Un seul hex, les deux thèmes.
Very Berry
Very Berry
Sur French Porcelain #F7F4FB : réussi
Sur Twilight Zone #0F1C16 : réussi
Un autre ton moyen qui marche sur sa page claire comme sur sa page sombre.
Lime Punch
Lime Punch
Sur Ceramic #FBFAF5 : échec
Sur Infinite Night #171538 : réussi
Trop clair pour le mode clair : sur sa surface de jour, le bouton disparaît presque. Sur Infinite Night, il brille.
Gentian Blue
Gentian Blue
Sur Open Book #F6EFE5 : réussi
Sur Balsamico #1C1612 : échec
Trop sombre pour le mode sombre. Solide sur Open Book, il s'évanouit sur Balsamico.
Si vous voulez un seul accent pour les deux thèmes, choisissez un ton moyen et vérifiez-le deux fois. Sinon, donnez à chaque thème sa propre nuance. Notre guide du design du mode sombre explique comment livrer ce second thème.
Le blanc cassé bat le blanc pur
Le blanc pur sur une surface quasi noire offre le contraste maximal, et c'est justement le problème : il éblouit. Les blancs cassés de ces palettes restent bien plus faciles à lire que ce dont un texte courant a besoin.
Le thème sombre de Material Design règle son texte principal à 87 % de blanc pour la même raison. Donnez au blanc cassé un peu de chaleur ou un peu de fraîcheur, et laissez l'accent parler.
Smoked Salmon
Distant Cloud #E7ECEC sur Dark Moon #0B1B1F
Blanc pur #FFFFFF sur Dark Moon : il éblouit
Smoked Salmon #FF887A sur Dark Moon
Un blanc cassé froid avec un accent corail chaud. L'accent se détache nettement sans aucune aide.
Minted Elegance
Vanilla Sugar #F1EBDF sur Violet Void #1C1022
Blanc pur #FFFFFF sur Violet Void : il éblouit
Minted Elegance #4FCB9C sur Violet Void
Vanilla Sugar a un peu de chaleur, et l'accent menthe a toute la place sur Violet Void.
Malibu
Milk and Cookies #EFE7E7 sur Asphalt #1C140F
Blanc pur #FFFFFF sur Asphalt : il éblouit
Malibu #57BAF0 sur Asphalt
Un blanc cassé chaud sur un quasi-noir chaud, avec un bleu ciel qui perce.
Dream Vapour
Star Magnolia #EAEFE4 sur Black Stallion #0E1A16
Blanc pur #FFFFFF sur Black Stallion : il éblouit
Dream Vapour #BB9DF0 sur Black Stallion
Star Magnolia tire légèrement sur le vert, ce qui s'accorde bien avec un doux accent lilas.
Chaque accent de ces quatre palettes se détache nettement sur sa surface nocturne, le texte peut donc rester discret.
Les douze palettes dans un tableau
| Palette | Couleurs | Ce qu'elle montre |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Brille sur sombre |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Plus fort sur sombre |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Brille sur sombre |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Coule sur sombre |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | Marche dans les deux thèmes |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | Marche dans les deux thèmes |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Ne marche que sur sombre |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Ne marche que sur clair |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Texte blanc cassé |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Texte blanc cassé |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Texte blanc cassé |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Texte blanc cassé |
Les chiffres, pour celui qui défend le choix
Chaque association a été mesurée avec la formule de contraste WCAG 2 par rapport à la surface où elle se trouve. C'est le seul tableau du papier avec des ratios.
| Palette | Test | Ratio | Résultat |
|---|---|---|---|
| Lime | Accent sur la surface sombre / sur blanc | 13.84:1 / 1.28:1 | Brille, faible |
| Pink | Accent sur la surface sombre / sur blanc | 5.98:1 / 3.07:1 | Plus fort sur sombre |
| Amber | Accent sur la surface sombre / sur blanc | 9.82:1 / 1.83:1 | Brille, faible |
| Royal | Accent sur la surface sombre / sur blanc | 2.66:1 / 6.83:1 | Coule sur sombre |
| Waikiki | Bouton sur clair / sur sombre | 3.2:1 / 5.2:1 | Réussit les deux |
| Very Berry | Interrupteur sur clair / sur sombre | 3.9:1 / 4.0:1 | Réussit les deux |
| Lime Punch | Bouton sur clair / sur sombre | 1.4:1 / 11.1:1 | Échoue, réussit |
| Gentian Blue | Bouton Play sur clair / sur sombre | 8.9:1 / 1.7:1 | Réussit, échoue |
| Smoked Salmon | Texte blanc cassé / blanc pur / accent | 14.7:1 / 17.6:1 / 7.6:1 | Réussit, éblouit, réussit |
| Minted Elegance | Texte blanc cassé / blanc pur / accent | 15.4:1 / 18.3:1 / 9.0:1 | Réussit, éblouit, réussit |
| Malibu | Texte blanc cassé / blanc pur / accent | 14.9:1 / 18.1:1 / 8.3:1 | Réussit, éblouit, réussit |
| Dream Vapour | Texte blanc cassé / blanc pur / accent | 15.2:1 / 17.8:1 / 7.8:1 | Réussit, éblouit, réussit |
Comment construire votre palette sombre
- Choisissez d'abord la surface sombre. Un quasi-noir comme Graphite #17181C ou Violet Void #1C1022 est plus doux que le noir pur.
- Composez le texte en blanc cassé. Ajoutez un peu de chaleur ou un peu de fraîcheur, comme dans Vanilla Sugar #F1EBDF.
- Testez l'accent sur la surface sombre. Ne réutilisez pas l'accent du thème clair sans vérification.
- Décidez : un accent ou deux. Si un seul accent doit servir les deux thèmes, choisissez un ton moyen et vérifiez-le sur les deux pages. Sinon, donnez à chaque thème sa propre nuance.
- Vérifiez le bouton comme une forme. Il doit se détacher de la page, pas seulement se lire comme une étiquette.
Récupérez les fichiers de chaque set
Chaque set est un set de couleurs gratuit sur Forge, avec codes à copier d'un tap, fichiers de nuanciers pour Figma et Adobe (ASE), variables CSS et design tokens.
Set de couleurs gratuit
Le mode sombre retourne votre accent : Lime, Pink, Amber, Royal
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
Set de couleurs gratuit
Un accent, deux thèmes : Waikiki, Very Berry, Lime Punch, Gentian Blue
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
Set de couleurs gratuit
Le blanc cassé pour le mode sombre : Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
FAQ
Quelles couleurs fonctionnent le mieux dans une palette de mode sombre ?
Une surface quasi noire, un blanc cassé pour le texte, et un accent qui se détache sur le sombre. Smoked Salmon #FF887A sur Dark Moon #0B1B1F avec Distant Cloud #E7ECEC pour le texte en est un bon exemple.
Le mode sombre doit-il utiliser du texte blanc pur ?
Non. Le blanc pur sur une surface quasi noire éblouit. Un blanc cassé comme Vanilla Sugar #F1EBDF reste bien plus facile à lire que ce dont un texte courant a besoin, et il est plus doux.
Puis-je utiliser la même couleur d'accent en mode clair et en mode sombre ?
Seulement si c'est un ton moyen. Waikiki #0098A4 se détache sur les deux pages. Lime Punch #B7DD31 s'évanouit sur clair et Gentian Blue #292BAE s'évanouit sur sombre.
Pourquoi mon bouton bleu disparaît-il en mode sombre ?
Un bleu fort sur blanc peut être trop sombre pour une surface sombre. Royal #3B4CCA coule sur Midnight #121426. Utilisez un bleu plus clair pour le thème sombre.
De quelle couleur doivent être les boutons du mode sombre ?
De celle qui se détache de la surface sombre. Electric Lime #C6F432, Hot Pink #FF4F9A et Amber #FFB020 y arrivent tous, parce que les couleurs vives brillent la nuit.
Quelle est la meilleure couleur de fond pour le mode sombre ?
Un quasi-noir comme Graphite #17181C ou Coffee Black #1B1610, plutôt que du noir pur. C'est plus doux à côté d'un blanc cassé et l'accent peut quand même briller.
Sources
- Noms de couleurs et codes hex issus des sets de couleurs UX Brainy sur Forge, vol 05, 09 et 10. Le contraste a été calculé avec la formule WCAG 2 par rapport à la surface où se trouve chaque couleur.
- Les seuils pour le texte et les formes suivent W3C WCAG 2.2 : Contrast (Minimum) et Non-text Contrast.
- Le thème sombre de Material Design règle le texte principal à 87 % de blanc : Material Design, Dark theme.
- D'abord publié en trois carrousels sur UX Brainy : L'accent qui marche sur blanc peut disparaître en mode sombre, Un accent pour le mode clair et le mode sombre ne marche que dans les tons moyens et Le mode sombre n'a pas besoin de texte blanc pur.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
