Les développeurs web et designers jonglent constamment entre les formats de couleurs : HEX pour le CSS, RGB pour les APIs graphiques, HSL pour les ajustements de teinte. Notre convertisseur unifie ces formats avec un aperçu visuel en temps réel.
HEX, RGB, HSL : comprendre les formats de couleurs
Les couleurs numériques peuvent être exprimées dans différents systèmes. Le HEX (#FF5733) utilise la notation hexadécimale sur 6 caractères. Le RGB (255, 87, 51) définit l'intensité de Rouge, Vert, Bleu sur une échelle de 0 à 255. Le HSL (14°, 100%, 60%) utilise la Teinte (angle de couleur), la Saturation et la Luminosité — un modèle plus intuitif pour les humains.
Cas d'usage
Design CSS
Convertissez entre HEX (compact) et RGB/HSL (manipulable) selon vos besoins de styling.
Palette de couleurs
En HSL, modifiez facilement la luminosité (L) pour créer des variantes claires/foncées d'une même couleur.
Design systems
Définissez vos tokens de couleur dans un format puis convertissez-les pour différentes plateformes.
Exemples concrets
| Entrée | Résultat |
|---|---|
| #3B82F6 | rgb(59, 130, 246) |
| rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| hsl(120, 100%, 50%) | #00FF00 |
Erreurs fréquentes
❌ Oublier le # devant le code HEX
✅ En CSS, le # est obligatoire : #FF5733 et non FF5733.
❌ Confondre RGB (0-255) et pourcentages
✅ RGB utilise des valeurs 0-255, HSL utilise des pourcentages pour S et L.
Conseils d'expert
- 💡En CSS moderne, utilisez hsl() pour des couleurs plus faciles à ajuster
- 💡Le HEX raccourci #F00 est équivalent à #FF0000
- 💡L'opacité s'ajoute avec rgba() ou hsla() — le 4e paramètre (0 à 1)
Questions supplémentaires
Quel format utiliser en CSS ?▼
Comment créer des variantes d'une couleur ?▼
Notez l'outil « HEX, RGB, HSL : comprendre les formats de couleurs »