Color Picker
Pick any color and copy it as HEX, RGB or HSL — with a live preview.
How to use
- Click the color field and pick a color.
- See the live swatch update.
- Click any of the HEX / RGB / HSL chips to copy that value.
How the Color Picker works
Picks a colour and shows it in every format you might need — HEX, RGB, HSL — so you can copy the right one into CSS, a design tool or a brand document.
The same colour is expressed three ways. HEX and RGB describe the same red, green and blue channels in different notation. HSL restates it as hue, saturation and lightness, which is far easier to reason about when building a palette.
#RRGGBB · rgb(0-255, 0-255, 0-255) · hsl(0-360°, 0-100%, 0-100%)
Worked example
Pure red is #FF0000, rgb(255, 0, 0) and hsl(0, 100%, 50%) — three notations for one colour.
Things worth knowing
- HSL is the practical format for building variations: hold hue and saturation, change lightness, and you get a coherent tint and shade ramp.
- An 8-digit hex adds alpha, so #FF000080 is red at about 50% opacity.
- Equal RGB values always produce a neutral grey.
Frequently asked questions
How do I convert a color to HEX?
Pick the color and the HEX value appears instantly — click it to copy.
What's the difference between RGB and HSL?
RGB describes a color by red, green and blue light; HSL describes it by hue, saturation and lightness, which is often easier to tweak.
Why use HSL?
Because it matches how people think about colour. Making something lighter means changing one number rather than recalculating three.