I've been experimenting with relative colours in CSS, and they've quickly become one of my favourite tools for generating scalable colour variations for a design system.
Here's an example.
Start with a base colour
Let's say we define our primary color in CSS as:
:root {
--color-primary: hsl(189 57 23);
}Generate colour variations
From there, we can create lighter or darker variants of that (HSL) colour by adjusting the lightness (L) value using hsl(from ...)
:root {
--color-primary-10: hsl(from var(--color-primary) h s 99%);
--color-primary-20: hsl(from var(--color-primary) h s 96%);
--color-primary-30: hsl(from var(--color-primary) h s 92%);
--color-primary-40: hsl(from var(--color-primary) h s 86%);
--color-primary-50: hsl(from var(--color-primary) h s 80%);
--color-primary-60: hsl(from var(--color-primary) h s 72%);
--color-primary-70: hsl(from var(--color-primary) h s 64%);
--color-primary-80: hsl(from var(--color-primary) h s 56%);
--color-primary-90: hsl(from var(--color-primary) h s 48%);
--color-primary-100: hsl(from var(--color-primary) h s 40%);
--color-primary-110: hsl(from var(--color-primary) h s 32%);
--color-primary-120: hsl(from var(--color-primary) h s 26%);
--color-primary-130: hsl(from var(--color-primary) h s 20%);
--color-primary-140: hsl(from var(--color-primary) h s 15%);
}The best part? If we ever change the base --color-primary, all the variants update automatically—nothing else needs to change in the code. We can use this method for secondary, tertiary, neutral, and any other colours.
Use the same pattern in Figma
We can use a similar approach in Figma by creating a primary color variable, then generating variants primary/10, primary/20, primary/30, etc. by adjusting the lightness in the HSL color format. This is perfect for creating a consistent design system color palette in design and code.