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 les fonds clairs (#FFFFFF) et sombres (#121212) typiques et les étiquette: Échec (<3), AA Grand (≥3), AA (≥4.5), AAA (≥7). Le texte du corps nécessite au moins AA (4.5:1) et le texte grand au moins AA Grand (3:1). Si vous voyez des badges Échec, la couleur est destinée comme décorative ou d'affichage grand, pas pour le texte du corps.

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