Présentation
Le générateur de couleurs CSS est un outil visuel pour générer du code de couleur CSS. Interagissez avec un sélecteur de couleur et un curseur alpha pour obtenir instantanément du code HEX, HEX 8 chiffres (avec alpha), RGB, RGBA et de propriété personnalisée CSS, permettant aux développeurs front-end et aux designers d'assembler et de copier rapidement des couleurs conformes à CSS.
Comment utiliser cet outil
Étape 1 — choisissez une couleur avec le sélecteur de couleur natif (cliquez sur la pastille) ou saisissez une valeur HEX dans la zone. Étape 2 — faites glisser le curseur Alpha pour modifier la transparence (0 totalement transparent, 1 totalement opaque) ; l'aperçu en dessous est dessiné sur un fond en damier pour voir l'effet de transparence. Étape 3 — cliquez sur l'une des pastilles préréglées pour remplir une couleur de thème commune. Étape 4 — dans le panneau « Code CSS », chaque format a un bouton « Copier » ; le résultat est prêt à être collé dans un fichier CSS ou un style de composant.
Cas d'usage courants
Les développeurs front-end qui déboguent des styles de composants produisent rapidement des couleurs avec canal alpha (telles que
rgba(0, 229, 255, 0.5)) ; les équipes de design system standardisent une palette et émettent du code sous forme de variables CSS ; ajuster la teinte d'un overlay, d'un masque ou d'un état hover ; convertir les couleurs d'une spécification de design en code CSS complet ; itérer sur les choix de couleur lors de la mise en place du basculement de thème.Détails techniques
Le HEX à 8 chiffres utilise la forme
#RRGGBBAA où AA est la représentation hex de l'alpha (0.5 → 7f) et est pris en charge dans CSS Color Module Level 4. L'alpha en RGBA utilise une décimale entre 0 et 1. Le snippet de variable CSS utilise le placeholder --color — renommez-le selon vos besoins. HEX prend en charge l'expansion automatique de 3 chiffres vers 6. Les pastilles préréglées forment une collection vive couramment utilisée en design.Confidentialité et sécurité
Toute la génération de couleurs se déroule en local dans votre navigateur et aucune requête réseau n'est effectuée.