Comment convertir du HEX en RGB et HSL ?
Pour convertir une couleur HEX en RGB, divisez-la en trois paires de 2 chiffres et convertissez chacune de l'hexadécimal au décimal (0-255) ; pour obtenir le HSL, calculez la teinte, la saturation et la luminosité à partir de ces valeurs RGB. Exemple : #4F46E5 devient rgb(79, 70, 229) et hsl(243, 75 %, 59 %).
Étapes pour convertir HEX en RGB et HSL
- Retirez le symbole # et divisez le code HEX à 6 chiffres en trois paires de 2 chiffres (pour #4F46E5 : 4F, 46, E5).
- Convertissez chaque paire hexadécimale en nombre décimal de 0 à 255 (4F=79, 46=70, E5=229) pour obtenir les valeurs RGB.
- Divisez chaque valeur RGB par 255 pour la normaliser sur une échelle de 0 à 1, puis trouvez le maximum et le minimum des trois.
- La luminosité est la moyenne du maximum et du minimum ; la saturation et la teinte sont calculées à partir de la différence entre le maximum et le minimum selon les formules HSL standard.
- Arrondissez la teinte en degrés entiers (0-360) et la saturation et la luminosité en pourcentages entiers (0-100 %) pour l'affichage.
De HEX à RGB à HSL
Canal RGB = parseInt(paire hex, 16) · Luminosité = (max(R,G,B) + min(R,G,B)) / 2, normalisée entre 0 et 1
- R, G, B = valeurs des canaux rouge, vert, bleu, chacune de 0 à 255
- H, S, L = teinte en degrés (0-360), saturation et luminosité en pourcentage (0-100 %)
Conversions de couleurs les plus recherchées
Combien vaut #FF0000 en RGB ?
#FF0000 correspond à rgb(255, 0, 0) : un rouge pur, avec le canal rouge au maximum et vert et bleu à zéro.
Combien vaut #FFFFFF en RGB ?
#FFFFFF correspond à rgb(255, 255, 255) : un blanc pur, avec les trois canaux au maximum.
Combien vaut #000000 en RGB ?
#000000 correspond à rgb(0, 0, 0) : un noir pur, avec les trois canaux à zéro.
Combien vaut rgb(0, 128, 0) en hexadécimal ?
rgb(0, 128, 0) correspond à #008000, car 128 en décimal vaut 80 en hexadécimal (un vert moyen).
Combien vaut #FFA500 en RGB ?
#FFA500 correspond à rgb(255, 165, 0) : l'orange standard.
Combien vaut #00FF00 en RGB ?
#00FF00 correspond à rgb(0, 255, 0) : un vert pur, avec uniquement le canal vert au maximum.
Combien vaut #0000FF en RGB ?
#0000FF correspond à rgb(0, 0, 255) : un bleu pur, avec uniquement le canal bleu au maximum.
Combien vaut rgb(255, 255, 0) en hexadécimal ?
rgb(255, 255, 0) correspond à #FFFF00 : un jaune pur, mélange de rouge et de vert au maximum.
Exemples de conversion de couleurs
| HEX | RGB | HSL |
|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75 %, 59 %) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100 %, 50 %) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100 %, 50 %) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76 %, 48 %) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0 %, 100 %) |
Questions fréquentes
Quelle est la différence entre HEX, RGB et HSL ?
HEX et RGB décrivent une couleur de la même façon, comme des quantités de lumière rouge, verte et bleue, seule la notation change (base 16 contre base 10). HSL décrit la même couleur par la teinte (la couleur elle-même), la saturation (l'intensité) et la luminosité (la clarté ou l'obscurité), ce qui est souvent plus intuitif pour ajuster une couleur à la main.
Pourquoi le blanc affiche-t-il 0 % de saturation ?
La saturation mesure à quel point une couleur s'éloigne du gris. Le blanc pur, le noir et toutes les nuances de gris intermédiaires ont des valeurs rouge, verte et bleue égales, donc leur saturation est toujours de 0 %, quelle que soit la luminosité.
Puis-je saisir un code HEX à 3 chiffres comme #FFF ?
Cet outil attend le format HEX complet à 6 chiffres (#RRGGBB). Une forme abrégée à 3 chiffres comme #FFF est une notation raccourcie CSS pour #FFFFFF, où chaque chiffre est doublé ; développez-la en 6 chiffres avant de la saisir ici.
Comment la teinte est-elle calculée quand le rouge, le vert et le bleu sont tous différents ?
La teinte dépend du canal — rouge, vert ou bleu — qui a la valeur la plus élevée, et se calcule à partir de la position relative des deux autres canaux. Le résultat est un angle sur une roue chromatique à 360 degrés, où 0 degré est le rouge, 120 le vert et 240 le bleu.
Cet outil peut-il m'aider à vérifier une charte graphique ?
Il convertit fidèlement une couleur donnée entre HEX, RGB et HSL, ce qui est utile pour documenter une charte graphique ou vérifier la cohérence entre une maquette de design et le code CSS. Il ne recommande toutefois pas de palettes et ne vérifie pas la conformité aux normes d'accessibilité (contraste WCAG), qui nécessitent un outil dédié.
Cet outil convertit les couleurs HEX standard à 6 chiffres utilisées sur le web ; il ne prend en charge ni les canaux alpha (transparence), ni les couleurs nommées CSS, ni les espaces colorimétriques au-delà du sRGB comme le HSV ou le LAB.
Sources: W3C CSS Color Module Level 4