Wheel Color Picker
Pick any colour from a colour wheel and get its HEX, RGB and HSL values.
| HEX | |
|---|---|
| RGB | |
| HSL |
Wheel Color Picker
Choosing a colour by eye and then finding its code is slow. Select a colour on the wheel and read its HEX, RGB and HSL values straight away, ready to paste into CSS or a design tool.
How to use Wheel Color Picker
- Click or drag on the colour wheel to choose a colour.
- Read the HEX, RGB and HSL values shown.
- Copy the format you need.
When it comes in handy
- Finding a colour for a website, logo or presentation.
- Converting a chosen colour into the notation your CSS or design tool expects.
- Exploring shades and tints of a brand colour.
Frequently asked questions
What is HSL?
It describes a colour by hue (the position on the wheel), saturation (how vivid it is) and lightness. It is often easier to adjust by hand than RGB.
How do I check contrast for text?
Compare your text and background colours with a contrast checker. WCAG recommends at least 4.5 to 1 for normal body text.
Related guides
-
On-Page SEO Checklist: 15 Things to Check Before You Hit Publish
A practical, no-jargon checklist for getting a single page right: titles, descriptions, headings, images, links, indexing and structured data.
-
Schema Markup for Beginners: What JSON-LD Does and Which Types to Use
A beginner-friendly explanation of structured data and JSON-LD, the schema types most sites need, and how to add and test them.
-
301 vs 302 Redirects: Which One to Use, and How to Check Them
The difference between permanent and temporary redirects, how each affects SEO, common redirect mistakes, and how to set up and test them.
