Thanks to relative colours in CSS, we can now mix, adjust, and reuse colours natively. No preprocessors needed. This makes it easier to build consistent, accessible design systems for the web.
The Challenge
Say you have a brand colour defined as a CSS variable:
:root {
--color: #fb0000;
}If you wanted a semi-transparent background version, your instinct might be to try:
.selector {
/* won’t work */
background-color: rgb(var(--color) / 0.5);
}That fails, because CSS variables don’t resolve inside colour functions this way.
The Solution: Relative Colours
With the newer from syntax, you can declare colours once and transform them on the fly:
.selector {
/* works */
background-color: rgb(from var(--color) r g b / 0.5);
}This lets you adjust opacity, saturation, or lightness directly in CSS without duplicating values.
Why It Matters
- Consistency: Define your brand palette once, then generate tints, shades, and states on demand.
- Accessibility: Tweak colours to meet WCAG contrast requirements without hunting down hex values.
- Maintainability: No more juggling Sass functions or manual updates across files.
Want to Learn More?
Jim Nielsen has an excellent deep dive on CSS relative colours that I’ve referred back to many times. It’s completely changed how I handle colours in projects.