OnSubmitÉtapes
- Collez une valeur couleur ou choisissez une couleur.
- Lisez les formats HEX, RGB et HSL.
- Vérifiez l'aperçu.
- Copiez la valeur adaptée à votre CSS ou design.
Utilitaires · outil gratuit
Convertisseur couleur HEX, RGB et HSL
Convertir rapidement RGB, HEX, HSL…
Paramètres et résultat
Bien utiliser l’outil
Mode d’emploi : Convertisseur couleur
Cas d’usage
- CSS
- Convertir une couleur pour l'utiliser dans une feuille de style.
- Design system
- Documenter les valeurs HEX, RGB et HSL d'une palette.
- Maquettes
- Tester rapidement une couleur et son aperçu.
- Debug UI
- Comprendre une valeur couleur copiée depuis un navigateur ou un outil design.
Limites et bonnes pratiques
Bonnes pratiques
- Vérifier le contraste texte/fond pour l'accessibilité.
- Documenter les couleurs dans un design system.
- Éviter les variations trop proches sans rôle clair.
- Utiliser HSL pour ajuster teinte, saturation ou luminosité.
Erreurs à éviter
- Ignorer le contraste
- Une couleur esthétique peut être illisible sur certains fonds.
- Mélanger trop de formats
- Un projet gagne en cohérence avec des conventions couleur claires.
- Confondre RGB et HSL
- RGB décrit les canaux rouge, vert, bleu ; HSL décrit teinte, saturation et luminosité.
FAQ
Questions fréquentes
Quelle est la différence entre HEX, RGB et HSL ?
HEX est une notation compacte, RGB décrit rouge/vert/bleu, et HSL décrit teinte/saturation/luminosité.
Quel format couleur utiliser en CSS ?
Les trois formats sont acceptés. HEX est courant pour les palettes, RGB pour l'alpha via rgba, HSL pour ajuster les variations.
Comment convertir HEX en RGB ?
Chaque paire de caractères HEX correspond à une valeur rouge, verte ou bleue entre 0 et 255.
Pourquoi utiliser HSL ?
HSL facilite la création de variantes plus claires, foncées ou saturées d'une couleur.
Un convertisseur couleur vérifie-t-il l'accessibilité ?
Il affiche les formats et l'aperçu. Pour l'accessibilité, il faut aussi vérifier le contraste avec le fond.