Aller au contenu
TextArray1.87.0
Tout en local

Générateur de palette de mode sombre

Convertissez les couleurs de thème clair en homologues sombres avec contraste WCAG vérifié. Générez des palettes prêtes à intégrer au CSS.

Entrée
30
Sortie
Outils connexes
Générateur de palette de couleursGénérateurs aléatoires
Vérificateur de contrasteOutils de développement
Extracteur de variables de couleur CSSOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur de palette de mode sombre
Collez les couleurs d'un thème clair — une par ligne — et cet outil génère une contrepartie sombre pour chacune, prête à insérer dans votre feuille de style. Il est conçu pour le flux courant de livrer un thème sombre après que le thème clair existe déjà : donnez-lui vos couleurs de fond, de surface et d'accent et il retourne le même ensemble, inversé pour une interface sombre.
Nommez chaque ligne comme une propriété CSS personnalisée ("background: #ffffff", "--accent: #3366cc") ou collez une valeur hexadécimale brute. Le fond du thème sombre définit le fond contre lequel la palette est construite, et le contraste de chaque couleur est vérifié. Le contraste cible choisit entre WCAG AA (4.5:1) ou AAA (7:1) — les accents (les entrées les plus saturées, destinées au texte, aux liens et aux icônes) sont poussés vers ce rapport, tandis que les surfaces atténuées sont rapportées honnêtement mais jamais forcées, car un arrière-plan de carte n'est pas lu comme du texte. La désaturation adoucit les couleurs qui brilleraient autrement à saturation complète dans l'obscurité, Conserver la teinte d'accent garde la teinte et l'intensité d'une couleur de marque intactes, et Mapper les surfaces aux niveaux d'élévation crée une rampe subtile au-dessus du fond, comme une carte s'élevant au-dessus de la page.
Une ligne que l'outil ne peut pas lire comme couleur — un commentaire égaré, un titre vide — est ignorée plutôt que de casser le reste de la liste, et le comptage s'affiche dans le tally avec le nombre de couleurs générées et le nombre d'accents atteignant le contraste cible. Les très longues listes et les sauts de ligne Windows ou Unix sont tous deux gérés sans configuration supplémentaire.
Tout s'exécute localement dans votre navigateur : les couleurs ne sont jamais téléchargées ni envoyées nulle part. Copiez le résultat, téléchargez-le en tant que fichier .txt, ou renvoyez la sortie directement à l'entrée pour continuer à affiner la palette.
FAQ
Quel format d'entrée s'attend-il?
Une couleur par ligne, en tant que valeur hexadécimale. Nommez-la comme une variable CSS ("primary: #3366cc") pour un nom de variable lisible, ou collez un code hex simple et l'outil le nomme automatiquement.
Comment décide-t-il quelles couleurs sont des accents?
Une couleur avec une saturation notable est traitée comme un accent — destinée au texte, aux liens ou aux icônes — et est poussée vers votre niveau de contraste choisi. Une couleur presque grise est traitée comme une surface et suit plutôt le mappage d'élévation.
Pourquoi chaque couleur n'atteint-elle pas le ratio de contraste cible?
Seuls les accents sont poussés vers la cible, car ce rapport est une règle de contraste de texte. Les remplissages de surface et d'arrière-plan ne sont pas du texte, donc leur contraste est rapporté dans le tally mais pas forcé.
Que fait "Mapper les surfaces aux niveaux d'élévation"?
Il escalade vos couleurs neutres de faible saturation à partir du nouvel arrière-plan sombre par petits incréments uniformes, au lieu de refléter leur clarté d'origine — le même look en couches que les cartes s'élevant au-dessus d'un arrière-plan de page.
Ma liste de couleurs est-elle téléchargée quelque part?
Non. La palette est générée entièrement dans votre navigateur et ne quitte jamais votre appareil.