Convertisseur de Couleurs (HEX/RGB/HSL)
Convertissez les couleurs entre les formats HEX, RGB et HSL. Inclut un sélecteur de couleur visuel et un aperçu.
Comment Utiliser
- Entrez une valeur de couleur dans n'importe quel format (HEX, RGB ou HSL)
- Voyez instantanément les valeurs converties dans tous les autres formats
- Utilisez le sélecteur de couleur pour choisir une couleur visuellement
- Copiez n'importe quel format avec le bouton Copier
Questions Fréquentes
-
Quelle est la différence entre HEX, RGB et HSL ?
HEX utilise la notation hexadécimale (#FF5733). RGB définit les couleurs par les valeurs Rouge, Vert, Bleu (0-255). HSL définit les couleurs par la Teinte (0-360), la Saturation (0-100%) et la Luminosité (0-100%).
-
Quel format de couleur utiliser en CSS ?
Les trois formats sont valides en CSS. HEX est le plus compact, RGB est intuitif pour mélanger les couleurs, et HSL est idéal pour créer des variations de couleur en ajustant la luminosité ou la saturation.
-
Prend-il en charge le canal alpha/la transparence ?
La version actuelle convertit les couleurs opaques. La prise en charge des canaux alpha (RGBA, HSLA, HEX à 8 chiffres) est prévue pour une future mise à jour.
-
Puis-je utiliser le sélecteur de couleur sur mobile ?
Oui, la saisie de couleur utilise le sélecteur de couleur natif sur tous les appareils, y compris les navigateurs mobiles.
Les trois formats de couleur du web
Le développement front-end et le design d'interface impliquent de jongler constamment entre plusieurs notations de couleurs. Comprendre les forces et faiblesses de chaque format vous permettra de choisir le plus adapté à chaque situation.
HEX : la notation la plus universelle
Le format hexadécimal (#RRGGBB) est la représentation la plus répandue sur le web. Chaque paire de chiffres hexadécimaux encode l'intensité d'un canal de couleur (rouge, vert, bleu) sur une échelle de 0 à 255 :
#FF0000→ rouge pur (255, 0, 0)#000000→ noir absolu#FFFFFF→ blanc absolu#1A2B3C→ un bleu foncé
La notation courte #RGB existe pour les couleurs dont chaque canal est un chiffre doublé : #FF5500 peut s'écrire #F50.
Quand l'utiliser : partout où la concision prime — fichiers CSS, code partagé avec des designers, valeurs copiées depuis Figma ou Adobe XD.
RGB : le modèle de la lumière
Le format rgb(rouge, vert, bleu) représente chaque canal par un entier de 0 à 255. Ce modèle est dit additif : superposer les trois canaux à leur intensité maximale donne du blanc, comme la superposition de trois faisceaux lumineux.
color: rgb(255, 87, 51);
background-color: rgb(0, 0, 0);
Quand l'utiliser : quand vous calculez des couleurs dynamiquement en JavaScript, ou quand vous souhaitez ajuster un canal spécifique par programmation.
HSL : le format le plus intuitif pour les designers
HSL (Hue, Saturation, Lightness) décompose la couleur en trois propriétés humainement compréhensibles :
- Teinte (Hue) : l'angle sur le cercle chromatique (0–360°), où 0° = rouge, 120° = vert, 240° = bleu
- Saturation : l'intensité de la couleur (0% = gris, 100% = couleur pure)
- Luminosité : 0% = noir, 50% = couleur normale, 100% = blanc
color: hsl(14, 100%, 60%); /* orange vif */
color: hsl(14, 100%, 40%); /* orange sombre */
color: hsl(14, 30%, 60%); /* orange désaturé, pâle */
Quand l'utiliser : pour créer des variations de couleur cohérentes (survol, états actifs, palettes), en modifiant uniquement la luminosité ou la saturation tout en conservant la teinte.
Choisir le bon format selon le contexte
| Situation | Format recommandé |
|---|---|
| Code CSS statique | HEX |
| Animation ou calcul dynamique | RGB |
| Création de palettes et thèmes | HSL |
| Partage avec designers | HEX |
| Variables CSS avec opacité | hsl() + oklch() |
La maîtrise des trois notations est indispensable pour tout développeur web : les API CSS modernes et les design tokens les utilisent tous en fonction du contexte.