Noms de couleurs HTML : les 148 avec HEX, RGB, HSL et OKLCH | We.Inc
Les 148 noms de couleurs CSS et HTML avec leurs codes HEX, RGB, HSL et OKLCH, le contraste sur blanc et sur noir, la classe Tailwind la plus proche, et un tri par teinte, luminosité ou famille.
Noms de couleurs HTML
CSS définit 148 noms de couleurs, de aliceblue à yellowgreen, et tous les navigateurs les comprennent en HTML et en CSS. Neuf sont une autre orthographe d'un nom existant, comme grey pour gray et cyan pour aqua, il y a donc 139 couleurs distinctes. Le tableau ci-dessous donne pour chacune les valeurs HEX, RGB, HSL et OKLCH, le contraste du texte et la classe Tailwind la plus proche.
L'essentiel sur les couleurs nommées
Question
Réponse
Combien de noms ?
148 (139 couleurs distinctes)
Sensible à la casse ?
Non : Red, RED et red sont identiques
Où sont-ils définis ?
CSS Color Module Level 4
Nom le plus récent
rebeccapurple (#663399), ajouté en 2014
Cherchez par nom ou par code HEX, filtrez par famille de couleurs, triez par teinte, luminosité ou nom, et copiez n'importe quelle valeur en un clic. Chaque ligne indique aussi si un texte noir ou blanc est lisible sur cette couleur et quelle couleur Tailwind est la plus proche.
Tapez une partie d'un nom ou un code HEX dans le champ de recherche pour filtrer le tableau.
Choisissez une famille, comme Bleu ou Brun, pour n'afficher que ces couleurs. Les familles sont regroupées selon la teinte perçue.
Triez par nom, par teinte (pour voir les couleurs comme un spectre) ou par luminosité (du sombre au clair).
Cliquez sur une valeur pour la copier. Les colonnes de contraste indiquent le ratio pour un texte blanc et pour un texte noir sur cette couleur.
Les couleurs nommées sont pratiques pour les prototypes et les exemples, mais un vrai design demande généralement les valeurs exactes de la marque. Remplacez les noms par des codes HEX ou des propriétés personnalisées avant la mise en ligne.
Certains noms sont trompeurs : darkgray (#A9A9A9) est plus clair que gray (#808080), et lightgoldenrodyellow est un crème pâle plutôt qu'un jaune.
Utilisez transparent et currentColor en complément des noms. Ce sont aussi des mots-clés CSS, mais ils ne font pas partie des 148 car ce ne sont pas des couleurs fixes.
Vérifiez le contraste avant d'utiliser une couleur nommée pour du texte. Beaucoup de couleurs vives, comme yellow, gold et lime, échouent sur fond blanc.
Questions fréquentes
Combien y a-t-il de noms de couleurs HTML ?
Il y a 148 couleurs nommées dans CSS Color Module Level 4, que HTML utilise. Neuf paires sont des alias de la même couleur : aqua et cyan, fuchsia et magenta, et sept noms qui peuvent s'écrire avec gray ou grey, comme darkgray et darkgrey. La liste décrit donc 139 couleurs distinctes.
Les noms de couleurs fonctionnent-ils dans tous les navigateurs ?
Oui. Les 148 noms sont pris en charge par tous les navigateurs actuels. Les 16 noms d'origine de HTML 4, comme red, navy et teal, fonctionnent depuis des décennies ; les autres viennent de la liste de couleurs X11 et sont eux aussi pris en charge depuis longtemps.
Pourquoi darkgray est-il plus clair que gray ?
Les noms proviennent de deux sources différentes. gray a été défini en HTML à 50% de luminosité (#808080), alors que darkgray vient de l'ancienne liste de couleurs X11, où il valait #A9A9A9. Quand les listes ont été fusionnées, les deux valeurs ont été conservées telles quelles.
Qu'est-ce que rebeccapurple ?
C'est #663399, ajouté à CSS en 2014 en mémoire de Rebecca Meyer, la fille de l'auteur CSS Eric Meyer. C'est le nom de couleur le plus récemment ajouté à CSS.
Faut-il utiliser des noms de couleurs ou des codes HEX ?
Utilisez des valeurs HEX, RGB, HSL ou OKLCH, idéalement stockées dans des propriétés personnalisées, pour le design en production, car les noms ne couvrent que 148 points fixes. Les noms conviennent pour des tests rapides, de la documentation et l'enseignement, où la lisibilité compte plus que la précision.
D'où viennent les noms
HTML 4 définissait 16 noms de couleurs de base : black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal et aqua. Les navigateurs avaient aussi adopté une liste bien plus longue issue du X Window System, et CSS3 a officialisé cette liste. CSS Color Level 4 ajoute rebeccapurple et laisse le reste inchangé.
Comme les noms X11 ont été choisis par des personnes et non par une formule, ils sont inégaux. Il y a beaucoup de quasi-blancs et plusieurs verts presque identiques, tandis que certaines teintes n'ont aucun nom. Trier le tableau par teinte montre clairement ces trous.
Lire les colonnes supplémentaires
OKLCH décrit une couleur par sa luminosité, sa chroma (son intensité) et sa teinte, dans un espace conçu pour que des écarts égaux paraissent égaux. C'est utile pour construire des palettes à partir d'une couleur nommée, car changer seulement la luminosité garde une teinte qui paraît identique.
Les colonnes de contraste utilisent la formule WCAG 2. Il faut 4.5:1 ou plus pour le texte courant et 3:1 pour le grand texte. La colonne Tailwind indique la classe de la palette par défaut de Tailwind qui paraît la plus proche, avec une valeur d'écart : en dessous de 2, la différence est difficile à voir.
Nom
HEX
RGB
HSL
OKLCH
Sur blanc
Sur noir
Tailwind le plus proche
Rouge
Rose
Orange
Jaune
Brun
Vert
Cyan
Bleu
Violet
Blanc
Noir et gris
Copier
Les 148 en un coup d'œil, par teinte
Les 148 noms de couleurs
Rechercher un nom ou un HEX
Trier par
Nom
Teinte (spectre)
Luminosité (du sombre au clair)
{n} affichées
· {v} copié
Famille de couleurs
Toutes
Couleurs nommées CSS et HTML
Échantillon
écart {d}
Les ratios de contraste en vert atteignent 4.5:1, suffisant pour le texte courant. L'exemple Aa utilise le noir ou le blanc, selon celui qui se lit le mieux.