Hex, RGB et HSL expliqués

Chaque couleur à l'écran est un mélange de lumière rouge, verte et bleue. Un code hex écrit ces trois quantités sous forme de paires de chiffres en base 16, de 00 (aucune) à FF (maximum, soit 255). Ainsi, #FF0000 est un rouge pur sans vert ni bleu, #808080 un gris moyen, et #4F98FB contient un peu de rouge, pas mal de vert et presque tout le bleu, ce qui donne un bleu ciel franc.

RGB dit exactement la même chose avec des nombres ordinaires : rgb(79, 152, 251). HSL décrit la couleur comme on a tendance à la penser : la teinte est la position sur un cercle chromatique de 0 à 360 degrés, la saturation son intensité, et la luminosité va du noir à 0% au blanc à 100%. Pour foncer légèrement une couleur, baisser la luminosité en HSL est bien plus simple que deviner de nouveaux chiffres hex.

OKLCH est le plus récent des quatre. Sa valeur de luminosité est conçue pour correspondre à la clarté perçue des couleurs : un jaune et un bleu avec le même L paraissent à peu près aussi clairs. C'est donc un format fiable pour construire des palettes aux paliers réguliers.

Quel format utiliser ?

Utilisez le hex pour partager une couleur, la coller dans un outil de design ou définir les couleurs de marque dans un créateur de sites : presque tous les outils l'acceptent. Utilisez RGB ou HSL en CSS pour ajouter de la transparence ou ajuster une couleur à la main. Utilisez OKLCH pour construire une palette complète en CSS avec une luminosité constante d'une teinte à l'autre.

Quel que soit votre choix, ils décrivent la même couleur. Copier la valeur depuis cette page dans un autre format ne change pas son apparence.

Choisir une couleur de marque qui fonctionne sur un site web

Une couleur de marque doit remplir plusieurs rôles : ressortir sur les boutons, rester lisible derrière du texte blanc, et ne pas fatiguer l'œil sur toute une page. Les bleus, verts et rouges profonds de tonalité moyenne réussissent généralement les trois. Les couleurs très claires (jaune, rose pastel) sont belles sur un logo mais font de mauvais boutons, car ni le texte blanc ni le noir ne s'y lisent bien sans ajustement.

Le panneau de contraste montre cela immédiatement. Si le texte blanc obtient moins de 4,5:1, utilisez soit du texte noir, soit une nuance plus sombre de l'échelle pour les boutons.

Teintes, nuances et une palette simple

Les teintes mélangent votre couleur avec du blanc ; les nuances la mélangent avec du noir. Une palette de site web pratique n'a besoin que de quelques-unes : une teinte très claire pour les fonds de section, la couleur principale pour les boutons et liens, et une nuance plus sombre pour les états de survol. Ajoutez des gris neutres pour le texte et les bordures et vous avez un ensemble complet et cohérent.

Pour vérifier une paire spécifique texte et fond (par exemple texte gris sur fond teinté), utilisez le vérificateur de contraste de couleur, qui note à la fois WCAG AA et AAA.

Comment ça marche

Utilisez le sélecteur de couleur, ou tapez une valeur comme #4F98FB, rgb(79, 152, 251) ou hsl(215, 95%, 65%). Le # est facultatif, et la forme abrégée à trois chiffres comme #39F fonctionne aussi.

Pour afficher ou vérifier un code hex, collez-le. Si le code n'est pas valide (par exemple une lettre après F ou un mauvais nombre de chiffres), le champ devient rouge.

Copiez n'importe quel format en un clic. OKLCH est le format CSS moderne qui garde la luminosité cohérente à travers les teintes.

Cliquez sur n'importe quelle teinte ou nuance pour en faire la couleur actuelle.

Lisez les ratios de contraste pour décider si le texte blanc ou noir convient sur cette couleur.

Conseils

Pour les boutons, visez au moins un contraste de 4,5:1 entre le texte et la couleur du bouton.

Construisez une palette à partir d'une couleur de marque : une teinte claire pour les fonds, la couleur elle-même pour les boutons, une nuance sombre pour les états de survol et le texte.

Les écrans diffèrent. Vérifiez votre couleur de marque sur un téléphone autant que sur un ordinateur portable.

Questions fréquentes

Qu'est-ce qu'un code couleur hex ?

Un code à six chiffres pour une couleur à l'écran, écrit comme # suivi de trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu. #FF0000 est le rouge pur ; #000000 est le noir ; #FFFFFF est le blanc.

Quelle est la différence entre HEX, RGB et HSL ?

Ils décrivent les mêmes couleurs de manières différentes. HEX et RGB donnent les quantités de rouge, vert et bleu. HSL donne la teinte (l'angle sur une roue chromatique), la saturation et la luminosité, ce qui est plus facile à ajuster à la main.

Qu'est-ce que OKLCH et devrais-je l'utiliser ?

OKLCH est un format de couleur CSS plus récent basé sur la façon dont les gens perçoivent la couleur. Deux couleurs avec la même valeur L paraissent également claires, ce qui facilite des palettes cohérentes. Tous les navigateurs majeurs actuels le prennent en charge.

Comment le contraste est-il calculé ?

En utilisant la formule WCAG 2 : luminance relative de la couleur la plus claire plus 0,05, divisée par celle de la couleur la plus sombre plus 0,05. Pour une vérification complète à deux couleurs, utilisez le vérificateur de contraste de couleur We.Inc.

Comment savoir à quelle couleur correspond un code hex ?

Collez le code dans le champ en haut de cette page. L'échantillon affiche la couleur et vous obtenez les valeurs RGB, HSL et OKLCH correspondantes, ainsi que des versions plus claires et plus foncées. Si le champ devient rouge, le code n'est pas une valeur hex valide à trois ou six chiffres.

Que signifie un code hex à trois chiffres comme #F80 ?

C'est une forme abrégée où chaque chiffre est doublé. #F80 est la même couleur que #FF8800. Seules les couleurs dont les paires se répètent peuvent s'écrire ainsi.

Les codes hex sont-ils sensibles à la casse ?

Non. #4f98fb et #4F98FB sont la même couleur. Choisissez un style et gardez-le dans votre code pour retrouver facilement les valeurs.

Comment convertir un code hex en RGB à la main ?

Séparez les six chiffres en trois paires et convertissez chaque paire de la base 16 à la base 10. Pour #4F98FB : 4F vaut 4 x 16 + 15 = 79, 98 vaut 9 x 16 + 8 = 152, FB vaut 15 x 16 + 11 = 251, donc la couleur est rgb(79, 152, 251). Le sélecteur le fait pour vous.

Comment obtenir le code hex d'une couleur affichée à l'écran ?

Cliquez sur le petit carré de couleur à côté du champ de texte pour ouvrir le sélecteur de couleur de votre navigateur. Certains navigateurs y proposent une pipette qui prélève une couleur à l'écran ; sinon, faites une capture d'écran, utilisez la pipette d'un éditeur d'images, puis collez le code ici.

Sélecteur de couleur hex

Sélecteur et vérificateur de couleur hex : HEX, RGB, HSL | We.Inc

Sélecteur et vérificateur de couleur hex gratuit : choisissez une couleur ou collez un code hex pour la voir, puis copiez les valeurs HEX, RGB, HSL et OKLCH, teintes, nuances et contrastes.