Palette Studio · Free in the Browser

Pretzel

Fifteen colours that agree, and never get confused.

Two properties fight each other. Harmonious means the colours share a family resemblance. Distinct means no two of them can be confused. Pretzel generates from a shared envelope, then solves for separation inside it, entirely in OKLab.

Open the studio

Loading the studio's own generator…

OKLabevery decision made perceptually
2-24swatches, fifteen by default
3colour-vision deficiencies guarded
9export formats, one click each

Harmonious · distinct

The two properties that fight

Raise the separation floor and the solver has to push colliding pairs further apart, spending the envelope's slack to do it. Push far enough and the floor becomes unreachable. Pretzel tells you so, instead of quietly handing back a set that never met it.

#e0685f
#d8823f
#c39a2c
#9aae35
#5fb85f
#3bbd8c
#35b6b6
#4aa5d4
#6f8fdd
#8f7cd8
#b06fc9
#cc639f
#d96079
#b58a6a
#8f9aa8
Closest pair
-
Mean separation
-
Out of gamut
-

Every pair clears the floor. In the studio, envelope slack is what decides how far the solver may drift outside the family to win a separation.

Six steps, every time

How a palette gets made

The same seed and the same parameters always produce the same palette. Nothing here is a lucky roll you cannot get back.

  1. 01

    Hues

    Lay out hue positions: even spacing, the golden angle (which never repeats at any count), a harmony scaffold, or seeded randomness.

  2. 02

    Envelope

    Give every swatch a lightness and a chroma from shared, shapeable curves. This is the step that makes the set read as one family.

  3. 03

    Solve

    Repel any pair closer than the separation floor, optionally judging that distance through simulated colour-vision deficiency.

  4. 04

    Contrast

    Nudge lightness until each swatch clears a WCAG floor against your backgrounds. Legibility is the hard requirement.

  5. 05

    Fit

    Map anything outside sRGB back in by reducing chroma at constant lightness and hue, so nothing clips into a flat blown-out patch.

  6. 06

    Order

    Arrange the result: as generated, by hue, by lightness, or by separation, so the swatches next to each other are the ones furthest apart.

Machado 2009

Distinct for everyone

With a guard on, the solver judges every distance through the simulation and takes the worst case, so a palette that survives is one whose pairs stay apart for everyone. Fewer usable hues come out the other side. That is the real constraint of the problem, not a failure of the tool.

As you see it

Take it with you

Leave with something you can paste

The whole rig lives in the URL, so a link rebuilds the exact palette on someone else's machine. Or paste a hex list back in: Pretzel pins those colours and builds the rest of the set around them, which is how you extend a palette you already have instead of replacing it.

  • Hex list
  • CSS custom properties
  • CSS oklch()
  • SCSS variables
  • JSON
  • JS array
  • Tailwind colors
  • SVG swatches
  • GIMP / Inkscape .gpl

Free · no account

Open the studio

Pretzel runs entirely in your browser. There is nothing to install, nothing to sign up for, and no limit on what you make with it. It exists because we needed it for our own tools, and giving it away is easier than explaining it.

Keys: R reroll · S surprise · C copy · 1-4 tabs

At a glance

Pretzel specifications

Technical specifications for Pretzel, Palette Studio · Free in the Browser
PlatformAny modern browser
Colour spaceOKLab / OKLCh · sRGB gamut mapping
Set size2-24 swatches · 15 by default
GuardsMachado 2009 CVD · WCAG contrast floors
ExportHex · CSS · SCSS · JSON · Tailwind · SVG · GPL
PriceFree