Adaptateur de couleurs pour mode sombre
Convertissez instantanément n'importe quelle palette claire en équivalents pour mode sombre. Choisissez parmi trois modes d'adaptation (perceptuel, inversion ou décalage) avec application automatique du contraste WCAG. Exportez en propriétés personnalisées CSS ou en configuration Tailwind. Tout le traitement s'exécute localement dans votre navigateur. Sans inscription.
Enter your light-mode color palette and instantly generate dark-mode equivalents with WCAG contrast checks. Export as CSS custom properties or Tailwind config - all processing runs locally in your browser.
background
#828282
surface
#708599
border
#6485af
text
#e5e9f0
muted
#818ea2
primary
#3780f6
accent
#9369f7
Adaptation Mode
Background lightness of the dark theme
Boost or reduce saturation in dark mode
WCAG AA = 4.5, AAA = 7.0
:root {
--background: #ffffff;
--surface: #f8f9fa;
--border: #e2e8f0;
--text: #1a202c;
--muted: #718096;
--primary: #3b82f6;
--accent: #8b5cf6;
}
[data-theme="dark"],
.dark {
--background: #828282;
--surface: #708599;
--border: #6485af;
--text: #e5e9f0;
--muted: #818ea2;
--primary: #3780f6;
--accent: #9369f7;
}Contrast ratios are calculated against the dark background lightness you set. WCAG AA requires 4.5:1 for normal text. WCAG AAA requires 7:1. Colors that fail the minimum contrast are automatically nudged toward higher lightness until they pass.
Pourquoi utiliser notre adaptateur de couleurs pour mode sombre ?
- Génération instantanée du mode sombre : collez votre palette claire et obtenez les équivalents sombres en temps réel. Ajustez le mode et les réglages : toutes les couleurs se mettent à jour immédiatement.
- Sûr et privé : tous les calculs de couleur s'exécutent à 100 % côté client, dans votre navigateur. Les données de votre palette ne sont jamais envoyées à un serveur, vous pouvez donc adapter sereinement des couleurs de marque propriétaires.
- Vérification du contraste WCAG : chaque couleur adaptée est automatiquement comparée au fond sombre pour la conformité WCAG AA (4,5:1) et AAA (7:1). Les couleurs non conformes sont ajustées jusqu'à passer.
- 100 % gratuit pour toujours : entièrement gratuit, sans inscription, sans limite d'utilisation et sans publicité bloquant l'interface. Adaptez autant de palettes que nécessaire.
Cas d'usage courants de l'adaptateur de couleurs pour mode sombre
- Ajouter un mode sombre à des applications existantes : convertissez vos jetons de design clairs en équivalents sombres en quelques secondes. Exportez en propriétés personnalisées CSS et déposez-les dans votre feuille de styles.
- Thématisation React et Next.js : générez les jetons de couleur sombres pour votre configuration Tailwind ou votre objet de thème CSS-in-JS. L'export Tailwind est prêt à coller dans tailwind.config.js.
- Maintenance du design system : gardez vos palettes claire et sombre synchronisées au fil de l'évolution de votre système. Relancez l'adaptateur à chaque mise à jour d'une couleur claire.
- Adaptation des couleurs de marque : adaptez les couleurs de marque aux interfaces sombres en préservant teinte et saturation. Le mode perceptuel garde les demi-teintes et accents visuellement cohérents.
- Conformité d'accessibilité : vérifiez que toutes vos couleurs sombres respectent le contraste WCAG AA sur votre fond sombre. Les couleurs non conformes sont ajustées automatiquement.
- Variables et jetons CSS : exportez les palettes claire et sombre en propriétés personnalisées CSS d'un seul clic. La sortie utilise les sélecteurs data-theme="dark" et .dark pour une compatibilité maximale.
Qu'est-ce qu'un adaptateur de couleurs pour mode sombre ?
Un adaptateur de couleurs pour mode sombre convertit une palette claire en équivalents adaptés au mode sombre en ajustant la luminosité de chaque couleur dans l'espace HSL. Une simple inversion (100 − L) donne souvent de mauvais résultats : les couleurs très claires deviennent très foncées et les demi-teintes ternes. Notre adaptateur utilise trois algorithmes plus intelligents (perceptuel, inversion et décalage) pour produire des couleurs sombres visuellement cohérentes et accessibles. Tout le traitement s'exécute instantanément dans votre navigateur, sans envoi à un serveur.
Comment fonctionne notre adaptateur de couleurs pour mode sombre
- Saisissez votre palette claire : ajoutez chaque couleur avec un nom (utilisé comme nom de variable CSS) et sa valeur HEX. Utilisez les boutons prédéfinis pour charger une palette d'exemple instantanément.
- Choisissez les réglages d'adaptation : sélectionnez un mode (perceptuel, inversion ou décalage), réglez la luminosité du fond sombre, ajustez la saturation et fixez le ratio de contraste WCAG minimal. Les couleurs sombres se mettent à jour en temps réel.
- Exportez CSS ou configuration Tailwind : copiez les propriétés personnalisées CSS générées (avec les sélecteurs :root et .dark) ou l'extrait de configuration Tailwind directement dans votre projet.
Les trois modes d'adaptation
- Mode perceptuel : utilise une courbe en S qui préserve les relations de contraste relatives entre les couleurs. Les couleurs claires (L élevé) deviennent légèrement brillantes sur fond sombre, les foncées (L faible) bien plus claires. C'est le mode recommandé pour la plupart des design systems.
- Mode inversion : reflète la luminosité autour de 50 % (sombre = 100 − clair). Simple et prévisible, mais peut produire des résultats délavés pour les demi-teintes. Idéal pour les palettes minimalistes à fort contraste.
- Mode décalage : décale toutes les couleurs vers l'extrémité claire de la plage du thème sombre. Les couleurs foncées reçoivent un gain plus important que les claires. Adapté aux palettes comportant de nombreux tons foncés.
- Application du contraste : après adaptation, chaque couleur est comparée au fond sombre via la formule de contraste WCAG. Les couleurs sous le ratio minimum sont automatiquement décalées vers une luminosité plus élevée jusqu'à ce qu'elles passent.
Foire aux questions
Un adaptateur de couleurs pour mode sombre convertit une palette claire en équivalents sombres en ajustant la luminosité HSL, en vérifiant le contraste WCAG et en corrigeant automatiquement les couleurs non conformes. Notre adaptateur s'exécute entièrement dans votre navigateur.
Une simple inversion de luminosité donne souvent de mauvais résultats : les couleurs très claires deviennent très foncées et les demi-teintes deviennent ternes. Les modes perceptuel et décalage utilisent des algorithmes plus intelligents qui préservent la hiérarchie visuelle.
Chaque couleur adaptée est comparée au fond sombre à l'aide de la formule de ratio de contraste WCAG 2.1. Les couleurs sous le ratio minimum sont automatiquement décalées vers une luminosité plus élevée jusqu'à ce qu'elles passent.
Oui. Tous les calculs s'exécutent à 100 % côté client. Aucune donnée de couleur n'est jamais envoyée à un serveur.
Collez la sortie CSS dans votre feuille de styles. Le bloc :root définit les couleurs claires, le bloc .dark les couleurs sombres. Activez ou désactivez la classe dark sur l'élément racine pour changer de thème.
Fusionnez l'extrait de configuration Tailwind dans la section theme.extend.colors de votre tailwind.config.js. Les couleurs référencent des propriétés personnalisées CSS et basculent automatiquement avec la classe dark.
Oui. 100 % gratuit, sans inscription et sans limite d'utilisation. Adaptez autant de palettes que nécessaire.