Color

Color comparisons

5 old vs modern color CSS techniques, side by side.

Vivid colors beyond sRGB

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

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

hover to see old →

Color variants without Sass functions

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

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

hover to see old →

Dark mode colors without duplicating values

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

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

hover to see old →

Styling form controls without rebuilding them

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

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

hover to see old →

Mixing colors without a preprocessor

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

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

hover to see old →

Other categories

Layout 20 snippets Animation 8 snippets Selector 5 snippets Typography 7 snippets Workflow 11 snippets