New tool lets you shape lightness & chroma curves in OKLCH color scales
A new browser-based tool lets you build color palettes using OKLCH, a modern way of describing colors. Unlike older tools, you can draw custom curves to control how lightness and chroma change across each step. It's aimed at designers and front-end developers who want more precise, visually consistent palettes.
OKLCH is a color format designed to match how human eyes actually perceive brightness and color intensity, making palettes look more even across different screens. Most existing palette generators let you pick a start and end color, but give little control over the steps in between. This tool adds curve editors — so you can make the lighter end of a scale shift gradually while the darker end shifts more sharply, or any custom shape you want.
The output can be exported as CSS custom properties, making it straightforward to drop into a real project. It's a niche but handy tool for anyone building or refining a design system, though it has little direct relevance to AI agent development or token cost reduction.
Key points
- OKLCH produces more perceptually even color palettes across different screens
- You can separately tune the lightness and chroma curves for each step in the scale
- Works for any number of steps (e.g. a 10-step scale from 100 to 1000)
- Exports results as ready-to-use CSS code
- Most useful for UI/design work, not directly related to AI agent development
Quick term guide
- build
- A chosen set of in-game abilities or items a player equips for their character.
- chroma
- How vivid or saturated a color looks — high chroma means bright and pure, low chroma looks washed out
- developers
- Developers are people who build software, apps, or websites.
- CSS custom properties
- Variables you define in CSS so you can reuse the same color or value throughout your stylesheet
- Design system
- A set of reusable pieces and rules used to build a website.
- AI agent
- An AI program that can inspect information and suggest what to do next.
- token cost
- The money or usage spent when sending text to an AI model and getting text back.
- ports
- Numbers that apps use so they can talk on the same computer without clashing.