Sélecteur de couleur hex

Q: Quels noms de couleurs CSS sont pris en charge ?

Les 148 couleurs nommées du module CSS Color, de aliceblue à yellowgreen , y compris rebeccapurple . Saisissez un nom dans le champ hex ou filtrez la liste sous l’outil, puis cliquez sur une couleur pour la sélectionner.

Cliquez sur la pastille pour choisir une couleur, ou saisissez un code couleur hex ou un nom de couleur CSS. Vous obtenez d’un coup tous les formats de couleur, les tons clairs, les tons foncés et les harmonies assortis, ainsi qu’un contrôle instantané du contraste WCAG avec un texte blanc ou noir.

#7C3AEDCliquez pour choisir une couleur

Code couleur hex

HEX
RGB
HSL
HSV
CMYK
Nom CSS

Tons clairs et foncés

Cliquez sur une pastille pour copier son code hex.

Harmonies de couleurs

Contraste et accessibilité (WCAG)

Texte blanc sur cette couleur

Texte noir sur cette couleur

Noms de couleurs CSS

Filtrer les noms de couleurs

Confidentiel : vos données sont traitées dans votre navigateur et ne sont envoyées à aucun serveur.

Comment utiliser le sélecteur de couleur hex

Cliquez sur la grande pastille pour ouvrir le sélecteur de couleur de votre système, ou saisissez un code hex comme #1E90FF ou un nom comme tomato.
Copiez le format dont vous avez besoin : HEX, RGB, HSL, HSV ou CMYK (CMJN). Cliquez sur une pastille de ton clair, de ton foncé ou d’harmonie pour copier son code hex.
Consultez les cases de contraste pour savoir si un texte blanc ou noir sur votre couleur atteint le niveau WCAG AA ou AAA.

Comment fonctionnent les codes couleur hexadécimaux

Un code couleur hex comme #FF6347 contient trois octets : rouge (FF = 255), vert (63 = 99) et bleu (47 = 71). Chaque canal va de 00 à FF, ce qui donne 256 × 256 × 256 = 16 777 216 couleurs possibles. Des valeurs égales produisent des gris – #000000 est le noir, #808080 un gris moyen et #FFFFFF le blanc – et plus les valeurs sont élevées, plus la couleur est claire.

Tons clairs, tons foncés et harmonies de couleurs

Un ton clair est votre couleur mélangée à du blanc, et un ton foncé votre couleur mélangée à du noir. Le sélecteur affiche les deux par paliers de 10 %, ce qui est pratique pour les états de survol, les bordures et les arrière-plans assortis à une couleur de marque.

Les harmonies font tourner la teinte sur le cercle chromatique tout en conservant la saturation et la luminosité :

Complémentaire (180°) – la couleur opposée, pour un contraste fort et des boutons d’appel à l’action.
Analogue (±30°) – les couleurs voisines sur le cercle, pour des palettes calmes et cohérentes.
Triadique (±120°) – trois couleurs régulièrement espacées, pour des designs vifs mais équilibrés.

Contraste des couleurs et WCAG

Les Règles pour l’accessibilité des contenus Web (WCAG) exigent un rapport de contraste d’au moins 4,5:1 pour un texte normal (niveau AA) et de 7:1 pour le niveau AAA. Un texte de grande taille – 18 pt, ou 14 pt en gras – doit atteindre 3:1 pour le niveau AA. Ce rapport compare la luminance relative des couleurs du texte et de l’arrière-plan ; il va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).

Questions fréquentes

Qu’est-ce qu’un code couleur hexadécimal ?

Un code couleur hex décrit une couleur avec six chiffres hexadécimaux : deux pour le rouge, deux pour le vert et deux pour le bleu, par exemple #FF6347 (tomato). Le CSS, le HTML, les outils de design et les logiciels de retouche d’image les comprennent tous.

Combien de couleurs un code hex peut-il représenter ?

256 × 256 × 256 = 16 777 216 couleurs. Avec une paire alpha supplémentaire (#RRGGBBAA), chacune peut en plus avoir 256 niveaux de transparence.

Quels noms de couleurs CSS sont pris en charge ?

Les 148 couleurs nommées du module CSS Color, de aliceblue à yellowgreen, y compris rebeccapurple. Saisissez un nom dans le champ hex ou filtrez la liste sous l’outil, puis cliquez sur une couleur pour la sélectionner.