Mode d’emploi : Convertisseur de code couleur
- Cliquez sur Choisir une couleur pour sélectionner la teinte voulue, ou collez une valeur HEX, RGB ou HSL dans le champ Saisir un code couleur.
- Les valeurs HEX, RGB, HSL, HSV et CMYK s'affichent dans le tableau ; le bouton Copier les place directement dans le presse-papiers.
- Dans la partie contraste, vérifiez si un texte blanc ou un texte noir est le plus lisible sur cette couleur.
- Dans la palette en dessous, cliquez sur une nuance plus claire ou plus foncée de la même famille pour la sélectionner aussitôt.
Comment convertir un code HEX en RGB
Un code HEX #RRGGBB indique les valeurs de rouge, de vert et de bleu, chacune sur deux chiffres hexadécimaux (de 00 à FF, soit de 0 à 255 en décimal). Il suffit de découper le code par paires et de convertir chaque paire en décimal pour obtenir le RGB.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
À l'inverse, pour passer du RGB au HEX, on convertit chaque valeur en deux chiffres hexadécimaux puis on les met bout à bout. Comme 37 → 25, 99 → 63 et 235 → EB, rgb(37, 99, 235) correspond à #2563EB. Un code HEX à 3 chiffres (#F80) équivaut au code à 6 chiffres obtenu en doublant chaque chiffre : #FF8800. Pour vérifier un calcul en base 16, utilisez le convertisseur de bases numériques.
Quelle différence entre HSL, HSV et CMYK ?
| Format | Composition | Usage principal |
|---|---|---|
| RGB / HEX | Intensité des trois couleurs primaires de la lumière (0 à 255) | Web, design d'interfaces écran |
| HSL | Teinte (0 à 360°), saturation, luminosité | CSS, pour ajuster seulement la clarté d'une couleur |
| HSV (HSB) | Teinte, saturation, valeur (brillance) | Sélecteurs de couleur de logiciels graphiques comme Photoshop |
| CMYK (CMJN) | Proportions des quatre encres : cyan, magenta, jaune, noir | Impression |
Les valeurs CMYK (CMJN en français) sont des approximations calculées à partir du RGB par une formule. La couleur réellement imprimée dépend du papier et du profil colorimétrique de l'imprimante : pour un document important, demandez les références couleur de votre imprimeur.
Le seuil de contraste 4,5:1 et le choix de la couleur du texte
Les règles d'accessibilité web (WCAG 2.1) recommandent un rapport de contraste d'au moins 4,5:1 (niveau AA) entre un texte normal et son fond, et d'au moins 3:1 pour les grands textes (environ 24 px ou plus, ou 18,66 px ou plus en gras). À partir de 7:1, le niveau AAA, plus exigeant, est atteint. Ces critères sont repris par les référentiels d'accessibilité utilisés en Europe et au Canada, comme le RGAA en France.
Le contraste se calcule à partir de la luminance relative L des deux couleurs : (L la plus claire + 0,05) ÷ (L la plus foncée + 0,05). Le contraste entre le blanc et le noir est le maximum possible, soit 21:1. Pour la couleur d'un bouton ou d'une bannière, choisissez la couleur de texte marquée AA dans le résultat ci-dessus : elle sera confortable à lire pour la plupart des gens.
Utiliser les codes couleur en CSS
Les valeurs converties se collent telles quelles dans votre CSS. Ces trois formats désignent exactement la même couleur :
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
Pour une couleur semi-transparente, ajoutez l'opacité après une barre oblique, par exemple rgb(37 99 235 / 50%), ou ajoutez deux chiffres à la fin du code HEX, comme #2563EB80 (80 correspond à environ 50 % d'opacité).