Couleurs nommées CSS : liste complète des 148 couleurs
Liste complète des couleurs nommées CSS avec hex et RGB. Recherchable, copiable et adaptée au mobile.
Que sont les couleurs nommées CSS ?
CSS inclut 148 couleurs nommées utilisables à la place des codes hex ou des valeurs RGB. Des mots comme « tomato », « rebeccapurple » et « lightseagreen » sont des valeurs de couleur CSS valides, définies par le W3C et supportées par tous les navigateurs modernes. Les couleurs nommées rendent vos feuilles de style plus lisibles et plus faciles à mémoriser.
Elles couvrent l'ensemble du cercle chromatique : primaires, secondaires, tertiaires, gris, et quelques teintes spéciales. Chaque nom correspond à une valeur sRGB précise. Certains noms sont évidents (« red », « blue », « green »), d'autres sont étonnamment spécifiques (« papayawhip », « lemonchiffon », « mediumvioletred »).
Cas d'usage courants
- Prototypage rapide : tapez un nom de couleur pour définir un placeholder
- CSS lisible : remplacez `#ff6347` par `tomato` pour plus de clarté
- Thématisation : utilisez des noms sémantiques (--brand-primary: rebeccapurple) dans des variables CSS
- Templates d'email : certains clients limitent les hex ; les noms sont largement supportés
- Enseignement : les couleurs nommées sont idéales pour introduire CSS aux débutants
Méthode 1 : Utilisez la liste de couleurs nommées CSS d'UtilBoxx (Recommandé)
Notre liste de couleurs nommées CSS affiche chaque couleur avec son équivalent hex et RGB, permet la recherche et la copie de tout nom ou valeur en un clic. Voici comment l'utiliser :
- Allez sur utilboxx.com/fr/tools/color/named
- Parcourez ou recherchez dans la liste (essayez « purple » ou « gray »)
- Cliquez sur une pastille pour copier son nom
- Cliquez sur la valeur hex pour copier le code exact
- Utilisez le bouton favoris pour mémoriser les couleurs que vous utilisez le plus
Pourquoi cette méthode fonctionne :
- Liste groupée par couleur et recherchable
- Copie en un clic du nom, hex et RGB
- Montre une pastille visuelle pour chaque couleur
- Mise en page adaptée au mobile
- Gratuit, sans inscription, sans publicité
Méthode 2 : Mémorisez les bases
Un petit ensemble de couleurs nommées couvre 80 % du travail CSS courant :
- red, green, blue (primaires)
- yellow, cyan, magenta (secondaires)
- black, white, gray
- orange, pink, purple, brown
- Variantes claires/sombres : lightgray, darkblue, etc.
Pour des choix plus exotiques, gardez une liste de référence à portée.
Méthode 3 : Utilisez des variables CSS dans votre feuille de style
Définissez votre palette comme propriétés personnalisées et utilisez les noms dans votre code :
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
Cela combine la lisibilité des noms avec la puissance d'un design system centralisé.
Questions fréquentes
Combien de couleurs nommées existe-t-il en CSS ?
Il y a 148 couleurs nommées dans la spécification CSS Color Module Level 4. La liste inclut toutes les couleurs historiques ainsi que des ajouts plus récents comme rebeccapurple (ajoutée en 2014 en mémoire de la fille d'Eric Meyer).
Les noms de couleur sont-ils sensibles à la casse ?
Non. Les noms de couleur CSS sont insensibles à la casse, donc « Tomato », « tomato » et « TOMATO » désignent la même couleur. La convention est en minuscules.
Qu'est-ce que rebeccapurple ?
C'est `#663399`, ajoutée à la spécification CSS en 2014 en hommage à Rebecca Alison Meyer, la fille du pionnier de CSS Eric Meyer. C'est la seule couleur nommée ajoutée à CSS pour une raison non technique.
Puis-je utiliser les couleurs nommées en SVG et canvas ?
Oui. SVG et l'API canvas de HTML5 acceptent toutes deux les couleurs nommées CSS, avec les mêmes noms et valeurs de manière universelle.
Conclusion
Les couleurs nommées CSS sont un joyau sous-employé. Pour une référence rapide et recherchable, la liste de couleurs nommées d'UtilBoxx est la façon la plus simple de les trouver, comparer et copier.