generate_ramp
Read-onlyIdempotent
Create a light-to-dark color ramp from any CSS color, including OKLCH values and WCAG contrast ratios per step. Optionally output as Tailwind JSON or CSS custom properties.
Instructions
Generate a tint-to-shade color ramp from a base CSS color. Returns an ordered list of swatches (light → dark) each with its in-gamut hex, display-rounded OKLCH components (l/c 5dp, h 2dp), WCAG contrast ratios (2dp) + tiers vs white and black, and an in-gamut flag. Optionally emits the ramp as design tokens via tokenFormat ("tailwind" JSON or a "css-variables" :root block).
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| base | Yes | Any CSS color string, e.g. "#3b82f6", "oklch(0.6 0.35 30)" (max 256 chars) | |
| steps | No | Number of swatches (integer 2..512). Default 5. | |
| deltaL | No | Total lightness span (> 0) centered on the base L — endpoints at base L ± deltaL/2 (overrides the fixed range). | |
| tokenName | No | Base name for emitted tokens (letters/digits/hyphens, must start with a letter, 1-64 chars). Default "color". | |
| tokenFormat | No | Optional design-token format for the ramp ("tailwind" JSON object or a "css-variables" :root block); when present the output includes a `tokens` string. | |
| lightnessMax | No | Upper lightness endpoint (OKLCH L, 0..1). Default 0.97. | |
| lightnessMin | No | Lower lightness endpoint (OKLCH L, 0..1). Default 0.05. |
Output Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | No | Design-token string for the ramp (pretty-printed Tailwind JSON or a :root CSS-variables block); present only when tokenFormat was supplied | |
| swatches | Yes |