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 Akzentfarben 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);
Akzentfarben
-
--accent-warm: oklch(from var(--base) l c calc(h + 20)) -
--accent-cool: oklch(from var(--base) l c calc(h - 20)); -
--accent-complement: oklch(from var(--base) l c calc(h + 180)) -
--accent-complement-light-1: oklch(from var(--base) calc(l + 0.25 ) c calc(h + 180)) -
--accent-complement-light-2: oklch(from var(--base) calc(l + 0.5 ) c calc(h + 180))