Colors comparisons
8 old vs modern colors CSS techniques, side by side.
Browser compatibility:
CSS contrast-color() for Readable Text
Limited availability Old way
/* 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));}OKLCH Color in CSS: Perceptually Uniform Colors
Widely available Old way
/* 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 in CSS with backdrop-filter
Widely available Old way
.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);}CSS Wide-Gamut Color: display-p3 and rec2020
Newly available Old way
.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. */CSS Relative Color Syntax: Lighten, Darken Without Sass
Newly available Old way
/* 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 in CSS with light-dark()
Newly available Old way
: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);}CSS accent-color for Checkboxes, Radios, and Range Inputs
Widely available Old way
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;}CSS color-mix() Function (No Sass Required)
Newly available Old way
// _variables.scss$blue: #3b82f6;$pink: #ec4899;$blend: mix($blue, $pink, 60%); Modern
.card { background: color-mix( in oklch, #3b82f6 60%, #ec4899 );}