Générateur palette dark mode
Créez des palettes dark mode avec texte lisible, surfaces muted, bordures et accents accessibles.
Ce guide explique le fonctionnement. Utilisez l’outil principal lié ci-dessous pour générer les couleurs et exporter les fichiers.
Ce que donne cette page
- Utilisez des neutres foncés pour fonds et teintes douces pour bordures.
- Évitez le noir pur quand il faut hiérarchie et séparation.
- Vérifiez les accents sur surfaces sombres et texte clair.
Utile pour
- Dashboards dark
- Outils dev
- Apps SaaS
Comment l’utiliser
Exemple pratique
Vérifiez ensemble le texte et le fond réels. Un nom de couleur ou un numéro de nuance ne garantit pas un texte lisible.
:root[data-theme="dark"] {
--surface: #111827;
--text: #F9FAFB;
--action: #93C5FD;
--on-action: #111827;
}
.card { background: var(--surface); color: var(--text); }Puis-je utiliser cela avec le générateur principal?
Oui. Commencez ici, ouvrez l’outil Chromoforge avec la même couleur de base et exportez la palette.
Peut-on simplement inverser la palette claire ?
Non. Une inversion directe donne des surfaces sursaturées et des accents éblouissants. Un thème sombre demande des surfaces quasi noires et désaturées entre #121212 et #1A1A1A, des teintes de marque éclairies et moins chromatiques, et une élévation rendue par des surfaces légèrement plus claires plutôt que par des ombres.
Le texte en mode sombre doit-il être blanc pur ?
Non. Le blanc pur sur noir pur maximise le ratio mais provoque un halo : les bords des glyphes semblent baver. Un blanc à environ 87% sur une surface quasi noire, de l'ordre de #E6E6E6 sur #141414, dépasse largement 4.5:1 et fatigue bien moins sur de longues lectures.