About

What is Oklchroma?

Oklchroma is a color pattern generator that helps designers and developers create harmonious color scales based on the OKLCH color space. Instead of manually defining each shade, Oklchroma generates a complete set of color variables based on a single base color and using mathematical formulas in CSS to generate the rest of the colors.

Pronunciation: Oklchroma is a wordplay, pronounced like "Oklahoma". So, it's "Oak-ul-kroh-muh."

Why create this?

While I still believe that a handmade color pattern is far more superior, I got this idea from a talk I saw at CSS Day 2024 by Matthias Ott. It uses color functions in CSS to adjust the lightness of the primary input. The clever thing that was explained in the presentation is that a trigonometric function (sin()) is used to adjust the Chroma as a sort of an easing wave.

I thought this idea was so clever and was curious how it would work with different color inputs and this is how that little idea was born.

About the Creator

Oklchroma was created by Brecht De Ruyte (utilitybend.com) . However, I shouldn't take full credit for this as explained in the previous section, I learned about the CSS idea by Matthias Ott.
But a little interface can be fun to play around with.

Technical Details

Oklchroma uses the mathematical properties of the sine function to create natural-feeling color progressions. The formula used is: 

oklch(
  from var(--color) {percentage}%
  calc(var(--color-base) + (sin({multiplier} * pi) * c))
  h
)

This formula maintains the hue while adjusting lightness and chroma in a way that feels natural across the entire scale.

How to Use Oklchroma

  1. Choose a variable name: Choose a variable name for your color pattern.
  2. Choose primary color space: You can select a color space from your choosing.
  3. Choose a base color: Select your primary color using the color sliders.
  4. Adjust the base modifier: Fine-tune how the color scales are generated.
  5. Preview the scale: See all ten shades of your color, from 10% to 100%.
  6. Copy the CSS: Get ready-to-use CSS variables for your project.
  7. Share your palette: Generate a unique URL to share your color system with others.

Browser Support

Oklchroma generates CSS that works with modern browsers that support CSS Color Module Level 4, including:

  • Chrome 119+
  • Firefox 128+
  • Safari 16.4+
  • Edge 119+