Color comparisons
8 old vs modern color CSS techniques, side by side.
Browser compatibility:
Readable text without manual contrast checks
Limited availability Old
/* Hardcode a text color per background */.badge-blue { background: #1e40af; color: white;}.badge-yellow { background: #fde047; color: black;}/* Repeat for every color variant */ Modern
.badge { background: var(--bg); color: contrast-color(var(--bg));}Perceptually uniform colors with oklch
Widely available Old
/* HSL: same L value, different perceived brightness */--yellow: hsl(60 100% 50%);/* blinding */--blue: hsl(240 100% 50%);/* dark *//* manually tweak each shade to look balanced */--brand-light: hsl(246 87% 68%); Modern
/* oklch: L is perceptually uniform across hues */--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 */Frosted glass effect without opacity hacks
Widely available Old
.card::before { content: ''; position: absolute; inset: 0; background-image: url(bg.jpg); background-size: cover; filter: blur(12px); z-index: -1;} Modern
.glass { backdrop-filter: blur(12px) saturate(1.5); background: rgba(255,255,255,.1);}Vivid colors beyond sRGB
Newly available Old
.hero { color: #c85032;}/* Hex, rgb(), hsl() are sRGB. Limited on wide-gamut screens. */ Modern
.hero { color: oklch(0.7 0.25 29);}/* Or: color(display-p3 1 0.2 0.1) for P3. */Color variants without Sass functions
Newly available Old
/* Sass: @use 'sass:color'; *//* Sass: color.adjust($brand, $lightness: 20%) */.btn { background: lighten(var(--brand), 20%);} Modern
.btn { background: oklch(from var(--brand) calc(l + 0.2) c h);}Dark mode colors without duplicating values
Newly available Old
:root { --text: #111; --bg: #fff;}@media (prefers-color-scheme: dark) { :root { --text: #eee; --bg: #222; }} Modern
:root { color-scheme: light dark; color: light-dark(#111, #eee);}Styling form controls without rebuilding them
Widely available Old
input[type="checkbox"] { appearance: none; width: 1.25rem; height: 1.25rem; border: 2px solid ...; background: ...; border-radius: ...;} Modern
input[type="checkbox"],input[type="radio"] { accent-color: #7c3aed;}Mixing colors without a preprocessor
Newly available Old
// _variables.scss$blue: #3b82f6;$pink: #ec4899;$blend: mix($blue, $pink, 60%); Modern
.card { background: color-mix( in oklch, #3b82f6 60%, #ec4899 );}