Color Picker
HEX, RGB, HSL, CMYK & shades
Tints & shades
Harmonies
Contrast
About the Color Picker
Choose a colour visually and get every code you need for web, print and design apps. The picker also builds tints and shades, complementary and analogous harmonies, and on supported browsers includes an eyedropper to sample colours from anywhere on your screen.
- Pick a colour with the picker, the eyedropper or by typing a code.
- Copy the HEX, RGB, HSL or CMYK value.
- Click any tint, shade or harmony to use it.
Frequently asked
What is a HEX colour code?
A six-digit code like #4F46E5 that represents the red, green and blue components in hexadecimal. It is the standard way to write colours in CSS.
Can I pick a colour from an image or my screen?
Yes. In Chrome and Edge, use the eyedropper button to sample any pixel on your screen. To get a palette from a photo, use Palette from Image.
Why does CMYK look different when printed?
Screens mix light (RGB) and printers mix ink (CMYK), so some bright screen colours can't be reproduced exactly in print.
Is what I type sent to a server?
No. The tool runs entirely in your browser and there's no server behind it, so what you type never leaves your device and nothing is stored. You can check: it keeps working if you go offline after the page has loaded.
More from the Design & Colour drawer
Other tools kept in this drawer, plus a few favourites from the bench.