appuyez sur ⌘K pour changer d’outil
IMAGE
Sélecteur de Couleur — HEX, RGB, HSL
Sélectionnez une couleur et obtenez ses valeurs HEX, RGB et HSL.
color-picker
- HEX
- #0060c0
- RGB
- rgb(0, 96, 192)
- HSL
- hsl(210, 100%, 38%)
- Preview
§01 À PROPOS DE CET OUTIL
Présentation
Les développeurs traduisent sans cesse les couleurs d’une notation à l’autre : les designers livrent du HEX, le CSS privilégie de plus en plus HSL, et le code canvas ou image travaille en RGB. Cet outil prend une couleur — choisie visuellement ou saisie en hexadécimal — et affiche les trois notations côte à côte avec un échantillon d’aperçu en direct, pour passer des outils de design aux feuilles de style sans calculatrice.
Utilisation
- Cliquez sur l’échantillon Pick color pour ouvrir le sélecteur de couleur natif de votre navigateur, ou saisissez un code hexadécimal tel que
#0060c0dans le champ texte. - Lisez les valeurs HEX, RGB et HSL synchronisées, la couleur étant montrée dans l’échantillon Preview.
- Si le texte n’est pas un code valide à 6 chiffres, le message
Enter a valid #RRGGBB hex colors’affiche jusqu’à correction.
Exemples
#0060c0→rgb(0, 96, 192)/hsl(210, 100%, 38%)#ffffff→rgb(255, 255, 255)/hsl(0, 0%, 100%)
Remarques
Seule la forme #RRGGBB à 6 chiffres est analysée — les écritures abrégées
(#fff) et les valeurs à 8 chiffres avec alpha (#RRGGBBAA) ne sont pas
acceptées. Les valeurs HSL sont arrondies à l’entier, comme on les écrit
habituellement en CSS.
FAQ
La couleur que je choisis est-elle envoyée à un serveur ?
Non. Les calculs HEX vers RGB et RGB vers HSL s'exécutent entièrement dans votre navigateur. Aucune requête réseau n'est émise et rien de votre sélection n'est enregistré.
Quels formats de couleur l'outil accepte-t-il et produit-il ?
La saisie est un code hexadécimal à 6 chiffres (#RRGGBB), tapé ou choisi avec le sélecteur de couleur natif. La sortie affiche les trois notations : HEX, rgb(r, g, b) et hsl(h, s%, l%).
Pourquoi utiliser HSL plutôt que RGB ?
HSL sépare la teinte, la saturation et la luminosité : il est donc facile d'en dériver des couleurs apparentées — conservez la teinte et ajustez la luminosité pour les états de survol, ou décalez la teinte pour les accents. RGB mélange les trois dimensions dans des valeurs de canaux.