# OKLCH Palette & Tint Scale Generator

> Build perceptually even tint scales and hue harmonies in OKLCH, gamut-mapped for CSS. Start from any CSS color and generate a 3–15 step lightness scale or an OKLCH hue harmony. Colors are gamut-mapped to sRGB or Display P3 with the CSS Color 4 algorithm; each step reports contrast with white and black, and you can download CSS with HEX fallbacks, GPL, JASC-PAL and SVG.

Part of usefulweb.app (https://usefulweb.app/). Part of [Lumina](https://lumina.usefulweb.app/) (ownerApp: lumina). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://luminaoklchpalette.usefulweb.app/ (interactive tool at https://luminaoklchpalette.usefulweb.app/tool)
- JSON API: POST https://luminaoklchpalette.usefulweb.app/api/v1/calculate with a JSON object of inputs (schema: https://luminaoklchpalette.usefulweb.app/api/v1/tool)
- OpenAPI: https://luminaoklchpalette.usefulweb.app/openapi.json
- MCP (Streamable HTTP): https://luminaoklchpalette.usefulweb.app/mcp - tool `lumina_oklch_palette`

## Inputs
- base (text): Base color (CSS color)
- mode (select): Palette type
- count (integer): Scale steps
- lightest (number): Lightest step (OKLCH lightness %)
- darkest (number): Darkest step (OKLCH lightness %)
- chroma (select): Scale chroma
- harmony (select): Hue harmony
- spread (number): Analogous and split spread (degrees)
- gamut (select): Target gamut

## Method
- Convert the base color to OKLCH (Ottosson 2020). A scale spreads OKLCH lightness evenly from the lightest to the darkest step at the base hue. Constant chroma keeps the base chroma; taper multiplies it by L(1 − L) relative to the base, capped at 1, so near-white and near-black steps carry less color.
- A harmony keeps the base lightness and chroma and rotates the OKLCH hue: analogous ±spread, complementary 180°, split 180° ± spread, triadic 120°/240°, tetradic 60°/180°/240° and square 90° steps.
- Every requested color is gamut-mapped to the target gamut with the CSS Color 4 binary search (chroma reduction at constant lightness and hue, deltaEOK JND 0.02). HEX values are sRGB; Display P3 palettes also export oklch() values for capable screens.
- The report gives the smallest CIEDE2000 difference between neighbouring scale steps (or between any two harmony colors) and the WCAG 2 contrast of each color with white and black. Perceptual spacing is approximate: equal OKLCH steps are not guaranteed equal ΔE2000 steps.