Comment convertir les couleurs entre HEX, RVB et HSL
Réponse rapide
Pour convertir une couleur : ouvrez le Convertisseur de couleurs, saisissez une couleur dans n'importe quel format (HEX, RGB, HSL), et l'outil affiche instantanément l'équivalent dans tous les autres formats. Toutes les conversions s'effectuent localement dans votre navigateur : aucune donnée n'est téléchargée.
Introduction
Les couleurs peuvent être représentées dans plusieurs formats : HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) et autres. Différents outils et contextes utilisent différents formats : CSS utilise souvent HEX ou RGB, les outils de conception peuvent utiliser HSL et APIs peut en utiliser n'importe lequel. La conversion entre formats vous permet d'utiliser une couleur définie dans un système dans un contexte qui en nécessite un autre. Ce guide vous montre comment convertir les couleurs dans votre navigateur.
Pas à pas
-
Ouvrez l'outil Convertisseur de couleurs
Accédez à la page de l'outil Convertisseur de couleurs. L'outil prend en charge les formats HEX, RGB, HSL, HSV et CMJN.
-
Entrez votre couleur
Tapez ou collez une valeur de couleur dans n'importe quel format pris en charge. Exemples : '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. L'outil détecte automatiquement le format d'entrée.
-
Examiner tous les équivalents de format
L'outil affiche la couleur dans tous les formats simultanément : HEX, RGB, HSL, HSV et CMJN. Il affiche également un échantillon de couleur afin que vous puissiez vérifier que la conversion est correcte.
-
Copiez le format dont vous avez besoin
Cliquez sur le bouton Copier à côté de n'importe quel format pour copier cette valeur dans votre presse-papiers. Utilisez-le dans votre CSS, votre outil de conception ou votre application.
-
Ajuster la couleur (facultatif)
Certains outils vous permettent d'ajuster la couleur avec des curseurs (pour HSL : teinte, saturation, luminosité) et de voir tous les formats mis à jour en temps réel. Ceci est utile pour trouver des couleurs ou des nuances associées.
Exemples
HEX à RGB et HSL
Saisir: #ff6600
Sortir: RGB : rvb (255, 102, 0)
HSL : hsl(24, 100 %, 50 %)
RGB à HEX
Saisir: RVB (0, 128, 255)
Sortir: __GARDER_35__ : #0080ff
HSL : hsl(210, 100 %, 50 %)
HSL à HEX
Saisir: hsl(120, 100 %, 50 %)
Sortir: __GARDER_35__ : #00ff00
RGB : rvb (0, 255, 0)
Problèmes courants
- HEX avec vs sans # — certains outils nécessitent le préfixe #, d'autres non. Notre convertisseur accepte les deux.
- HEX à 3 chiffres ou à 6 chiffres —#f60 est un raccourci pour #ff6600. Les deux sont valables ; le convertisseur normalise à 6 chiffres.
- HSL plage de teintes : la teinte est comprise entre 0 et 360 degrés (un cercle). 0 et 360 sont tous deux rouges. Les valeurs supérieures à 360 s'enroulent.
- Les différences d’espace colorimétrique —HEX, RGB et HSL sont toutes sRGB. CMJN est un espace colorimétrique différent (impression) et la conversion est approximative.
Conseils
- Utilisez HSL pour créer des variations de couleurs : le réglage de la teinte, de la saturation ou de la luminosité est plus intuitif que RGB.
- Utilisez HEX pour CSS — c'est le format le plus compact et le plus largement pris en charge dans les feuilles de style.
- Utilisez RGB lorsque vous devez définir la transparence alpha —rgb(255, 102, 0, 0.5) pour une opacité de 50 % (ou utilisez HEX à 8 chiffres : #ff660080).
- Utilisez notre convertisseur de couleurs pour une conversion instantanée et privée entre tous les formats de couleurs.