Noms de Couleurs et Codes Hex

Trouvez les valeurs hex, RGB et HSL d'un nom de couleur, ou le nom le plus proche d'un code. Avec nuances, teintes et contrastes WCAG pour les 148 couleurs CSS.


Saisissez un nom de couleur, ou collez une valeur hex, RGB ou HSL. Les quatre formats fonctionnent.
Effacer

Toutes les couleurs nommées de CSS

Les 148 noms de couleurs intégrés à CSS, avec leurs valeurs hex et RGB. Cliquez sur une ligne pour l'ouvrir ci-dessus.

Comment fonctionnent les codes hex

Un code hex n'est rien d'autre que trois nombres écrits en base 16 : la quantité de rouge, de vert et de bleu, chacune de 00 à FF. Ainsi #FFD700 signifie rouge à pleine intensité, vert à 215 sur 255 et pas de bleu du tout, ce que l'oeil interprète comme de l'or. Seules comptent les paires de deux chiffres, et c'est pourquoi #FFF et #FFFFFF désignent tous deux le blanc.

Hex, RGB et HSL comparés

Les trois décrivent les mêmes couleurs, ils portent simplement des informations différentes. Le hex est compact et reste le choix habituel en CSS. Le RGB reprend les mêmes nombres en décimal, plus commodes pour calculer. Le HSL sépare la teinte de la saturation et de la luminosité, ce qui rend bien plus facile la construction d'une palette à la main : gardez la teinte, changez la luminosité, et vous obtenez une nuance assortie.

Pourquoi le contraste compte

Le texte doit se détacher suffisamment de son fond pour rester lisible par les personnes malvoyantes ou sur un écran peu lumineux. Les recommandations d'accessibilité fixent un rapport de 4,5 pour 1 pour le texte normal (AA) et de 7 pour 1 pour le niveau plus strict AAA. Le grand texte peut se contenter de 3 pour 1. Cet outil calcule le rapport face au blanc et au noir afin que vous voyiez immédiatement lequel poser par-dessus.

Bon à savoir

  • CSS compte 148 couleurs nommées, dont plusieurs doublons : grey et gray, comme aqua et cyan, sont identiques.
  • L'écriture abrégée du hex ne marche que si chaque paire se répète : #FFCC00 peut s'écrire #FC0, mais #FFD700 ne peut pas être raccourci.
  • Deux chiffres hex supplémentaires définissent la transparence, si bien que #FFD70080 correspond à de l'or à environ 50% d'opacité.
  • Pour bâtir une palette, gardez la teinte en HSL et ne faites varier que la luminosité. Les couleurs paraîtront toujours apparentées.

Questions fréquentes

La couleur CSS nommée gold correspond à #FFD700, soit rgb(255, 215, 0). C'est un jaune doré lumineux plutôt qu'un ton métallique, car une couleur unie ne peut pas reproduire l'éclat de l'or véritable. Pour un rendu plus métallique, les graphistes l'associent généralement à des ors plus sombres comme #B8860B, que CSS nomme darkgoldenrod.

Saisissez le nom dans le champ ci-dessus et vous obtenez d'un coup les valeurs hex, RGB et HSL. Cela fonctionne pour les 148 couleurs nommées de CSS, et aussi dans l'autre sens : collez un code hex et l'outil indique la couleur nommée la plus proche ainsi que sa distance exacte.

Ils portent exactement la même information dans deux notations différentes. Le hex écrit chacun des trois canaux avec deux chiffres en base 16, donc #FF7F50 vaut rouge 255, vert 127, bleu 80. Le RGB écrit ces mêmes nombres en décimal sous la forme rgb(255, 127, 80). Aucun n'est plus précis ; le hex est simplement plus court à taper en CSS.

Teinte, saturation et luminosité. La teinte est la position sur la roue chromatique de 0 à 360 degrés, la saturation indique la vivacité de la couleur, et la luminosité va du noir à 0% au blanc à 100%. C'est le format le plus pratique pour concevoir, car conserver la teinte en ne changeant que la luminosité produit une série de nuances qui vont manifestement ensemble.

La spécification CSS comporte 148 couleurs nommées, transparent incluse. Plusieurs noms renvoient à des valeurs identiques, notamment grey et gray, aqua et cyan, ainsi que magenta et fuchsia. La liste complète avec les valeurs hex et RGB figure sur cette page.

Les recommandations d'accessibilité demandent au moins 4,5 pour 1 pour le corps de texte normal et 3 pour 1 pour le grand texte, ce qui correspond au niveau AA. Le niveau plus strict AAA exige 7 pour 1. Cet outil calcule le rapport de votre couleur face au blanc et au noir et indique lequel est conforme, pour que vous choisissiez tout de suite l'option lisible.

Oui. Un code hex à huit chiffres ajoute deux chiffres d'alpha à la fin, où 00 est totalement transparent et FF totalement opaque. Ainsi #FF000080 est un rouge à environ 50% d'opacité. Tous les navigateurs actuels le prennent en charge, même si l'ancienne notation rgba() reste très répandue.

Parce que les 148 couleurs nommées ne représentent qu'un échantillon minuscule des quelque 16,7 millions qu'un écran peut afficher. Si votre valeur ne tombe pas sur l'un de ces points précis, cet outil cherche la couleur nommée la plus proche en mesurant la distance entre les deux dans l'espace RGB, et précise qu'il s'agit d'une approximation et non d'une correspondance.

Quel est le code hex d'une couleur ?

Saisissez un nom de couleur et obtenez d'un coup ses valeurs hex, RGB et HSL, ou collez n'importe quel code pour trouver la couleur CSS nommée la plus proche. Gold vaut #FFD700, coral #FF7F50 et teal #008080. Chaque résultat affiche aussi les nuances, les teintes et le rapport de contraste face au noir et au blanc.