Utiliser le convertisseur de couleurs
- Choisissez HEX, RGB ou HSL comme format de départ.
- Saisissez tous les canaux : 3 ou 6 chiffres pour HEX, entiers 0–255 pour RGB, teinte numérique et pourcentages 0–100 pour HSL.
- Choisissez la cible et sélectionnez Convertir. Le code et l’échantillon apparaissent ensemble.
- Copiez le résultat ou inversez les formats. Toute modification efface l’ancien résultat jusqu’à la conversion suivante.
Trois écritures pour la même couleur web
HEX et RGB codent la lumière rouge, verte et bleue. #3366FF correspond à 51, 102, 255 ; #0F8 devient #00FF88. La sortie HEX comporte toujours six chiffres majuscules.
HSL décrit la teinte, la saturation et la luminosité. La teinte parcourt le cercle chromatique, la saturation va du gris au vif et la luminosité du noir au blanc. HSL facilite les ajustements de couleurs apparentées.
Directions et formules
HEX vers RGB convertit chaque paire hexadécimale en 0–255 ; RGB vers HEX fait l’inverse. RGB vers HSL normalise les canaux puis utilise minimum, maximum et secteur de teinte. HSL vers RGB calcule chroma, secteur et décalage de luminosité.
Les six directions sont prises en charge : HEX vers RGB, RGB vers HEX, HEX vers HSL, HSL vers HEX, RGB vers HSL et HSL vers RGB. RGB sert de représentation interne entre HEX et HSL.
Plages, cycle de teinte et précision
- HEX accepte exactement 3 ou 6 chiffres et un # facultatif, sans alpha, nom de couleur ni expression CSS libre.
- RGB exige des entiers de 0 à 255 et ne limite pas silencieusement une valeur incorrecte.
- Saturation et luminosité vont de 0% à 100%. La teinte est périodique : 420° = 60° et −120° = 240°.
- RGB et HEX sont entiers ; HSL affiche au plus deux décimales. Les gris à saturation nulle utilisent 0°.
- L’aperçu ne remplace ni calibration, ni profil d’impression, ni contrôle de contraste.
Usages et sortie
- Traduisez un jeton HEX en canaux RGB pour le code ou la documentation.
- Passez de RGB à HSL avant d’ajuster une couleur associée de survol, bordure ou fond.
- Vérifiez l’échantillon et copiez la valeur CSS ; la saisie reste locale et n’est pas envoyée aux statistiques.
- Aucune palette, extraction depuis une image ou gestion de profil CMYK.
Directions de conversion HEX, RGB et HSL
Choisissez la paire correspondant au code disponible et au code voulu. Chaque direction indique les noms complets, la règle et un exemple entrée-résultat.
HEX hexadécimal vers RGB rouge, vert, bleu
Séparez les six chiffres HEX en trois paires puis convertissez chaque paire en entier décimal. Exemple : #3366FF donne 0x33 = 51, 0x66 = 102 et 0xFF = 255, soit rgb(51, 102, 255). #0F8 devient d’abord #00FF88.
RGB rouge, vert, bleu vers HEX hexadécimal
Convertissez chaque canal entier 0–255 en deux chiffres hexadécimaux et assemblez-les après #. Exemple : rgb(255, 87, 51) donne FF, 57 et 33, donc #FF5733. Un canal inférieur à 16 reçoit un zéro initial.
HEX hexadécimal vers HSL teinte, saturation, luminosité
Décodez d’abord HEX en RGB, normalisez les canaux puis calculez HSL avec le maximum, le minimum et leur différence. Exemple : #3366FF devient hsl(225deg, 100%, 60%).
HSL teinte, saturation, luminosité vers HEX hexadécimal
La teinte choisit le secteur chromatique ; saturation et luminosité produisent RGB, ensuite arrondi et codé en HEX. Exemple : hsl(60deg, 100%, 50%) donne #FFFF00. 420° donne le même résultat car la teinte se répète tous les 360°.
RGB rouge, vert, bleu vers HSL teinte, saturation, luminosité
Normalisez RGB, trouvez maximum et minimum, utilisez leur milieu pour la luminosité et leur différence pour saturation et teinte. Exemple : rgb(128, 128, 128) donne environ hsl(0deg, 0%, 50.2%) ; à saturation nulle, la teinte ne modifie pas le gris.
HSL teinte, saturation, luminosité vers RGB rouge, vert, bleu
Calculez le chroma, placez-le dans le secteur de teinte et ajoutez le décalage de luminosité avant l’échelle 0–255. Exemple : hsl(240deg, 100%, 50%) donne rgb(0, 0, 255). Les canaux finaux sont arrondis à l’entier.
Exemples de conversion
Exemple 1 : HEX vers RGB et HSL
#3366FF donne rgb(51, 102, 255), puis hsl(225deg, 100%, 60%) si la cible devient HSL. Le bleu visible reste identique.
Exemple 2 : cycle HSL vers HEX
H=420, S=100 et L=50 équivaut à 60°. Le résultat jaune est #FFFF00 ou rgb(255, 255, 0).
Questions fréquentes
Puis-je saisir la forme courte #RGB ?
Oui. #0F8 devient #00FF88. Les formes alpha à quatre ou huit chiffres sont exclues.
Pourquoi le gris a-t-il une teinte de 0° ?
À saturation 0%, toutes les teintes donnent le même gris ; 0° sert de valeur stable.
Quand un changement de format actualise-t-il le résultat ?
Avant Convertir ou après une saisie, il reste vide. Après une conversion réussie, changer seulement le format actualise immédiatement.
Un aller-retour conserve-t-il les décimales HSL ?
La couleur passe par des canaux RGB entiers ; les nombres HSL peuvent donc varier légèrement.
Puis-je l’utiliser pour l’impression ou le contraste ?
Non. CMYK, calibration et contraste WCAG demandent des outils et un contexte distincts.