Oklchroma is an interactive online tool that helps designers and developers create visually consistent color patterns based on the OKLCH color space, with ready-to-use CSS variables.

What is Oklchroma?

Oklchroma is a web-based generator for building color scales using the perceptually uniform OKLCH color model. It allows you to pick a base color and automatically generate multiple shade variations, which can be copied as CSS variables for direct use in your projects.

How Does It Work?

The tool provides an intuitive color picker and sliders for fine-tuning parameters. From your chosen base color, it creates a series of shades—ranging from light to dark—based on the oklch() function in CSS.

Generated variables can be copied instantly, for example:

--primary: oklch(...);
--primary-10: oklch(from var(--primary) 10% c h);
--primary-20: oklch(from var(--primary) 20% c h);
...

It can also generate “eased” chroma transitions using mathematical functions for smoother color shifts.

Key Benefits

• Generates consistent OKLCH color scales.
• Instant CSS variable export.
• Intuitive interface with live preview.
• Easy sharing of generated palettes via links.
• Inspired by modern CSS design workflows.

Why Use Oklchroma?

Manually picking consistent colors can be time-consuming. Oklchroma automates this process, giving you a full, accessible palette from just one base color. It’s ideal for web and UI design, branding, and theming, ensuring visual harmony across components.

Visit Website