Générateur de Nuances de Couleur

Créez une palette complète avec teintes, nuances et scores de contraste WCAG

Générateur de Nuances de Couleur

Couleur de Base

HEX

RGB

HSL

Palette Générée Cliquer pour copier

Aperçu

Exporter

100% côté client. Vos couleurs ne quittent jamais votre navigateur.

Exemples d'Utilisation

Les teintes claires (50-200) conviennent le mieux pour les fonds et les surbrillances subtiles.

Les nuances moyennes (400-600) sont idéales pour les boutons, liens et éléments principaux.

Les nuances foncées (700-900) sont parfaites pour les titres et le texte très contrasté.

Vérifiez toujours le contraste WCAG — AA requiert 4,5:1 pour le texte normal.

Contraste

WCAG contrast requirements

AA: 4.5:1 (Normal text)
AA Grand: 3:1 (Large text)
AAA: 7:1 (Normal text)

Fonctionnalités

Palette Complète 50-900

Générez une palette Tailwind complète à partir de n'importe quelle couleur de base

Contraste WCAG

Chaque nuance affiche les scores de contraste sur fonds blanc et noir

Formats d'Export Multiples

Copiez en variables CSS, SCSS, config Tailwind ou JSON

Privé et Hors Ligne

Fonctionne entièrement dans votre navigateur, aucune donnée envoyée au serveur

Comment Utiliser

Choisir une Couleur de Base

Sélectionnez une couleur avec le sélecteur ou entrez une valeur HEX, RGB ou HSL.

Examiner la Palette

Voyez les nuances générées avec les indicateurs de contraste WCAG pour l'accessibilité.

Exporter ou Copier

Copiez des couleurs individuelles ou exportez toute la palette en CSS, SCSS, Tailwind ou JSON.

Questions Fréquentes

L'outil convertit votre couleur de base en HSL et ajuste la valeur de Luminosité pour créer 10 paliers uniformément répartis. Le palier 50 est le plus clair (proche du blanc), le palier 900 est le plus foncé (proche du noir). L'échelle correspond à l'approche de la palette de couleurs Tailwind CSS, où le palier 500 approxime votre couleur de base originale.

Chaque nuance affiche son ratio de contraste par rapport au blanc et par rapport au noir. Pour la conformité WCAG AA, le texte normal nécessite 4,5:1, le texte large nécessite 3:1. Pour AAA : 7:1 normal, 4,5:1 large. Les nuances claires (50-300) passent généralement AA avec du texte noir ; les nuances foncées (700-900) passent généralement AA avec du texte blanc.

Cliquez sur Exporter Config Tailwind et copiez l'objet JavaScript. Collez-le dans la section « colors » de votre tailwind.config.js. Tailwind génère automatiquement des classes utilitaires comme bg-brand-500, text-brand-700, border-brand-200.

Cliquez sur Exporter Variables CSS pour obtenir des déclarations de propriétés personnalisées CSS (ex. --color-500: #0ea5e9). Collez-les dans votre bloc :root et référencez-les avec var(--color-500). Compatible avec toute configuration CSS.

Une teinte est une version plus claire (mélange avec du blanc, Luminosité plus haute). Une nuance est une version plus sombre (mélange avec du noir, Luminosité plus basse). Les paliers 50-400 sont des teintes, les paliers 600-900 sont des nuances, et le palier 500 approxime la couleur originale.

Les exigences de contraste WCAG l'expliquent : un fond clair avec du texte foncé offre un contraste élevé. Les fonds des paliers 50-100 associés au texte des paliers 700-900 respectent généralement WCAG AA. Les fonds sombres (800-900) avec du texte blanc ou des paliers 50-100 fonctionnent également bien.

Oui. Entrez n'importe quelle couleur HEX, RGB ou HSL valide. Le générateur crée une palette personnalisée complète à partir de votre couleur exacte — utile pour les couleurs de marque absentes de la palette Tailwind par défaut.

Non. Tous les calculs de couleur s'exécutent localement dans votre navigateur via JavaScript.

Qu'est-ce qu'un Générateur de Nuances de Couleur ?

Un Générateur de Nuances de Couleur crée une gamme complète de teintes et nuances à partir d'une seule couleur de base. Au lieu de deviner quelle variation plus claire ou plus foncée utiliser, vous obtenez une palette cohérente qui fonctionne sur les boutons, fonds, bordures et textes. Cet outil produit une échelle de 10 paliers de 50 (le plus clair) à 900 (le plus foncé), correspondant au système de couleurs Tailwind CSS populaire.

Comment ça Fonctionne

Le générateur convertit votre couleur de base en HSL et ajuste la valeur de luminosité pour créer 10 paliers uniformément répartis. Chaque nuance est ensuite évaluée sur fonds blanc et noir avec la formule de contraste WCAG 2.1, vous savez donc immédiatement quelles couleurs sont accessibles pour le texte. Tout s'exécute dans votre navigateur sans allers-retours serveur.

Cas d'Usage Courants

Les designers utilisent les générateurs de nuances pour construire des palettes de marque, créer des tokens de design et maintenir la cohérence visuelle d'un produit. Les développeurs les adorent pour générer des entrées de config Tailwind ou des propriétés CSS personnalisées. Ils sont aussi essentiels pour les audits d'accessibilité, vous aidant à choisir des paires texte/fond conformes aux exigences WCAG AA ou AAA.

Confidentialité et Sécurité

Ce Générateur de Nuances est 100% côté client. Tous les calculs de couleur se font dans votre navigateur avec JavaScript. Aucune couleur, palette ou export n'est envoyé à un serveur. Aucun cookie ne suit vos choix et rien n'est stocké au-delà de votre session actuelle. Sûr pour le travail de marque confidentiel et les systèmes de design internes.

Sécurité et Confidentialité

La sécurité de vos données est notre priorité

Traitement Local

Tout le traitement se fait dans votre navigateur

Aucun Transfert de Données

Vos données ne sont pas envoyées à nos serveurs

Aucun Stockage de Données

Aucune donnée n'est stockée ou partagée

Chiffrement SSL

Chiffrement SSL pour une connexion sécurisée

Cet outil vous a-t-il été utile ?

Générateur de Nuances de Couleur