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
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
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.
Théorie des Couleurs pour le Design Web - Nuances et WCAG
Maîtrisez la théorie des couleurs, les nuances, les standards WCAG et la construction d'une palette de design.