Générateur de nuances de couleur
Transformez une couleur en échelle 50–950 façon Tailwind avec teintes claires, foncées et rabattues. Calculé en OKLCH et sRGB, export CSS, Tailwind ou JSON.
Réglages des nuances
Exporter
L’échelle 50–950 garde votre couleur en 500 et ajuste la luminosité et la chroma OKLCH des autres niveaux, en conservant la teinte.
Échelle 50–950
Teintes claires, foncées et rabattues
Mélange en sRGB comme color-mix(in srgb, …) à pas égaux ; cliquez sur une couleur pour la copier.
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
}Outils Connexes
Voir ToutQu'est-ce que Générateur de nuances de couleur ?
Étend une seule couleur en une échelle 50–950 de 11 niveaux comme les palettes de Tailwind, et en rangées de teintes claires (mélangées avec du blanc), de teintes foncées (mélangées avec du noir) et de teintes rabattues (mélangées avec du gris). Toutes les valeurs peuvent être copiées individuellement ou exportées en variables CSS, SCSS, Tailwind v3/v4 ou JSON.
Comment utiliser Générateur de nuances de couleur
- Saisissez la Couleur de base.
- Lisez l'échelle 50–950 ; votre couleur est le niveau 500.
- Réglez le nombre d'Étapes de teintes claires / foncées / rabattues pour les rangées de mélanges.
- Cliquez sur n'importe quel échantillon pour le copier.
- Choisissez un Format d'export et un Nom du token, puis copiez l'échelle.
Exemple
#3b82f6, CSS variables, token name brand
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
} Quand utiliser Générateur de nuances de couleur
Utilisez-le pour construire une rampe de couleurs complète pour un design system ou un thème Tailwind à partir d'une seule couleur de marque, ou pour obtenir des variantes de survol/actif. L'échelle est un point de départ algorithmique raisonnable ; pour des design systems de production, vous pouvez encore affiner chaque niveau et vérifier le contraste pour l'usage en texte.
Comment fonctionne Générateur de nuances de couleur
Pour l'échelle, la couleur de base est convertie en OKLCH et gardée inchangée au niveau 500. Les niveaux plus clairs déplacent la luminosité d'une fraction fixe vers 0,985 (95 %, 88 %, 75 %, 55 %, 30 % pour 50–400) et réduisent la chroma ; les niveaux plus foncés la déplacent vers 0,2 (18 %–85 % pour 600–950) avec une chroma légèrement réduite. La teinte est conservée et chaque niveau est ramené dans la gamme sRGB. Les teintes claires, foncées et rabattues sont des mélanges en sRGB encodé en gamma, comme color-mix(in srgb, …), à pas égaux de 1/(n+1).
Cas d'utilisation courants
- Rampes de couleurs personnalisées pour Tailwind
- Tokens de design system à partir d'une couleur de marque
- Variantes pour les états de survol et d'appui
- Fonds et bordures dans des thèmes clair/sombre
- Tons atténués pour des illustrations
Questions Fréquentes
Quelle différence entre teinte claire, teinte foncée et teinte rabattue ?
Une teinte claire est la couleur mélangée avec du blanc, une teinte foncée est mélangée avec du noir et une teinte rabattue est mélangée avec du gris.
Pourquoi ma couleur est-elle au niveau 500 ?
Comme dans les palettes de Tailwind, 500 est le niveau de référence ; les niveaux plus clairs (50–400) servent aux fonds et les plus foncés (600–950) au texte et aux bordures.
Cela correspondra-t-il exactement aux couleurs intégrées de Tailwind ?
Non. Les palettes de Tailwind ont été réglées à la main ; cet outil génère algorithmiquement une rampe d'aspect similaire pour n'importe quelle couleur.