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
Overview
Developers constantly translate colors between notations: designers hand off HEX, CSS increasingly favors HSL, and canvas or image code works in RGB. This tool takes one color — picked visually or typed as a hex code — and shows all three notations side by side with a live preview swatch, so you can move between design tools and stylesheets without a calculator.
How to use
- Click the Pick color swatch to open your browser’s native color picker, or type a hex code like
#0060c0into the text field. - Read the synchronized HEX, RGB, and HSL values, with the color shown in the Preview swatch.
- If the text is not a valid 6-digit code, the message
Enter a valid #RRGGBB hex colorappears until it is corrected.
Examples
#0060c0→rgb(0, 96, 192)/hsl(210, 100%, 38%)#ffffff→rgb(255, 255, 255)/hsl(0, 0%, 100%)
Notes
Only the 6-digit #RRGGBB form is parsed — shorthand (#fff) and 8-digit
alpha (#RRGGBBAA) values are not accepted. HSL values are rounded to whole
numbers, matching how they are typically written in CSS.
FAQ
Is the color I pick sent to a server?
No. The HEX-to-RGB and RGB-to-HSL math runs entirely in your browser. No network request is made and nothing about your selection is recorded.
What color formats does the tool accept and output?
Input is a 6-digit hex code (#RRGGBB), typed or chosen with the native color picker. Output shows all three notations: HEX, rgb(r, g, b), and hsl(h, s%, l%).
Why would I use HSL instead of RGB?
HSL separates hue, saturation, and lightness, so related colors are easy to derive — keep the hue and adjust lightness for hover states, or shift the hue for accents. RGB mixes all three into channel values.