How to use the color picker
- Click the color box and choose a color, or use Pick from screen to grab one from anywhere on your screen.
- Copy the HEX, RGB or HSL code with one click.
- Click a shade or a matching color to switch to it. Check the contrast numbers before using it for text.
How to use color codes
- HEX (such as #FF6B4A) is the standard format in CSS and design tools.
- RGB gives the red, green and blue amounts from 0 to 255.
- HSL describes hue, saturation and lightness, which makes it easy to build lighter and darker shades.
For readable text, aim for a contrast ratio of at least 4.5:1 (WCAG AA). Large headings can use 3:1.
Frequently asked questions
How do I find the HEX code of a color?
Use the picker to choose the color. The HEX code appears next to it and you can copy it with one click.
Can I pick a color from my screen?
Yes, in browsers that support it (Chrome, Edge and other Chromium browsers) use the Pick from screen button to grab any color you can see.
What are complementary colors?
They sit opposite each other on the color wheel, such as orange and blue. They create strong contrast.
Is the color picker free?
Yes, it is free and runs entirely in your browser.