How to use the Color Picker tool
- Choose an image from your device.
- Click or tap the spot whose color you want.
- Copy the HEX, RGB or HSL value with one tap.
- Pick more colors; your recent picks appear as swatches.
Match colors exactly
Designers, developers and small business owners often need the precise color from a logo, a product photo or a competitor's banner. Guessing by eye rarely works; picking the exact pixel gives you a code you can paste straight into Canva, CSS, Figma or Elementor.
HEX, RGB and HSL explained
HEX codes like #14B8A6 are the standard for web design. RGB lists red, green and blue values from 0 to 255 and is used by many apps. HSL describes hue, saturation and lightness, which makes it easy to create lighter or darker shades of the same color.
Build a palette
Every color you pick is saved as a small swatch below the image, so you can collect a full palette from a single photo, for example the five main colors of a brand or an interior shot.
Accurate and private
Colors are read directly from the original image pixels at full resolution, not from a blurry preview. As always, your image stays on your device.
Color wheel or picture picker?
A color wheel lets you explore and choose a new color by hue and brightness. A picture color picker does the opposite: it tells you exactly which color is already in an image. Designers often use both, first picking the base color from a logo here, then adjusting its lightness in HSL to create matching shades for buttons and backgrounds.
Getting HEX codes from an image
Zoom into the area on your screen if the detail is small, then tap exactly on it. Photos contain noise, so neighbouring pixels can differ slightly. Pick a few points and keep the one that looks most representative, or pick from a flat area of the image for brand colors.
Tip
Use a high-resolution original for accurate picks.
Picking colors for accessibility
When choosing text and background colors from an image, check their contrast so text stays readable. Darker or lighter shades in HSL help.
Using colors in your project
Paste HEX codes into CSS, Canva, Figma or WordPress settings to match a brand.
Frequently asked questions
How accurate is the color picker?
It reads the exact pixel value from the full-resolution image.
Can I pick colors from a screenshot?
Yes. Take a screenshot, then open it here.
Which format should I use for websites?
HEX is the most common for CSS and website builders.
Does it work on phones?
Yes, simply tap the image where you want to pick a color.
How do I get a HEX code from an image?
Open the image here, click the spot and copy the HEX value shown next to the swatch.