Plus de jeux sur WuGames.ioSponsoriséDécouvrez des jeux de navigateur gratuits — jouez aussitôt, sans téléchargement ni inscription.Jouer
Outils Couleur CouleurGénérateurs GénérateurConvertisseurs Conversion

Générateur de Paires Mode Sombre

Collez une palette HEX en mode clair et obtenez les couleurs mode sombre correspondantes via inversion de luminosité OKLCH. Vérifications WCAG et export CSS.

Collez des couleurs HEX séparées par sauts de ligne, virgules ou espaces. Notation courte (#fff) prise en charge.

Qu'est-ce que le Générateur de Paires Mode Sombre?

Un outil perceptivement précis qui convertit n'importe quelle palette mode clair en sa contrepartie mode sombre. Au lieu d'inverser naïvement les valeurs HEX, il fonctionne en OKLCH — l'espace colorimétrique perceptivement uniforme qui propulse le CSS moderne — n'inversant que la composante de luminosité tout en préservant la teinte. Cela garde les couleurs de marque reconnaissables en mode sombre tout en leur donnant l'apparence apaisée que les utilisateurs attendent. Chaque paire est vérifiée par rapport aux directives de contraste WCAG pour que vous puissiez livrer des interfaces accessibles.

Caractéristiques Principales

  • Inversion de luminosité basée sur OKLCH préserve la teinte et l'identité de marque
  • Ratio de contraste WCAG par couleur contre fonds #FFFFFF et #121212 (badges AA / AAA)
  • Désaturation, plancher et plafond de luminosité ajustables pour contrôle fin
  • Échantillons d'aperçu clairs et sombres côte à côte
  • Exporte en variables CSS prêtes à l'emploi pour :root, [data-bs-theme="dark"] et prefers-color-scheme
  • Accepte HEX 3 et 6 chiffres dans tout format séparé par espaces, virgules ou lignes
  • 100% dans le navigateur — votre palette ne quitte jamais l'appareil
Générateur de Paires Mode Sombre — Collez une palette HEX en mode clair et obtenez les couleurs mode sombre correspondantes via inversion de luminosité OKL
Générateur de Paires Mode Sombre

Comment l'Utiliser

  1. Collez vos couleurs HEX mode clair dans la boîte de palette (une par ligne fonctionne mieux)
  2. Ajustez optionnellement la désaturation si les couleurs sombres semblent trop saturées
  3. Ajustez le plancher de luminosité pour éviter que les fonds sombres deviennent noir pur
  4. Ajustez le plafond de luminosité pour éviter que le texte clair devienne blanc pur (réduit la fatigue oculaire)
  5. Cliquez sur Générer Paire Sombre pour voir les échantillons, scores WCAG et export de variables CSS
  6. Copiez le bloc CSS et collez-le dans votre feuille de style — votre thème sombre est prêt

Questions Fréquentes

HSL est un espace colorimétrique de commodité des années 70 — agréable pour les sélecteurs mais perceptivement erroné. Un jaune vif en HSL 60 50 50 paraît bien plus lumineux qu'un bleu profond en HSL 240 50 50, alors inverser naïvement la luminosité en HSL donne des résultats inégaux: les jaunes pâles deviennent moutarde terne tandis que les bleus pâles restent lumineux. OKLCH (conçu par Björn Ottosson en 2020 et maintenant natif en CSS) est perceptivement uniforme: des valeurs de luminosité égales paraissent également lumineuses sur toutes les teintes.

Les thèmes sombres désaturent intentionnellement les couleurs car la saturation vive contre fond sombre est visuellement fatigante — vos pupilles s'élargissent dans les environnements peu éclairés, amplifiant l'aberration chromatique. iOS, macOS et Material Design réduisent tous le chroma dans leurs palettes sombres d'environ 10-30%. La désaturation par défaut de 15% ici correspond à ces directives. Si vos couleurs sombres semblent TROP délavées, réduisez le curseur vers 0%; si elles semblent trop vibrantes, poussez-le vers 50%.

Le plancher définit la luminosité la plus sombre qu'une couleur mode sombre peut atteindre. Un plancher de 12% empêche vos couleurs les plus sombres de s'ajuster au noir pur (#000), ce que les Directives d'Interface Humaine d'Apple découragent explicitement car les fonds noir pur rendent les halos et fantômes autour du texte plus visibles sur OLED. Le plafond limite la luminosité maximale d'une couleur mode sombre, typiquement 92-95%, donc votre texte 'blanc' devient un blanc doux au lieu de #FFFFFF — cela réduit la dureté du contraste.

L'outil calcule les ratios de contraste WCAG 2.1 pour chaque paire contre la couleur de surface (arrière-plan) que vous sélectionnez pour chaque thème, puis les étiquette: Échec (<3), AA Lg (≥3, grand texte uniquement), AA · AAA Lg (≥4.5, passe AA pour le texte courant et AAA pour le grand texte), AAA (≥7, passe AAA pour le texte courant). Le texte courant nécessite au moins 4.5:1 et le grand texte au moins 3:1. Si vous voyez des badges Échec, la couleur est destinée comme décorative ou d'affichage grand, pas pour le texte courant.

Utilisez les deux menus déroulants 'surface (arrière-plan)' au-dessus du tableau des paires. Les versions précédentes mesuraient chaque couleur contre un blanc fixe (#FFFFFF) ou quasi noir (#121212), ce qui n'est pas la façon dont l'accessibilité est réellement évaluée — le texte réussit ou échoue contre la surface sur laquelle il repose. Vous choisissez maintenant quelle couleur de la palette est votre jeton d'arrière-plan pour le thème clair et le thème sombre, et le ratio WCAG de chaque autre couleur est recalculé contre cette surface réelle. La surface sélectionnée s'affiche comme '— surface —' au lieu d'être notée contre elle-même. Les seuils appliqués sont 4.5:1 pour le texte courant (AA) et 3:1 pour le grand texte (AA Grand, 18pt/24px ou 14pt/18.5px gras). Les paires en échec sont aussi annotées en commentaires dans le CSS exporté.

Cet outil utilise la formule de ratio de contraste WCAG 2.1 (luminance relative, seuils 4.5:1 / 3:1) car c'est la norme référencée légalement actuelle (EN 301 549, ADA, Section 508). L'APCA (Algorithme de Contraste Perceptuel Accessible) est la métrique candidate pour le WCAG 3 émergent et modélise le contraste de luminosité perçue bien mieux, surtout pour les fonds sombres, où WCAG 2.1 est connu pour être trop permissif avec du texte clair sur fond sombre. L'APCA n'est pas encore normatif, livrez donc selon WCAG 2.1 aujourd'hui, mais si une paire de thème sombre passe à peine 2.1, traitez-la comme limite et vérifiez-la perceptuellement.

Couleurs unies uniquement. Pour les dégradés, passez chaque couleur d'arrêt individuellement par l'outil et réassemblez dans votre CSS. L'interpolation de dégradé OKLCH dans le CSS moderne (linear-gradient(in oklch, ...)) donnera un résultat perceptivement lisse avec les arrêts convertis, bien plus lisse que le dégradé par défaut en espace sRGB qui tend à se brouiller au milieu.

L'export CSS utilise des variables CSS standard qui fonctionnent nativement dans Tailwind v3+ via la directive @theme, dans SCSS via @use 'sass:meta', et en CSS pur dans tout navigateur moderne (Chrome 49+, Safari 9.1+, Firefox 31+). Pour React Native ou Flutter, copiez les valeurs HEX du tableau d'échantillons et définissez-les dans votre propre fichier de constantes. Le modèle de nommage (--color-1, --color-2, ...) est intentionnellement générique pour que vous puissiez les renommer selon vos jetons de design.

color-scheme dit au navigateur quels contrôles de formulaire et barres de défilement intégrés utiliser — il ne modifie PAS votre palette. color-mix() mélange deux couleurs mais ne peut pas inverser intelligemment la luminosité en gardant la teinte. Cet outil vous donne des valeurs HEX concrètes que vous livrez comme jetons de design, ce qui signifie que vous contrôlez exactement ce que les utilisateurs voient et pouvez auditer l'accessibilité à l'avance. La sortie est aussi compatible avec QA de design basé sur captures d'écran et emails HTML rendus côté serveur.
Voir aussi
Outils CouleurOUTILS COULEUR31
WuToolsWUTOOLS