Color Picker
Pick colors and get HEX, RGB, HSL, and HSV values instantly.
By Syed Mubashir Ali · Last updated
Picking and converting colours for design and CSS
Pick a colour with the colour wheel or type a value you already have, and the picker shows it as HEX, RGB, HSL and HSV at once, each with a copy button. HEX (#2563eb) is what most CSS, Figma and brand guidelines use. RGB is handy when you need transparency, as rgba() with a fourth value. HSL describes a colour by hue, saturation and lightness, which makes it the easiest format to adjust by hand: keep the hue, change the lightness, and you have a matching lighter or darker colour.
The tints and shades row does that for you: nine versions of your colour from 10% to 90% lightness, with the same hue and saturation. They're a quick start for hover and active states, borders, backgrounds and a small palette that belongs together. HSV, also called HSB, is the model many design apps use in their own colour pickers, so it's there when you're matching a value from one of them.
How to Use Color Picker
- 1Click the colour wheel to pick any colour, or type a HEX value directly.
- 2Copy the value in any format (HEX, RGB, HSL, or HSV) using the copy button on each row.
- 3Explore tints and shades by clicking any of the swatches below the colour values.
Frequently Asked Questions
What colour formats are shown?
HEX (#rrggbb), RGB (red/green/blue 0–255), HSL (hue/saturation/lightness), and HSV (hue/saturation/value).
Can I enter a colour by typing it?
Yes. The colour input accepts any valid CSS colour format your browser supports. You can also click the swatch to open the system colour picker.
What's the difference between HSL and HSV?
Both describe a colour by hue and saturation, but HSL's third value is lightness, where 100% is always white, while HSV's is value (brightness), where 100% is the purest, brightest version of the colour. CSS uses HSL; many design apps' colour pickers use HSV, also called HSB.
How do I make a lighter or darker version of a colour?
Click a swatch in the tints and shades row to switch to it, or keep the hue and saturation and change the lightness in HSL. That keeps the colour recognisably the same, unlike mixing in grey.
What is a HEX colour code?
Six hexadecimal digits after a #: two each for red, green and blue, from 00 to FF (0 to 255). #000000 is black, #ffffff is white and #ff0000 is pure red.
About Color Picker
Whether you're choosing brand colours, matching a design spec, or converting between formats for CSS work, our Color Picker gives you instant access to HEX, RGB, HSL, and HSV values from a single colour selection.
The tints and shades section generates nine variations of your chosen colour from 10% to 90% lightness, keeping hue and saturation constant. Click any swatch to select that shade as your working colour.