How to pick a color
- Tap the color square next to the input box to open your device's color picker, and choose a color. On desktop you can also use its eyedropper to sample any pixel on your screen (Chrome and Edge).
- The HEX, RGB, HSL, HSV, CMYK and OKLCH codes appear immediately. Tap Copy next to the one you need.
- Pick a lighter or darker variation from the shades strip; tapping a shade copies it.
Choosing colors that work
The sample box shows your color with black or white text, whichever has more contrast, and lists both contrast ratios, so you can tell at a glance whether text will be readable on it (4.5:1 is the WCAG minimum for body text). For buttons and backgrounds, mid-tone colors with white text usually need lightness below about 45%.
You can also type colors by name: all 148 CSS color names such as tomato, rebeccapurple and seagreen are understood. To pick a color from a photo instead, use the color picker from image tool. To build a whole palette around your color, open the palette generator.
FAQ
How do I pick a color from my screen?
In Chrome and Edge on desktop, open the color square and use the eyedropper icon. To pick from an image file, use the color picker from image tool.
What color code should I use for websites?
HEX is the most common, but RGB, HSL and OKLCH all work in CSS.
Can I enter a color name?
Yes. Any CSS color name, such as navy or coral, is converted.