Générateur de Nuances de Couleurs
Générez des nuances plus claires et plus sombres à partir de n'importe quelle couleur de base. Même teinte et saturation, luminosité variable — parfait pour les systèmes de design, les variables CSS et les palettes style Tailwind. Copiez hex, RGB, HSL ou un bloc complet de variables CSS.
#ECF3FE#C0D7FC#94BBFA#689FF8#3C83F6#0B5EE5#0844A6#052A66#021027Table des matières
Que sont les nuances de couleurs ?
Les nuances sont des variations d'une seule couleur créées en changeant uniquement la luminosité (en HSL). La teinte et la saturation restent les mêmes, vous obtenez donc une famille cohérente du très clair au très sombre — idéal pour les fonds, bordures, texte et états de survol dans les systèmes de design (ex. l'échelle 50–900 de Tailwind) ou les variables CSS.
Contrairement aux teintes (ajouter du blanc) ou aux tons (ajouter du gris), la génération de nuances via la luminosité HSL préserve la vivacité de la couleur sur toute l'échelle, empêchant cet aspect délavé dans les étapes plus claires.
Cet outil place votre couleur de base au milieu de l'échelle et génère des étapes plus claires et plus sombres. Vous pouvez copier des valeurs individuelles ou exporter l'ensemble complet comme propriétés personnalisées CSS.
Cas d'utilisation
- Systèmes de design — Définissez une échelle primaire (ou secondaire) une fois et réutilisez-la dans tous les composants.
- Palettes style Tailwind — Générez 9 ou 11 étapes (50–900) à partir d'une couleur de marque.
- Variables CSS — Copiez le bloc "Copier comme variables CSS" dans votre :root pour une thématisation instantanée.
- Accessibilité — Utilisez des nuances plus claires pour les fonds et des nuances plus sombres pour le texte afin de respecter les directives de contraste.
Formats de sortie
Copiez les couleurs comme :
- Hex — #EFF6FF, #DBEAFE, etc.
- RGB — rgb(239, 246, 255)
- HSL — hsl(214, 100%, 97%)
- Variables CSS — Bloc :root prêt à coller avec --color-100, --color-200, etc.
Conseils pour de meilleurs résultats
- Commencez avec votre nuance 500 — Pensez à votre couleur de base comme le milieu de la plage, pas la plus sombre.
- Vérifiez le contraste tôt — Utilisez des nuances plus claires (50–200) pour les fonds avec du texte sombre ; les nuances plus sombres (700–900) assurent un texte lisible sur des fonds clairs.
- Évitez les bases noir/blanc pur — Commencez avec des couleurs ayant une certaine saturation (10%+) pour des échelles d'aspect plus naturel.
Questions fréquentes
Nous gardons la teinte et la saturation de votre couleur de base fixes et ne changeons que la luminosité en HSL. La couleur de base est placée au milieu ; les étapes au-dessus sont plus claires (jusqu'à 96% de luminosité) et les étapes en dessous sont plus sombres (jusqu'à 8% de luminosité), vous obtenez donc une progression uniforme du clair au sombre.
Oui. Choisissez 9 nuances pour obtenir une échelle similaire à la 100–900 de Tailwind (avec les étiquettes 50–900). Copiez les valeurs hex ou le bloc de variables CSS et insérez-les dans votre configuration Tailwind ou CSS global.
3 nuances : Palette minimale (clair, base, sombre). 5–7 nuances : Projets simples avec besoins de couleurs basiques. 9 nuances : Standard Material Design (100–900). 11 nuances : Standard Tailwind (50–950) — Recommandé. 13–15 nuances : Granularité maximale pour les systèmes de design complexes.
La luminosité HSL fonctionne mieux avec des couleurs ayant une saturation modérée (20–80%). Les couleurs de base très saturées ou très désaturées peuvent nécessiter un ajustement manuel. Essayez de modifier légèrement la saturation de votre couleur de base si l'échelle semble incorrecte.
Pas dans cet outil — il est conçu pour des échelles mathématiques cohérentes. Pour des ajustements manuels, copiez les valeurs hex dans un sélecteur de couleur ou un outil de design.
Non. Toute la génération s'exécute dans votre navigateur. Votre couleur de base et vos paramètres ne sont stockés que dans l'URL (paramètres de requête) si vous partagez le lien ; rien n'est envoyé à un serveur.