Color Picker
Pick a colour and get its HEX, RGB and HSL values, ready to paste into CSS or a design tool.
Output: 0 characters
How to use it
- Click the colour box and choose a colour.
- The HEX, RGB and HSL values appear below.
- Copy the value you need into your CSS, design file or brief.
Examples
| Input | Settings | Output |
|---|---|---|
| No input needed | Colour #2456c9 | HEX: #2456C9 RGB: rgb(36, 86, 201) HSL: hsl(222, 70%, 46%) |
Common uses
- Matching a brand colour to HEX or RGB values for a website
- Converting a colour between HEX, RGB and HSL
- Choosing a colour family by adjusting hue, saturation and lightness
Frequently asked questions
Can I use these values in CSS?
Yes. HEX, RGB and HSL are all valid CSS colour formats, so you can paste any of them into a style rule.
Why is the HEX code in capitals?
It is a presentation choice. CSS accepts upper or lower case, so either works.