Comment utiliser les variables CSS exportées ?

Cliquez sur "Exporter CSS" pour copier les 19 couleurs comme propriétés CSS personnalisées. Collez-les dans votre bloc :root et utilisez-les avec var(--color-tint-30).

Générateur de Teintes et Ombres

Générez une échelle complète de teintes et ombres depuis n'importe quelle couleur de base. 9 teintes, 9 ombres — copiez les codes HEX ou exportez-les en variables CSS.

9 teintes · 9 ombresExport variables CSSCopie en 1 clic

① Entrer un code HEX ou choisir une couleur ② Générer 9 teintes & 9 nuances ③ Cliquer sur un échantillon pour copier

Couleur de base

Préréglages de marque:

Comment ça marche

Entrez n'importe quelle couleur HEX et l'outil génère 9 teintes (plus claires) et 9 ombres (plus sombres) en mélangeant mathématiquement la couleur de base avec du blanc et du noir. Cliquez sur un carré pour copier son code HEX.

Teintes

Une teinte se crée en mélangeant la couleur de base avec du blanc. Le pourcentage indique la quantité de blanc ajoutée — 90% est presque blanc, 10% est à peine plus clair que l'original.

Ombres

Une ombre se crée en mélangeant la couleur de base avec du noir. Le pourcentage indique la quantité de noir ajoutée — 90% est presque noir, 10% est à peine plus sombre que l'original.

Teintes et ombres — comment fonctionnent les échelles de couleur

Teintes : canal = base + (255 − base) × p. Ombres : canal = base × (1 − p). Interpolation RGB linéaire générant une rampe de 9 teintes / 9 ombres — 19 niveaux — compatible avec l'échelle Tailwind CSS 100–900 et les tokens Material Design. Exportez les 19 valeurs comme propriétés CSS personnalisées dans un bloc :root {} : de --color-tint-10 à --color-shade-90 et --color-base. Idéal pour les tokens de design system. Vérifiez toujours le contraste — WCAG AA exige 4,5:1.

Questions fréquentes

Une teinte est une couleur mélangée avec du blanc (plus claire). Une ombre est une couleur mélangée avec du noir (plus sombre). Les deux maintiennent la teinte originale : les teintes semblent pastel, les ombres plus profondes.

L'outil utilise l'interpolation RGB linéaire. Teinte à p% : canal = base + (255 − base) × p. Ombre à p% : canal = base × (1 − p). Cela donne une progression mathématiquement uniforme.

90% de teinte signifie mélanger 90% de blanc avec 10% de couleur de base. Le résultat est dominé par le blanc. Pour un éclaircissement subtil, utilisez des teintes de 10–30%.

Des systèmes comme Tailwind CSS et Material Design utilisent une échelle à 9 niveaux où 100 est la teinte la plus claire et 900 l'ombre la plus sombre, avec 500 (ou 600) représentant la couleur de base.

Les teintes et ombres seules ne garantissent pas l'accessibilité. Vérifiez le rapport de contraste (minimum 4,5:1 pour le texte normal sous WCAG AA) avec l'outil Contraste.

Cliquez sur "Exporter CSS" pour copier les 19 couleurs comme propriétés personnalisées CSS (--color-tint-90 à --color-shade-90 et --color-base). Collez-les dans votre bloc :root et utilisez-les avec var(--color-tint-30).

Oui — l'outil fonctionne avec tout code HEX valide à 6 chiffres (#000000 à #FFFFFF), couvrant les 16+ millions de couleurs du modèle RGB 8 bits. Tout se calcule dans le navigateur sans envoi de données.

Teintes et ombres — comment fonctionnent les échelles de couleur

Questions fréquentes

Explorez notre réseau