Color Picker: HEX, RGB, HSL and CMYK
Pick any colour and copy its code in every common format. Sample colours from a photo or straight from your screen, find lighter and darker shades, and check that text will be readable.
----Shades, light to dark
Matching colours: complementary, split, analogous, triadic
- On white text
- -
- On black text
- -
Pick a colour to get started.
How to use the colour picker
Click the colour box to open your device's colour chooser, or type a HEX code such as #1E90FF into the box next to it. The big swatch updates and every code below changes with it. Press Copy next to any format to copy it to your clipboard, ready to paste into CSS, a design app or a document.
To take a colour from a photo or logo, choose Pick from an image, load the file and tap the spot you want. The image stays on your device. In Chrome and Edge on a computer you also get Pick from screen, an eyedropper that samples any pixel on your screen, even outside the browser.
HEX, RGB, HSL and CMYK explained
- HEX is the six-digit code used on the web, such as #FF5733. Each pair of digits is the red, green and blue amount from 00 to FF.
- RGB gives the same three amounts as numbers from 0 to 255. Screens make every colour by mixing red, green and blue light.
- HSL describes a colour as hue (the position on the colour wheel, 0 to 360°), saturation (how vivid) and lightness. It is the easiest format for making a colour lighter, darker or more muted by hand.
- CMYK is the mix of cyan, magenta, yellow and black ink used in printing. The values here are a straight conversion; print shops use colour profiles, so ask for a proof if exact colour matters.
Shades and matching colours
The Shades row keeps the hue and saturation and steps the lightness from very light to very dark, which is handy for hover states, borders and backgrounds that belong to the same family. The Matching colours row uses colour wheel rules: the complementary colour opposite yours, the two split-complementary colours beside it, two analogous neighbours and two triadic colours a third of the way round. Tap any chip to make it the main colour.
Contrast and readability
The contrast boxes show how readable your colour is as text on white and on black, using the WCAG contrast ratio. A ratio of 4.5:1 passes AA for normal text, 3:1 passes AA for large text such as headings, and 7:1 passes the stricter AAA level. If your brand colour fails on white, try one of the darker shades for text and keep the original for buttons and accents.
Colours on different screens
The same code can look slightly different from one screen to another, because displays differ in brightness, colour gamut and calibration. Phones with wide-gamut OLED screens often show colours more vivid than an office monitor. If colour accuracy matters, check your design on more than one device.
Color picker: frequently asked questions
How do I find the HEX code of a colour?
Pick the colour with the colour box, or load an image and tap the colour you want. The HEX code appears at the top of the list, ready to copy.
Can I pick a colour from my screen?
Yes, in Chrome and Edge on Windows, Mac and Linux. Press Pick from screen and click any pixel. Other browsers do not support the eyedropper yet; use Pick from an image instead.
How do I convert HEX to RGB?
Type or paste the HEX code into the box. The RGB, HSL and CMYK values update instantly.
Is the image I upload private?
Yes. The image is read in your browser and never uploaded.
What contrast ratio do I need for text?
At least 4.5:1 for normal text and 3:1 for large text to meet the WCAG AA standard.
Are the CMYK values exact for printing?
They are a direct conversion. Printers adjust for paper and ink using colour profiles, so request a proof when exact colour matters.