How to use the color picker
- Click the color box to choose a color, or type a code such as
#FF6B35,rgb(255, 107, 53),hsl(20, 100%, 60%)or a name likecoral. - Copy the format you need: HEX for websites and design apps, RGB for screens, HSL for adjusting lightness, CMYK as a starting point for print.
- Click a tint or shade to explore lighter and darker versions.
What the codes mean
- HEX: six characters for red, green and blue, such as #176B60.
- RGB: red, green and blue from 0 to 255.
- HSL: hue (0–360°), saturation and lightness in percent.
- CMYK: cyan, magenta, yellow and black for printing. Screen-to-print conversion is approximate; ask your printer for exact values.
Is my text readable on this color?
The contrast numbers follow the WCAG accessibility guidelines. A ratio of 4.5:1 or higher passes level AA for normal text; 3:1 is enough for large, bold headings.
Color Picker FAQs
How do I convert HEX to RGB?
Type or paste the HEX code into the box. The RGB, HSL and CMYK values update instantly.
What is a good contrast ratio?
For normal body text, aim for at least 4.5:1 (WCAG AA). Large headings need at least 3:1.
Can I pick a color from my screen?
Yes, in browsers that support the EyeDropper feature, such as Chrome and Edge on a computer. A “Pick a color from the screen” button appears when it is available.