Color Picker
Pick any color and get HEX, RGB, and HSL values instantly.
HEX
#E8792D
RGB
rgb(232, 121, 45)
HSL
hsl(24, 80%, 54%)
Examples
| Input | Result |
|---|---|
| Pick a bright orange from the color wheel | HEX: #E8792D, RGB: rgb(232, 121, 45), HSL: hsl(24, 81%, 54%) |
| Select pure red | HEX: #FF0000, RGB: rgb(255, 0, 0), HSL: hsl(0, 100%, 50%) |
| Pick a navy blue | HEX: #001F3F, RGB: rgb(0, 31, 63), HSL: hsl(210, 100%, 12%) |
| Enter #50C878 in the HEX input | HEX: #50C878, RGB: rgb(80, 200, 120), HSL: hsl(140, 52%, 55%) |
About this tool
This color picker lets you visually select any color and instantly see its HEX, RGB, and HSL representations. You can either use the native color picker widget or type a HEX value directly into the input field. Every format updates live as you make changes, and each value has a copy button so you can paste it straight into your CSS or design tool.
All conversions happen in the browser. The tool parses HEX values into their red, green, and blue components, then derives HSL (hue, saturation, lightness) through standard color math. If you need additional formats like HSV or CMYK, check out the color format converter tool.
Frequently asked questions
What color formats does the color picker output?
The picker outputs HEX, RGB, and HSL values simultaneously. All three update in real time as you adjust the color.
Can I type in a HEX code instead of using the picker?
Yes. Type any valid HEX code (like #FF5733 or #f00) into the text input and the picker and all output values will update to match.
Does this color picker support shorthand HEX codes?
Yes. Three-character shorthand codes like #F00 are expanded automatically to their full six-character form (#FF0000).