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.

local
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

  1. 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 #0060c0 dans le champ texte.
  2. Lisez les valeurs HEX, RGB et HSL synchronisées, la couleur étant montrée dans l’échantillon Preview.
  3. Si le texte n’est pas un code valide à 6 chiffres, le message Enter a valid #RRGGBB hex color s’affiche jusqu’à correction.

Exemples

  • #0060c0rgb(0, 96, 192) / hsl(210, 100%, 38%)
  • #ffffffrgb(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.