Français
Comment convertir un code HEX en RGB (et inversement)
Ce convertisseur de couleurs transforme un code HEX en RGB, HSL, HSV, CMJN et OKLCH pendant la saisie, et il fonctionne aussi dans l’autre sens : collez rgb(255, 99, 71) dans n’importe quelle case et vous obtenez #FF6347. Chaque case accepte tous les formats, inutile de chercher le bon champ.
Pour le faire à la main, sachez qu’un code HEX n’est que trois nombres écrits en base 16. Prenez #3B82F6, découpez-le en paires et convertissez chaque paire :
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Passer de RGB à HEX, c’est l’inverse. Divisez chaque canal par 16 : le quotient donne le premier chiffre et le reste le second. 255 donne 15 reste 15, soit FF. 99 donne 6 reste 3, soit 63. Voilà pourquoi le rouge tomate, rgb(255, 99, 71), devient #FF6347.
Codes couleur courants en HEX, RGB et HSL
Ceux-ci valent la peine d’être reconnus au premier coup d’œil. Ce sont aussi des noms de couleur CSS valides, et l’outil affiche le nom le plus proche pour toute couleur saisie (#3B82F6 est proche de dodgerblue, sans être identique).
| Nom | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Codes HEX courts, longs et transparents
Un code HEX existe en quatre longueurs. Trois chiffres, c’est l’abréviation où chaque chiffre est doublé, donc #F60 signifie #FF6600. Six chiffres, c’est la forme normale. Huit chiffres ajoutent un canal alpha à la fin : #3B82F680 est le même bleu à 128 sur 255, soit environ 50 % d’opacité. Quatre chiffres en sont la version courte. Les navigateurs comprennent les quatre depuis des années, mais certaines applis de design et certains clients mail n’acceptent encore que six chiffres : dans le doute, collez le code à six chiffres et réglez l’opacité à part.
Quel format utiliser ?
- HEX pour tout ce que vous collez dans un outil de design, une charte graphique ou un CMS. C’est court et personne ne le lit de travers.
- RGB / RGBA quand vous avez besoin de transparence dans un CSS ancien ou dans du code JavaScript canvas.
- HSL quand vous voulez ajuster une couleur en raisonnant. Baisser le dernier chiffre l’assombrit, baisser celui du milieu la rend plus grise. Les états de survol s’écrivent bien plus facilement ainsi.
- OKLCH pour les nouveaux design systems en CSS. Sa luminosité correspond à ce que perçoit l’œil, donc deux couleurs avec le même L paraissent vraiment aussi claires l’une que l’autre, ce que HSL ne réussit pas (un jaune à 50 % de luminosité paraît bien plus clair qu’un bleu à 50 %).
- CMJN seulement comme repère approximatif pour l’impression. Les valeurs viennent ici de la formule simple, pas d’un profil d’imprimante, donc la brochure ne correspondra pas exactement à votre écran. Demandez à l’imprimeur quel profil il utilise.
- HSV / HSB surtout pour retrouver le sélecteur de Photoshop ou Figma, qui l’utilisent.
Vérificateur de contraste : qu’est-ce qui passe le WCAG ?
Le WCAG 2 compare la luminosité relative du texte et du fond et l’exprime sous forme de ratio, de 1:1 (identiques) à 21:1 (noir sur blanc). Les seuils sont fixes :
| Niveau | Texte normal | Grand texte (24px, ou 18,66px en gras) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Les icônes, les bordures de champs et les contours de focus doivent atteindre 3:1 selon le WCAG 2.1. Voici le score de quelques couleurs réelles en texte sur fond blanc :
| Couleur du texte sur #FFFFFF | Ratio | Résultat |
|---|---|---|
| #949494 | 3,03:1 | Grand texte uniquement |
| #777777 | 4,48:1 | Échoue en AA pour le texte courant, de justesse |
| #767676 | 4,54:1 | Réussit AA |
| #595959 | 7,00:1 | Réussit AAA |
| #3B82F6 | 3,68:1 | Grand texte et boutons uniquement |
| #008080 | 4,77:1 | Réussit AA |
La ligne #777777 est le piège classique. Elle semble identique à #767676, et un vérificateur qui n’affiche qu’une décimale montrera 4,5, mais la règle est « au moins 4,5 » et 4,48 n’y est pas. Cet outil n’arrondit jamais un ratio en échec jusqu’au seuil.
Quand une couleur échoue, le vérificateur cherche la nuance la plus proche de même teinte qui réussit. Pour #3B82F6 sur blanc, il propose #1E6FF5 pour AA (4,52:1) et #0950C5 pour AAA (7,08:1). Appuyez sur Utiliser pour la charger, ou copiez-la directement dans votre feuille de style. Les jaunes et oranges vifs demandent souvent une nuance bien plus sombre avant de fonctionner en texte sur blanc ; pour ceux-là, gardez la couleur vive pour les fonds et mettez un texte foncé par-dessus.
Créer une palette et prélever des couleurs dans une image
Le panneau palette crée une échelle de teintes et de nuances de 50 à 950 (la nomenclature de Tailwind), ainsi que des jeux complémentaires, analogues, triadiques, complémentaires adjacents, carrés et monochromes. Cliquez sur un échantillon pour le copier, puis exportez l’ensemble en propriétés personnalisées CSS, variables SCSS, JSON ou bloc de couleurs Tailwind, ou téléchargez une bande PNG à glisser dans une présentation ou à envoyer à un client.
Pour retrouver une couleur d’un logo ou d’une photo, chargez l’image et touchez l’endroit voulu. Un seul pixel d’un JPG peut différer de quelques nuances de ce que vous voyez à cause du bruit de compression, donc pour les photos passez à la moyenne 3×3 ou 5×5. Dans Chrome et Edge, le bouton Prélever à l’écran peut capturer une couleur n’importe où sur votre écran, y compris dans d’autres fenêtres. Rien n’est envoyé ; l’image est lue dans votre navigateur.
Questions fréquentes
Comment convertir un code HEX en RGB ?
Découpez les six chiffres en trois paires et convertissez chaque paire de la base 16 en un nombre de 0 à 255. #3B82F6 donne 3B = 59, 82 = 130 et F6 = 246, donc la valeur RGB est rgb(59, 130, 246).
Comment convertir du RGB en HEX ?
Écrivez chaque canal sous forme de nombre hexadécimal à deux chiffres et assemblez-les après un #. rgb(255, 99, 71) donne FF, 63 et 47, donc le code HEX est #FF6347, la couleur CSS tomato.
Quel ratio de contraste faut-il pour réussir le niveau WCAG AA ?
Le texte normal doit atteindre au moins 4,5:1 et le grand texte (24px, ou 18,66px en gras) 3:1. Le gris #767676 sur blanc fait 4,54:1, le gris le plus clair qui passe encore pour le texte courant.
Que signifie un code HEX à 8 chiffres ?
Les deux derniers chiffres sont le canal alpha (opacité). #3B82F680 est le même bleu à 128/255 d’opacité, environ 50 %, soit rgba(59, 130, 246, 0.5) en CSS.
Que signifie un code HEX à 3 chiffres comme #F60 ?
Chaque chiffre est doublé, donc #F60 vaut #FF6600. La forme courte ne fonctionne que si les deux chiffres de chaque paire sont identiques, c’est pourquoi #3B82F6 n’a pas de version à 3 chiffres.
La valeur CMJN est-elle assez précise pour l’impression ?
C’est un point de départ, pas une épreuve d’impression. L’outil utilise la formule standard, donc #3B82F6 devient cmyk(76%, 47%, 0%, 4%), mais le vrai mélange d’encres dépend du profil colorimétrique de l’imprimante et du papier : demandez ses valeurs à votre imprimeur.
Comment obtenir le code HEX d’une couleur dans une photo ?
Chargez l’image dans le panneau ci-dessus et touchez l’endroit voulu ; l’outil lit ce pixel. Pour les photos, passez à une moyenne 3×3 ou 5×5, car un pixel isolé est souvent plus bruité que la couleur que vous voyez.
Quelle différence entre HSL et HSV ?
Les deux partent de la même teinte, mais une luminosité HSL de 100 % donne toujours du blanc alors qu’une valeur HSV de 100 % donne la version la plus vive de la couleur. Le rouge pur s’écrit hsl(0, 100%, 50%) et hsv(0, 100%, 100%).