Preskoči na sadržaj
BouseMuttonBouseMutton
Besplatno, bez registracije, ništa se ne sprema

Extract a colour palette from any image, in your browser

Drop a photo and get its 3 to 12 most representative colours as hex, RGB, HSL, CSS custom properties, Tailwind theme colours, SCSS variables, JSON, or a 600 x 100 px PNG strip. Each swatch is annotated with its WCAG contrast tier against white and black. Image bytes never leave your browser.

Drop an imageConvert image format instead
  • Processed 100% in your browser
  • No account required
  • Nothing uploaded
A rustic pasta photograph alone, then the same photograph with a six-colour palette row drawn beneath it.A rustic pasta photograph alone, then the same photograph with a six-colour palette row drawn beneath it.

Povucite za usporedbu, prije / poslije

Pregled

Every photo carries a colour story: a dominant tone, two or three supporting accents, and a long tail of edge-case pixels. Designers use that palette to build mood boards, brand systems, and accessible UI themes; developers reach for it when they want CSS variables that match a hero image without eyeballing the swatch.

The classic way to extract a palette is server-side: upload the image, the server crunches the colours, and a list of hex codes comes back. That round-trip is wasteful for what is, fundamentally, a few hundred milliseconds of in-memory math. It also means handing your image to a third party. Neither of those trade-offs is necessary.

BouseMutton runs the palette extractor in your browser. Drop an image; the browser shrinks it to 256 pixels on the longest edge (plenty of detail for palette work), groups the colours into the number of swatches you asked for, and renders them with WCAG contrast badges. The image never leaves the page. Five export formats are one click away: CSS custom properties, Tailwind theme.extend.colors, SCSS variables, JSON, and a 600 x 100 px PNG strip.

Na prvi pogled

Quick facts

Brojevi i kompromisi koje trebate prije nego se obvežete.

  • Where it runs

    Processed 100% in your browser. Nothing is uploaded.

  • Palette size

    Adjustable from 3 to 12 swatches via a UInputNumber. The dominant colour and 4 accents are tagged when size is 5 or more.

  • Export formats

    CSS custom properties, Tailwind theme.extend.colors, SCSS variables, JSON, and a 600 x 100 px PNG swatch strip.

  • WCAG contrast

    Each swatch is annotated AAA, AA, AA-Large, or Fail against pure white and pure black backgrounds.

Tijek rada

Kako radi

Tri koraka, obično završena u pet sekundi.

  1. 1

    Drop an image

    PNG, JPG, WebP, AVIF, or GIF up to 25 MB. Single image at a time. No sign-up, no credit card.

  2. 2

    Pick the palette size

    Choose how many colours you want: anywhere from 3 (just the brand essentials) to 12 (a full design-system palette).

  3. 3

    Your browser does the work

    Your browser shrinks the image to a thumbnail, groups the pixels into the number of colour groups you asked for, and returns one swatch per group. The whole pass takes a few hundred milliseconds for typical photos.

  4. 4

    Export to your stack

    Copy any swatch to your clipboard as hex, or download the full palette as CSS custom properties, a Tailwind theme.extend.colors block, SCSS variables, JSON (with WCAG contrast ratios baked in), or a 600 x 100 px PNG strip.

Primjeri

Pogledajte na djelu

Povucite svaki klizač da pomno pogledate prije i poslije.

A Provence lavender field gives a warm purple and golden-wheat palette in six swatches with hex codes.A Provence lavender field gives a warm purple and golden-wheat palette in six swatches with hex codes.
A Provence lavender field gives a warm purple and golden-wheat palette in six swatches with hex codes.
A dawn mountain lake pulls cool slate, pine green, and pale peak pink into a print-ready palette.A dawn mountain lake pulls cool slate, pine green, and pale peak pink into a print-ready palette.
A dawn mountain lake pulls cool slate, pine green, and pale peak pink into a print-ready palette.
A Lisbon plaza scene returns pastel pink, butter yellow, and mint pulled straight from the building facades.A Lisbon plaza scene returns pastel pink, butter yellow, and mint pulled straight from the building facades.
A Lisbon plaza scene returns pastel pink, butter yellow, and mint pulled straight from the building facades.
Privatnost

Vaša slika, nestaje kad ste gotovi

Radi u vašem pregledniku

Palette extraction runs entirely in your browser. The image bytes never reach our servers, never touch disk, and are not used to train any model. The only network traffic is a single Plausible analytics beacon (consent-gated) carrying nothing but the page name and the resulting palette size. This is the strictest privacy tier we offer.

  • Obrađeno u sekundama
  • Ništa se ne sprema
  • Bez povezanog računa
Isprobajte sad

Pošaljite sliku

Jedan klik. Bez registracije. Ostatak je na nama.

Izvuci paletu boja

Spustite sliku ovdje ili kliknite za slanje
Spustite sliku (PNG, JPG, WebP, AVIF, GIF do 25 MB).
Obrađeno 100% u vašem pregledniku
Kvantizer median-cut radi u potpunosti u vašem pregledniku putem lokalne obrade. Ništa se ne šalje, ništa se ne sprema.
Pojmovnik

Palette glossary

Definicije svakodnevnim jezikom za gore navedeni žargon.

ČPP

Često postavljana pitanja

Odgovori na stvari koje većina ljudi pita prije isprobavanja novog alata.

Više alata

Povezani alati

Jednoklikni prelasci na druge poslove koje ova slika vjerojatno treba.

Citiranje ili dijeljenje?

Kopirajte sažeti Markdown sažetak (naslov, opis, ČPP, kanonski URL i citat) spreman za lijepljenje u jezični model ili dokument.

Pogledaj Markdown verziju

Molimo navedite kao

BouseMutton (2026). Colour palette extractor [Web application]. https://bousemutton.com/color-palette

Zadnje ažurirano: 2026-04-28