Palette generator

The generator builds an entire palette from a single base colour instead of picking shades by hand. All of the maths happens in OKLCH — a perceptual space where the same step in lightness looks like the same step for yellow and for blue alike. Anything that falls outside sRGB is clamped by chroma to the gamut boundary; lightness and hue are preserved.

Turning it on

The Generation switch lives in the header of the Palette settings column. It only appears while the palette is empty (or while the generator is already on), so it cannot silently wipe colours you collected by hand.

Turn it on and a mode dropdown plus parameter fields appear under the header — the palette fills immediately. Turn it off and the generated colours stay in the palette as ordinary ones, free to edit and delete.

While the generator is on the colour list is read-only: editing a single colour would be pointless, because the next nudge of any parameter rebuilds the palette from scratch.

General behaviour

• Live rebuild — any parameter change reassembles the palette at once.
• One undo step — a rebuild is a single history entry. Ctrl/Cmd + Z brings back the previous set of colours as a whole, not colour by colour.
• Generator state is not saved to the project file: *.palette.json holds only the colours themselves. Close the project and the switch is off again.
• At most 64 colours per generation.

Modes

Shade

A lightness scale around the base colour: from x to y with step z, the base sitting on the base step.

• Steps follow the Tailwind convention — 50, 100, …, 900. The colour name is the step number.
• The step equal to the base one gets the exact base hex; the rest shift in lightness (up towards white, down towards black) while hue and chroma stay put.
• If the base is nearly white or nearly black, neighbouring steps collapse into the same hex — the generator refuses to build such a scale and shows an error.

Tonal

Eleven fixed steps — 50, 100, …, 900, 950 — with hard-coded target lightness values (0.97 → 0.20), the way design systems like Tailwind and Material do it. The only parameter is the base colour.

• The anchor is the step whose target lightness is closest to the base. It gets the exact base hex; on a tie the lighter step wins.
• Chroma follows a bell curve: peak in the middle of the scale, falling off towards the light and dark ends, normalised against the anchor.

Gradient A → B (interpolate)

A smooth transition between two colours in N steps (N ≥ 2). Names are 1, 2, …, N. Both ends land in the result exactly.

• OKLab (default) — straight interpolation; a transition between “opposite” colours passes through a muted middle.
• OKLCH — hue is interpolated along the shortest arc, so the middle stays saturated.
• If one end is achromatic — white, black or nearly grey (chroma < 0.02, which covers UI greys like slate-300) — it has no meaningful hue, so it borrows the hue of the other end to build the arc. Otherwise a grey → blue gradient would detour through a pink middle. The end itself still stays exactly the colour you picked: the hue is borrowed only for the intermediate steps.
• Each end is set with the eyedropper or the hex field; #RRGGBBAA lets you give it an alpha, which is interpolated linearly from A to B. The eyedropper changes only the colour — an alpha already set on that end survives.

Alpha scale

The same hex at different alphas: from % to % with step %. The colour name is the percentage (10, 20, …), alpha = N / 100. The row is built by the same algorithm as Shade.

Harmony

A set of colours rotated in hue relative to the base.

Scheme	Angles	Names
Complementary	0, +180	base, complement
Analogous	−angle, 0, +angle	analogous-1, base, analogous-2
Triadic	0, +120, +240	base, triadic-1, triadic-2
Split-complementary	0, +180−angle, +180+angle	base, split-1, split-2
Tetradic (square)	0, +90, +180, +270	base, tetradic-1 … tetradic-3

The angle is configurable only for the analogous and split-complementary schemes (30° by default, 0 < angle < 180).

base is the exact hex you picked. The derived colours take the base lightness and one shared chroma: the minimum of the base chroma and the maximum chroma sRGB allows for each of their hues. That is what pulls the set into one family — otherwise a derived yellow would scream next to a blue. The side effect is deliberate: the base may end up more saturated than its derivatives, and a muted base yields a muted harmony.

Semantic set

Interface roles from one base colour: primary, success, warning, danger, info, neutral.

• primary — the exact base hex.
• success / warning / danger / info — fixed hues (145° / 75° / 25° / 250°), inheriting lightness and chroma from the base. The base hue has no say: danger stays red even if the base is green. Chroma, however, is inherited — an achromatic base gives grey roles, see “Limits and edge cases” below.
• neutral — grey with a hint of the brand: base hue, chroma ≈ 0.02.
• The “with scale” checkbox expands every role into three tonal steps — role-light (tonal 100), role (tonal 500), role-dark (tonal 800). Eighteen colours in total.

Errors

Invalid parameters do not break the palette: an error message appears under the fields and the palette is cleared for the time being. As soon as the parameter is valid again the colours come back. There is nothing to undo by hand.

Typical messages: zero or negative step, range outside 0…1000 (or 0…100 % for alpha), more than 64 colours, base outside the step range, a degenerate shade scale, an unparsable hex.

Limits and edge cases

• White and black bases. In the tonal scale the anchor takes the exact base hex, so #000000 leaves a noticeably bigger gap between 900 and 950 than elsewhere. In the semantic set, at L = 1 or L = 0 the gamut zeroes out chroma and every role collapses into one colour — pick a base of middling lightness for semantics.
• The tonal chroma bell does not work for every base. If the base is very light and saturated (yellow, lime, cyan), its anchor is a light step, and raising the chroma of the middle steps past the sRGB boundary is impossible: the gamut cuts them, so chroma simply falls monotonically from 50 to 950 instead of forming a bell. That is an sRGB limit, not a calculation error.
• Grey base. The base chroma caps the family, so a pure grey (chroma ≈ 0) produces grey harmonies and grey semantic roles — except neutral, whose chroma is set explicitly. There is no hue to borrow from a grey base.
• 8-bit hex. Final colours are rounded to #RRGGBB, so hue can drift by fractions of a degree and very close steps can coincide.