Generate and extract brat palettes

Two ways to get a palette, and they solve different problems

Generate Palettes answers “give me somewhere to start.” It builds six-colour combinations around the acid-green family this aesthetic is known for, plus adjacent hues that still hold up at poster weight. You are not getting a random guess — the sets are constrained so that at least one colour in each is dark enough to sit white text on, and at least one is bright enough to survive as an accent.

Extract from Image answers “this screenshot already looks right, tell me why.” Drop an image onto the drop zone and the dominant colours are pulled out of it into swatches. That is a genuinely useful move when you are reverse-engineering something you admire: the palette of a film still, an album cover, a game UI, a brand’s social post. It quantifies a decision somebody else already made.

Shuffle re-rolls the current set while keeping the same constraints, which is the fastest way to get unstuck when a combination is nearly right.

Clicking any swatch copies its hex value. That is the whole interaction — there is no export step, because the useful output is six short strings.

Reading a palette you have just generated

A row of six colours is not a design. It becomes one once you assign jobs to them. The convention that keeps most text graphics out of trouble:

The reason most amateur text graphics look cheap is that the signal colour gets used three times on one canvas. Saturation is relative; spend it once and the rest of the layout calms down.

Contrast is not an opinion

If a graphic is going to be read on a phone outdoors, the number that decides whether it works is the contrast ratio between text and its background. The web standard is documented by the W3C in its contrast minimum, and the practical version is: 4.5:1 for ordinary text, 3:1 for large headings, and 3:1 for meaningful graphics. Below those, people squint and scroll past.

The acid green that makes this aesthetic recognisable is exactly the case where intuition fails. It is bright enough to feel high-contrast against black, which is true — but pair it with a light grey or a desaturated mid-tone and both values collapse. Test the pair you intend to ship, not the swatch on its own.

Where a fixed palette earns its keep

• Series covers. Lock field, type and signal; change only the words. Feed consistency is mostly a colour decision.
• Theme tokens. Paste the six hex values into CSS variables once and every subsequent graphic agrees with the last.
• Deck and slide systems. A dark field with one hot accent survives a projector far better than a light gradient.
• Brand-adjacent work. When a client’s colours exist but nobody wrote down the supporting tones, extraction recovers them from their own assets.

FAQ

Does the dropped image get uploaded?

No. It is decoded and sampled inside your browser, then discarded when the tab closes. Nothing is stored on our side and no request carries the file anywhere.

Why do I get different colours from the same image twice?

Sampling reacts to how the browser scaled the file. A larger source gives more stable results than a small, already-compressed one.

Can I lock one colour and shuffle the rest?

Not directly. Copy the hex of the colour you want to keep, shuffle, then substitute it back into the set.

Six colours is too many for a text graphic.

Correct — for most covers you want three: field, type, one signal. Use the other three for supporting surfaces, or ignore them.

I need the actual image, not the numbers.

Then you want the social template maker, which renders text onto a chosen background at export size.