Sélecteur de couleur : HEX, RGB, HSL
Choisir une couleur et obtenir ses codes HEX, RGB et HSL, le contraste avec le blanc et le noir et une petite palette assortie, à copier en un clic.
Les couleurs sont calculées entièrement dans le navigateur, sans enregistrer aucune donnée. Pratique pour un site, une feuille de style, une présentation ou un visuel.
Essayer un autre outil
Une sélection pour compléter cet outilCe sélecteur de couleur affiche les codes d’une couleur dans les trois notations du web : HEX (#3B82F6), RGB (rgb(59, 130, 246)) et HSL (hsl(217, 91%, 60%)). On choisit la couleur dans la palette du système ou on saisit un code HEX, puis on copie le code voulu en un clic. L’outil indique aussi si un texte clair ou foncé se lit mieux sur cette couleur, avec les rapports de contraste, et propose une teinte plus claire, une plus foncée, la complémentaire et un fond doux.
Comment utiliser cet outil
- 01Choisir la couleurUtilisez le sélecteur de couleur, ou saisissez un code HEX à 3 ou 6 chiffres.
- 02Copier le codeHEX, RGB ou HSL : chaque code se copie d’un clic pour votre CSS ou votre logiciel.
- 03Explorer la paletteCliquez sur une teinte proposée pour la sélectionner à son tour.
Dans quels cas est-ce utile ?
- Design webObtenir les codes exacts d’une couleur pour une feuille de style.
- Identité visuelleNoter les codes d’une couleur de marque dans les trois notations.
- AccessibilitéChoisir une couleur de texte lisible sur un fond donné.
Exemples
- Un bleu de marque#3B82F6 correspond à rgb(59, 130, 246) et à hsl(217, 91%, 60%).
- Un code abrégé#0F0 est la forme courte de #00FF00, un vert pur.
- Lisibilité d’un boutonSur un jaune vif, l’outil conseille un texte foncé, car le contraste avec le noir est bien plus élevé qu’avec le blanc.
Conseils pour un meilleur résultat
- Contraste minimalPour un texte courant, visez un contraste d’au moins 4,5:1 (critère WCAG 2.1 niveau AA) ; le vérificateur de contraste compare deux couleurs précises.
- HSL pour déclinerEn HSL, il suffit de changer la luminosité (le troisième nombre) pour obtenir des nuances d’une même teinte.
- Couleurs à l’écran et à l’impressionLes codes HEX, RGB et HSL décrivent des couleurs d’écran ; pour l’impression, l’imprimeur travaille en CMJN.
HEX, RGB et HSL
HEX écrit les trois composantes rouge, vert et bleu en hexadécimal, de 00 à FF. RGB les écrit en nombres de 0 à 255. HSL décrit la même couleur par sa teinte (0 à 360°), sa saturation et sa luminosité en pourcentage, plus intuitives pour créer des variantes.
Le contraste avec le blanc et le noir
Le rapport de contraste suit la formule des règles d’accessibilité WCAG, de 1:1 (aucun contraste) à 21:1 (noir sur blanc). L’outil compare la couleur au blanc et au noir et recommande la couleur de texte la plus lisible.
La palette suggérée
Elle propose une version plus claire et une plus foncée de la couleur, sa complémentaire, à l’opposé sur le cercle chromatique, et un fond doux très clair, utile pour un encadré ou une carte.
Questions fréquentes
Comment trouver le code HEX d’une couleur ?
Choisissez la couleur dans le sélecteur : son code HEX s’affiche et se copie en un clic.
Comment convertir un code HEX en RGB ?
Saisissez le code HEX : les codes RGB et HSL correspondants s’affichent aussitôt.
Que signifie un contraste de 4,5:1 ?
C’est le minimum recommandé par les règles WCAG pour un texte courant ; 3:1 suffit pour un grand texte.
Puis-je saisir un code à trois chiffres ?
Oui, #0F0 est accepté et équivaut à #00FF00.
L’outil donne-t-il les codes CMJN ?
Non, il fournit les notations d’écran HEX, RGB et HSL.
Mes couleurs sont-elles enregistrées ?
Non. Les couleurs choisies ne quittent pas votre navigateur.