Skip to content
Brand Stack
Esc
↑↓navigate↵open⌘Jpreview
Sign up
On this page

Color Palette from Image

Extract a dominant color palette from any image — in your browser or from the CLI, no upload required. Get HEX, RGB, and OKLCH values with WCAG contrast scores for each color. Deterministic output.

Color Palette from Image is a free tool at brandstack.dev/tools/color-palette-from-image. Drop, paste, or upload any image to extract its dominant color palette instantly. Everything runs on your device — in the browser or in the CLI — and no image is ever uploaded to a server.

npx @brandstack/cli color-palette-from-image ./logo.png
npx @brandstack/cli color-palette-from-image ./photo.jpg --colors 9 --format oklch --json

Offline, no account. --json prints the full palette (hex, rgb, oklch, contrast ratios, cluster share) for scripts and agents.

Extraction is deterministic: the clustering is seeded, so the same image always yields the same palette — across runs, and between the website and the CLI.

How to use it in the browser

There are three ways to load an image:

  • Drag and drop: drag an image file anywhere onto the page
  • Paste: copy an image (screenshot, Figma export, browser image) and press ⌘V or Ctrl+V
  • Upload: click the dropzone to open a file picker

Once an image is loaded, the palette extracts in under a second. Click Replace to swap in a new image without refreshing the page.

Palette size

Use the color count control (or --colors) to choose between 3, 5, 7, or 9 colors. The palette re-extracts immediately when you change the count; your source image stays loaded. Images with fewer distinct colors than requested return fewer swatches — empty clusters are dropped, never padded.

Color formats

Each swatch shows the color in three formats. Toggle between them with the format switcher (or --format):

  • HEX: standard web hex code (e.g. #3B82F6)
  • RGB: red, green, blue values (e.g. rgb(59 130 246))
  • OKLCH: perceptually uniform lightness, chroma, hue (e.g. oklch(62.3% 0.188 259.8))

Click any swatch to copy its value to your clipboard in the selected format.

WCAG contrast badges

Every swatch shows two accessibility badges: whether the color passes WCAG AA contrast (≥ 4.5) against white text and against black text. This tells you at a glance whether a color is usable as a background with readable text on top. The CLI prints the same ratios (vs-white / vs-black, with an (AA) marker).

For AI agents

Prefer the CLI — one command, structured JSON, no browser. In the browser, palette values are plain text in the DOM, so an agent can attach an image to the file input and read every color without clicking. This page is also served as plain markdown at /tools/color-palette-from-image.md, and listed with instructions in /llms.txt.

When to use this tool

  • Pulling a brand palette from a logo, moodboard, or photo
  • Matching colors from a design comp when you don’t have the original source file
  • Checking whether colors in a palette meet accessibility contrast requirements before using them in UI
  • Extracting palette suggestions from a reference image before building out a brand kit in Brand Stack

Was this page helpful?