Colour Picker
Pick a colour visually and read its value in every notation you might need — hex for CSS, RGB for code, HSL for systematic adjustment. Related palette suggestions are generated alongside it.
Free, no signupRuns entirely in your browser
About
What the Colour Picker does
Having all three notations at once removes a constant small friction in design work. Design tools tend to speak RGB, stylesheets speak hex, and design systems increasingly speak HSL, and converting between them by hand is a needless step.
How it works
Using the Colour Picker
- 1Select a colour using the picker, or enter a known value.
- 2The colour is converted into hex, RGB and HSL simultaneously.
- 3A palette of related colours is derived from it.
- 4Every value is shown ready to copy.
- 5Adjust the picker to update everything at once.
Use cases
What people use it for
- Choosing a brand or accent colour
- Reading the exact value of a colour you have picked
- Producing a palette from one starting colour
- Translating a colour between design tool and code
FAQ
Frequently asked questions
6 related
All tools →