ToolStack

Générateur de Couleur CSS

Transformez une couleur de base en une échelle de 10 nuances exportable en variables CSS.

100 % confidentiel — tout fonctionne dans votre navigateur

Publicité

Mode d'emploi

  1. 1

    Saisissez une couleur de base ou choisissez-la visuellement.

  2. 2

    Une échelle de 10 niveaux, de 50 (le plus clair) à 900 (le plus foncé), est générée instantanément.

  3. 3

    Cliquez sur une nuance pour copier sa valeur hex individuelle.

  4. 4

    Copiez le bloc complet de propriétés personnalisées CSS pour votre projet.

Exemples

Échelle depuis #3B82F6

Entrée

#3B82F6

Résultat

--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445

Prêt pour le CSS

Entrée

Collez le bloc copié

Résultat

:root { --color-500: #3B82F6; … }

Questions fréquentes

Comment l'échelle est-elle générée ?

Les niveaux 50–400 sont mélangés vers le blanc (teintes claires), 600–900 vers le noir (nuances foncées) et 500 conserve votre couleur de base inchangée.

Comment utiliser les variables ?

Collez le bloc en haut d'une feuille de style, puis référencez n'importe quel niveau avec var(--color-500) dans votre CSS.

Ma couleur est-elle envoyée à un serveur ?

Non — l'échelle est générée localement dans votre navigateur.

Outils similaires

Générateur de DégradéCréez visuellement des dégradés CSS linéaires et radiaux, puis copiez le code CSS.Sélecteur de CouleurChoisissez une couleur et copiez ses valeurs HEX, RGB, HSL et HSV en un clic.Vérificateur de ContrasteVérifiez instantanément le ratio de contraste WCAG entre un texte et son arrière-plan.HEX en RGBConvertissez des codes HEX en valeurs RGB instantanément — gratuit et privé.RGB en HEXConvertissez des valeurs RGB en code HEX instantanément — gratuit et privé.Convertisseur de CouleurConvertissez entre les formats HEX, RGB, HSL, HSV et HWB dans les deux sens.