Color comparisons

Colors

Beginner

Readable text without manual contrast checks

Old /* Pick white or black manually */
color: white; /* hardcoded */

Modern color: contrast-color(var(--bg));

see modern →

6% →

Color

Intermediate

Perceptually uniform colors with oklch

Old --brand: #4f46e5;
--brand-light: #818cf8;
--brand-dark: #3730a3;
/* guess-and-check each shade */

Modern --brand: oklch(0.55 0.2 264);
--brand-light: oklch(0.75 0.2 264);
--brand-dark: oklch(0.35 0.2 264);
/* only L changes, same perceived hue */

see modern →

90% →

Color

Intermediate

Frosted glass effect without opacity hacks

Old .card::before { content: '';
  background-image: url(bg.jpg);
  filter: blur(12px);
  z-index: -1; }

Modern .glass {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.1);
}

see modern →

96% →

Color

Intermediate

Vivid colors beyond sRGB

Old .hero {
  color: rgb(200, 80, 50);
}
/* sRGB only, washed on P3 */

Modern .hero {
  color: oklch(0.7 0.25 29);
}
/* or color(display-p3 1 0.2 0.1) */

see modern →

90% →

Color

Advanced

Color variants without Sass functions

Old /* Sass: lighten($brand, 20%), darken($brand, 10%) */
.btn { background: #e0e0e0; }

Modern .btn {
  background: oklch(from var(--brand) calc(l + 0.2) c h);
}

see modern →

87% →

Color

Intermediate

Dark mode colors without duplicating values

Old @media (prefers-color-scheme: dark) {
  color: #eee;
}

Modern color: light-dark(#111, #eee);
color-scheme: light dark;

see modern →

83% →

Color

Beginner

Styling form controls without rebuilding them

Old appearance: none;
// + 20+ lines of custom box/border/background

Modern input[type="checkbox"],
input[type="radio"] {
  accent-color: #7c3aed;
}

see modern →

93% →

Colors

Intermediate

Mixing colors without a preprocessor

Old // Sass required
$blend: mix(
  $blue, $pink, 60%);

Modern background: color-mix(
  in oklch, #3b82f6,
  #ec4899);

see modern →

89% →