Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
• Not perceptually uniform
• Brightness inconsistent
• Limited color gamut
• Hard to create palettes
• Perceptually uniform
• Consistent lightness
• Wide color gamut
• Easy color manipulation
oklch = Lightness, Chroma (saturation), Hue. Like HSL but better!
/* oklch(lightness chroma hue) */
color: oklch(70% 0.15 180);
/* With alpha */
color: oklch(70% 0.15 180 / 0.8);
/* Lightness: 0-100% */
/* Chroma: 0-0.4 (roughly) */
/* Hue: 0-360 degrees */0% = black
100% = white
0 = gray
0.4 = vivid
0 = red
360 = red
Mix two colors together - like Sass mixins but native CSS!
/* 50/50 mix */
color: color-mix(in oklch, blue, red);
/* Weighted mix - 30% blue, 70% red */
color: color-mix(in oklch, blue 30%, red);
/* Mix with transparency */
background: color-mix(in oklch, blue 80%, transparent);
/* Create tints/shades */
--primary: oklch(60% 0.2 280);
--tint: color-mix(in oklch, var(--primary), white 20%);
--shade: color-mix(in oklch, var(--primary), black 20%);Create Tints
color-mix(in oklch, blue, white 20%)Create Shades
color-mix(in oklch, blue, black 20%)Blend Colors
color-mix(in oklch, blue 70%, red)Add Transparency
color-mix(in oklch, blue, transparent 30%)Modern displays support more colors than sRGB. oklch() can express these vivid colors!
Standard web (old)
Modern phones/monitors (~25% more colors)
Future displays (~50% more colors)
/* These vivid colors only work in oklch! */
background: oklch(70% 0.35 150); /* Vivid green */
background: oklch(60% 0.30 280); /* Vibrant purple */Consistent lightness across palette
--primary: oklch(60% 0.2 280); --primary-hover: oklch(70% 0.2 280);
Generate tints/shades easily
--blue: oklch(60% 0.2 250); --blue-light: color-mix(in oklch, var(--blue), white 30%);
Predictable contrast ratios
background: oklch(95% 0.05 280); color: oklch(20% 0.1 280);
Smooth, perceptually uniform
background: linear-gradient( in oklch, oklch(70% 0.2 0), oklch(70% 0.2 360) );