# Generate — OKLCH palette generator

> A side project of heydenys.com: a color palette in OKLCH from one base color. Nothing is stored; the URL holds the palette.

The page builds a scale of steps around a base color, and keeps the base exactly: at the step it is anchored to (`at`), or wherever its lightness falls. Lightness follows Tailwind's own curve, so tints crowd toward white and the middle runs evenly; neutrals run darker at the bottom than colors. Every step takes the same share of the chroma its gamut (sRGB or Display P3) allows, with tints fading toward white, so a muted base gives a muted scale and no generated step is out of gamut. Hue drifts the way Tailwind's does, which keeps dark yellows golden rather than olive (`drift=none` holds it still). The model was fitted to Tailwind CSS v4 and checked against Radix Colors. Every step shows its value, its WCAG 2 contrast with white or black, and whether sRGB or Display P3 can show it. One color or the whole scale can be copied as CSS custom properties, a Tailwind v4 `@theme` block, W3C design tokens JSON, or a plain list.

## Building a palette by URL

Every setting is a query parameter, so a link is a palette. Omitted parameters take their defaults; out-of-range values are clamped, and a decimal comma reads as a point.

| Parameter | Meaning | Range | Default |
| --- | --- | --- | --- |
| `l` | base lightness, percent | 0–100 | 62 |
| `c` | base chroma | 0–0.4 | 0.208 |
| `h` | base hue, degrees | 0–360 | 259.6 |
| `hex` | base as hex, without `#`; overrides l, c and h | 3 or 6 hex digits | — |
| `at` | the step the base sits at, by its label: `500`, `9` | a step label | by the base's lightness |
| `n` | number of steps | 3–20 | 11 |
| `space` | gamut the scale fits | `srgb`, `p3` | `srgb` |
| `light` | lightest step, percent | 50–100 | 98 |
| `dark` | darkest step, percent | 0–50 | auto: 14 for a neutral to 27 for a colour |
| `drift` | `none` holds the hue still; otherwise it drifts as hand-tuned scales do | `none` | drifts |
| `shift` | a further straight hue rotation across the scale, degrees | -90–90 | 0 |
| `names` | step labels: 50–950, or 1 to n | `tailwind`, `numeric` | `tailwind` |
| `name` | palette name | a–z, 0–9, `-` | from the hue |
| `format` | value notation shown and copied | `oklch`, `hex`, `rgb`, `p3` | `oklch` |
| `bg` | background contrast is measured on | `white`, `black` | `white` |

Examples:

- [https://www.heydenys.com/generate?hex=0090ff&n=12&names=numeric](https://www.heydenys.com/generate?hex=0090ff&n=12&names=numeric) — twelve steps from a hex blue.
- [https://www.heydenys.com/generate?l=70&c=0.15&h=150&space=p3](https://www.heydenys.com/generate?l=70&c=0.15&h=150&space=p3) — a green fitted to Display P3.
- [https://www.heydenys.com/generate?hex=1e3a5f&at=900&name=navy](https://www.heydenys.com/generate?hex=1e3a5f&at=900&name=navy) — a navy brand color as the 900 of a scale named navy.

The palette itself is computed in the browser; this document does not contain it.

---

Canonical HTML: https://www.heydenys.com/generate
Site overview for agents: https://www.heydenys.com/llms.txt