How to use the color picker
- Drag around the color wheel to choose a hue and how vivid it is, and use the brightness slider to make it lighter or darker.
- Or type a color you already have: a hex code, RGB, HSL, or a CSS color name.
- In Chrome and Edge, tap Pick from screen to grab a color from anywhere on your display, including other windows and photos.
- Tap any format to copy it, ready to paste into your editor, CSS, Canva, or Photoshop.
- Click any tint, shade, or matching color to switch to it, and use Build a website theme to turn it into a full palette.
When it comes in handy
- Matching a brand color. Grab the exact color from a logo or photo and get its hex code for your website and social graphics.
- Moving between apps. Convert a hex code from a web designer into RGB for video software or CMYK for a print shop.
- Picking text colors. Check whether white or black text is readable on a color before you use it for buttons or banners.
- Building a set. Pull lighter and darker versions of one color for backgrounds, borders, and hover states.
Frequently asked questions
What is a hex color code?
It's a six-character code that describes a color for screens, like #3366CC. The three pairs are the red, green, and blue amounts, each from 00 (none) to FF (full). Websites, Canva, Photoshop, and most design tools accept hex codes.
What's the difference between RGB, HSL, and CMYK?
RGB mixes red, green, and blue light, which is how screens work. HSL describes the same colors as hue, saturation, and lightness, which is easier for adjusting by eye. CMYK is cyan, magenta, yellow, and black ink, which is how printers work, so CMYK numbers are always an estimate when converted from a screen color.
What is OKLCH?
A newer way of describing color that matches how people actually see brightness and vividness. Modern browsers support it in CSS, and it makes it much easier to build color scales where every step looks evenly spaced.
Why doesn't my printed color match the screen?
Screens make color with light, while printers use ink on paper, which can't reproduce every bright screen color. Paper type and printer settings change the result too. For logos and merch, ask your printer for a proof or a Pantone match.
What do AA and AAA contrast mean?
They're readability levels from the Web Content Accessibility Guidelines. AA needs a contrast ratio of at least 4.5 to 1 for normal text, and AAA needs 7 to 1. Large, bold text can pass AA at 3 to 1.
Why can't I see the Pick from screen button?
It uses the browser's EyeDropper feature, which is currently available in Chrome, Edge, and other Chromium-based browsers on computers. In other browsers, use the system picker instead.