OKLCH Color System

Understanding Shift CSS's perceptually uniform color space

What is OKLCH?

OKLCH is a perceptually uniform color space with three components:

  • L (Lightness): 0 to 1, where 0 is black and 1 is white
  • C (Chroma): 0 to ~0.4, representing color saturation
  • H (Hue): 0 to 360 degrees around the color wheel

Unlike RGB or HSL, OKLCH ensures that colors with the same lightness value look equally bright to the human eye.

Why Not RGB/HSL?

/* HSL: Same "lightness" but vastly different perceived brightness */
--blue: hsl(220, 100%, 50%);   /* Looks dark */
--yellow: hsl(60, 100%, 50%);  /* Looks bright */

/* OKLCH: Same lightness = same perceived brightness */
--blue: oklch(0.65 0.15 250);   /* Looks medium */
--yellow: oklch(0.65 0.15 90);  /* Looks equally medium */

Shift CSS Color Scales

Each color scale is generated from a seed hue with perceptually uniform lightness steps:

StepLightnessUse Case
500.978Lightest background
1000.936Hover backgrounds
2000.881Subtle borders
3000.827Disabled states
4000.742Secondary text
5000.648Primary interactive
6000.573Hover states
7000.469Active states
8000.394High contrast
9000.320Near black
9500.238Darkest

Customizing Seed Hues

Override any color palette by changing its seed hue:

:root {
  --shift-hue-primary: 280;    /* Purple */
  --shift-hue-secondary: 160;  /* Teal */
  --shift-hue-accent: 45;      /* Gold */
  --shift-hue-success: 145;    /* Green */
  --shift-hue-warning: 45;     /* Amber */
  --shift-hue-danger: 25;      /* Red */
  --shift-hue-neutral: 280;    /* Purple-tinted grays */
}

Brand-Tinted Neutrals

The --shift-hue-neutral variable adds a subtle tint to all gray colors, creating a cohesive brand feel:

/* Default: Blue-tinted grays (250) */
--shift-hue-neutral: 250;

/* Warm grays */
--shift-hue-neutral: 30;

/* Cool grays */
--shift-hue-neutral: 210;
Search