How to Pick Colors from an Image — Get HEX, RGB & HSL Codes

Updated October 2026 · 4 min read

Whether you are matching a brand color from a logo, extracting a palette from a photo for a design project, or identifying the exact shade used in a competitor's website screenshot, a color picker is an essential tool for designers, developers and marketers alike.

HEX vs RGB vs HSL — Which Format to Use?

HEX is the most portable format — paste it directly into Figma, Sketch, Adobe, Tailwind, or any CSS file. HSL is the most intuitive for creating shades: increment the L (lightness) value to lighten a color, decrement to darken it — useful for generating button hover states.

How to Extract a Color Palette from a Photo

1. Open the Image Color Picker and upload your photo.
2. Click on the dominant areas one by one — background, foreground, accent.
3. Copy each HEX code to build your palette.
4. Aim for 3–5 colors: one primary, one or two secondaries, a neutral (white/grey/black), and an accent.

Matching a Brand Color from a Logo

If a client sends you their logo as a PNG but no brand guidelines, use the color picker to extract the exact HEX codes. Upload the logo, zoom in on the key colors, and click to capture them. This is much more accurate than eyeballing a color in a design tool.

Tip: If the logo has anti-aliasing (blurred edges), click in the centre of the color area, not the edge — edge pixels contain a mix of the two colors and will give you a muddy intermediate value.

Color Accessibility — Contrast Ratio

Once you have a color's HEX code, check its contrast ratio against white and black. WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (3:1 for large text) to be accessible. Dark blue (#1d4ed8) on white achieves ~7:1 — compliant. Light grey on white typically fails.