What's the difference between HEX, RGB, and HSL?

HEX (#ff6a35) and RGB (rgb(255, 106, 53)) describe a color by its red, green, and blue components — HEX is just RGB written in base 16. HSL (hue, saturation, lightness) describes the same color in terms that are easier to reason about, like 'a bit lighter' or 'more saturated'.

Can I type in exact values instead of using the picker?

Yes. Edit the HEX field directly, or adjust the individual R/G/B or H/S/L number inputs — every field stays in sync with the others.

Is my color data sent anywhere?

No. All conversion happens locally in your browser with JavaScript — nothing is uploaded, logged, or stored.

Does this support alpha/transparency?

Not currently — the tool works with opaque HEX, RGB, and HSL values, matching what your browser's native color picker provides.

← Back to the toolbox

COLOR PICKER

Pick a color and get it in HEX, RGB, and HSL — calculated right here in your browser.

Click the swatch to pick

HEX

RGB

rgb(255, 106, 53)

HSL

hsl(16, 100%, 60%)

How to pick a color

1
Click the swatch to open your browser's native color picker.
2
The HEX, RGB, and HSL values update instantly as you pick.
3
Fine-tune a value directly by editing the HEX field or the individual R/G/B or H/S/L numbers.
4
Click Copy next to any format to copy it to your clipboard.

Questions

What's the difference between HEX, RGB, and HSL?: HEX (#ff6a35) and RGB (rgb(255, 106, 53)) describe a color by its red, green, and blue components — HEX is just RGB written in base 16. HSL (hue, saturation, lightness) describes the same color in terms that are easier to reason about, like 'a bit lighter' or 'more saturated'.
Can I type in exact values instead of using the picker?: Yes. Edit the HEX field directly, or adjust the individual R/G/B or H/S/L number inputs — every field stays in sync with the others.
Is my color data sent anywhere?: No. All conversion happens locally in your browser with JavaScript — nothing is uploaded, logged, or stored.
Does this support alpha/transparency?: Not currently — the tool works with opaque HEX, RGB, and HSL values, matching what your browser's native color picker provides.