user
In OKLCH what are the numbers 100 200 ... 800 900?
alphonsio

In the context of OKLCH (a modern color space), numbers like 100, 200, ..., 900 typically refer to color scales or steps in a color palette, not something intrinsic to OKLCH itself.


Example palette with Oklab color space

Here's how it breaks down:

  • OKLCH stands for OK (Oklab) Lightness, Chroma, Hue.
  • It's a perceptually uniform color space — meaning changes in values correspond to consistent visual changes in color.
  • The numbers 100, 200, ..., 900 are just naming conventions, most commonly used in design systems or utility-first CSS frameworks (like Tailwind CSS or design tokens) to define shades of a color.

For example:

You might define a blue scale in OKLCH like this:

--blue-100: oklch(95% 0.02 240);
--blue-200: oklch(90% 0.04 240);
--blue-300: oklch(85% 0.06 240);
--blue-400: oklch(75% 0.08 240);
--blue-500: oklch(65% 0.10 240);
--blue-600: oklch(55% 0.10 240);
--blue-700: oklch(45% 0.10 240);
--blue-800: oklch(35% 0.08 240);
--blue-900: oklch(25% 0.06 240);

What’s going on here:

  • The lightness (L) is being adjusted from 95% (very light) to 25% (very dark).
  • Chroma (C) might vary a bit depending on desired vibrancy.
  • Hue (H) stays constant for a given base color.

So the 100–900 scale:

  • Is a semantic scale (e.g., 100 = lightest tint, 900 = darkest shade).
  • Is inspired by systems like Material Design or Tailwind.
  • Helps developers and designers manage consistent color palettes.

Let me know if you want to generate your own OKLCH palette or need help converting colors!