So war's früher!
Bis jetzt mussten Farben in einem Grafikprogramm ermittelt und dann als HEX-Werte im CSS notiert werden.
Mit custom properties konnte man einzelne Werte mehrfach verwenden.
Relative Farbangaben
Mit dem CSS Color Module Level 5 können nun – ausgehend von einer Grundfarbe – weitere Abstufungen automatisch erstellt werden:
-
--base-dark-2: oklch(from var(--base) calc(l - 0.5 ) c h); -
--base-dark-1: oklch(from var(--base) calc(l - 0.25) c h); -
--base: blue; -
--base-light-1: oklch(from var(--base) calc(l + 0.25) c h); -
--base-light-2: oklch(from var(--base) calc(l + 0.5 ) c h);