Générateur de palette dark mode

Générez une palette complète (fonds, surfaces, textes, accent, états) pour une interface en mode sombre cohérente, à partir d'une simple couleur d'accent. Le calcul des teintes se fait entièrement dans votre navigateur.

Fond principal
#16131b
Surface (cartes)
#221e29
Surface secondaire
#2f2a37
Bordure
#403a4a
Texte principal
#f2f0f4
Texte atténué
#aba5b6
Accent
#8b55e7
Accent (survol)
#a379ec
Succès
#37be6f
Alerte
#e8ab30
Danger
#e05252
Variables CSS

Comment ça marche

Une bonne interface sombre ne se limite pas à inverser noir et blanc : les fonds doivent rester légèrement teintés et jamais complètement noirs pour éviter un contraste trop dur, et l'accent doit être suffisamment lumineux pour rester lisible sur fond sombre. Cet outil calcule ces nuances automatiquement à partir de la teinte de votre couleur d'accent, en HSL, pour produire un ensemble de couleurs cohérent prêt à coller dans votre feuille de style sous forme de variables CSS.

Pourquoi éviter un fond totalement noir (#000000) en mode sombre ?

Un noir pur associé à du texte blanc pur crée un contraste extrême qui fatigue l'œil et provoque un effet de halo (vibration visuelle) sur certains écrans OLED. Les interfaces sombres professionnelles (macOS, Material Design) utilisent plutôt des gris très foncés légèrement teintés, ce que reproduit cette palette.

Faut-il aussi adapter la couleur d'accent au mode sombre ?

Oui : une couleur d'accent qui fonctionne bien sur fond clair peut paraître terne ou trop sombre sur fond noir. Cet outil éclaircit légèrement l'accent fourni pour qu'il conserve un bon contraste et reste bien visible sur les fonds sombres générés.

Aucune couleur ni préférence n'est transmise à un serveur : tous les calculs colorimétriques s'exécutent localement, dans votre navigateur.