How to Pull a Color Palette Out of Any Image

Q: How do I convert a HEX color to RGB or HSL?

Paste it into a color converter. ToolKoala's [color converter](/color-converter) turns any HEX into RGB, HSL, HSV, and CMYK at once.

2026-06-25

Some of the best color palettes already exist — in a sunset photo, a movie still, a brand logo, a screenshot of a design you like. Instead of guessing hex codes, you can just pick the colors straight out of the image. Here's how, and how to turn them into usable values for your CSS or design tool.

Why pull colors from an image

Building a palette from scratch is hard; borrowing one that already works is easy. A photograph has natural harmony because the light in the scene tied the colors together. A brand's logo hands you its exact colors. Starting from a real image gets you a palette that feels coherent, then you refine.

How the eyedropper works

An image is a grid of pixels, and each pixel has a color. A color picker (eyedropper) reads the exact color of whatever pixel you point at and reports it as a code — usually HEX (#f59563), which is the same red/green/blue values written in hexadecimal. Hover to preview, click to save the ones you like, and you've got a palette.

ToolKoala's color picker does exactly this in your browser:

Drop in any image — a photo, a screenshot, a logo.
Hover to preview a color; click to save it. Build up as many as you want.
Each saved color gives you HEX and RGB to copy straight into your code.

It runs locally, so the image you're sampling never gets uploaded.

HEX, RGB, HSL — which do you need?

Same color, different notations:

HEX (#f59563) — the web default; what you'll paste into CSS most often.
RGB (245, 149, 99) — handy when you need an alpha channel (rgba(...)) for transparency.
HSL (hue, saturation, lightness) — the one designers love for adjusting a color: nudge lightness to make a tint, shift hue to find a complement.

If you have a color in one format and need another, the color converter turns HEX into RGB, HSL, HSV, and CMYK instantly.

Turning picks into a real palette

A few habits that make a picked palette usable:

Grab a range, not five near-identical shades — a dark, a light, a couple of mid-tones, and one accent.
Check contrast for anything with text on it. A gorgeous low-contrast pair is unreadable.
Use HSL to build variations — once you have a base color, adjust lightness for hover states, borders, and backgrounds instead of picking unrelated new colors.

FAQ

How do I get the color code from an image? Use a color picker: load the image, hover to preview, and click the pixel whose color you want. It reports the color as a HEX (and usually RGB) code you can copy. ToolKoala's color picker does this in the browser.

What's the difference between HEX, RGB, and HSL? They're three ways to write the same color. HEX is the web standard, RGB is useful for transparency (rgba), and HSL is easiest for adjusting a color — changing lightness or hue by hand.

Can I pick colors from a screenshot or logo? Yes — any image works, including screenshots and logos. That's often the quickest way to match a brand's exact colors.

Does the color picker upload my image? No. ToolKoala reads the pixels in your browser, so the image never leaves your device.

How do I convert a HEX color to RGB or HSL? Paste it into a color converter. ToolKoala's color converter turns any HEX into RGB, HSL, HSV, and CMYK at once.

— Milo 🐨