Générateur de Teintes et Ombres de Couleur

Générez des teintes (plus claires) et des ombres (plus foncées) de n'importe quelle couleur hex. Crée une palette de 10 étapes pour les systèmes de conception, les échelles de couleurs de style Tailwind et les variables CSS.

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

Comment utiliser Générateur de Teintes et Ombres de Couleur

1Entrez une couleur hex de base ou utilisez le sélecteur de couleurs.
2Visualisez 10 teintes (variantes plus claires) et 10 ombres (variantes plus foncées).
3Cliquez sur une nuance pour copier sa valeur hex.
4Exportez les propriétés personnalisées ou la configuration Tailwind.

ZenovayAnalytics

Transformez votre trafic en clients.

Suivi des visiteurs en temps réel
Vie privée d'abord, sans bandeau cookies
Installé en deux minutes

Découvrir Zenovay

Outils connexes

Générateur de gradient CSS

Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.

Générateur d'Ombre de Boîte CSS

Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.

Générateur de Rayon de Bordure CSS

Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.

Zone de jeu CSS Flexbox

Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Quelle est la différence entre une teinte et une nuance ?▾

Une teinte est créée en ajoutant du blanc à une couleur — la rendant plus claire tout en préservant la teinte. Une nuance est créée en ajoutant du noir — la rendant plus foncée. Ensemble, les teintes et les nuances forment une échelle de couleurs. Les systèmes de design modernes (comme Tailwind CSS, Material Design et Ant Design) utilisent des échelles de 50 à 900, où 50 est la teinte la plus claire et 900 est la nuance la plus sombre. La couleur de base se situe généralement autour de 500 ou 600.

Comment Tailwind CSS utilise-t-il les échelles de couleurs ?▾

Tailwind CSS fournit une échelle en 11 étapes (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) pour chaque couleur nommée. Lors de la création de couleurs de marque personnalisées, vous étendez la configuration Tailwind avec votre propre échelle. Cet outil génère des échelles compatibles avec le format Tailwind. Vous pouvez copier la sortie comme objet de configuration Tailwind ou propriétés personnalisées CSS (--color-brand-50 à --color-brand-900).

Qu'est-ce que l'espace colorimétrique HSL ?▾

HSL (Teinte, Saturation, Luminosité) représente les couleurs d'une manière intuitive pour générer des échelles. Teinte (0-360°) est l'angle de couleur sur la roue chromatique. Saturation (0-100%) est l'intensité de la couleur — 0% est gris. Luminosité (0-100%) est la luminosité — 0% est noir, 100% est blanc. Pour créer des teintes, augmentez la luminosité vers 100%. Pour créer des nuances, diminuez la luminosité vers 0%. Cela produit des échelles perceptuellement plus cohérentes que le mélange RGB.

Quelle est la différence entre les méthodes de génération de nuances ?▾

Interpolation linéaire (mélange avec blanc/noir) : simple mais peut sembler délavé ou terne aux extrêmes. Ajustement de la luminosité HSL : plus perceptuellement uniforme mais peut sur-saturer les nuances sombres. Ajusté par chroma (OKLCH/LCH) : le plus perceptuellement précis — maintient une luminosité perçue cohérente. Des outils comme Radix UI et shadcn/ui utilisent OKLCH pour leurs systèmes de couleurs. Cet outil utilise HSL qui offre un bon équilibre entre précision et compatibilité.

Comment utiliser les échelles de couleurs en CSS ?▾

Définissez les couleurs comme propriétés personnalisées CSS (variables) : :root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; } Puis utilisez-les comme var(--color-brand-50) dans vos styles. Pour le mode sombre, redéfinissez les mêmes variables dans un @media (prefers-color-scheme: dark) ou une classe .dark. Les propriétés personnalisées CSS se propagent en cascade et peuvent être remplacées à n'importe quel niveau du DOM, les rendant puissantes pour la thématisation.