CSS Relative Colors and Building Color Palettes
In an Deep Dive Into color-mix I used color-mix to lighten and darken colors.
There is another technique to accomplish the same task: relative color syntax.
Relative color syntax allows us to manipulate and convert any color to any format. We can use it to create a color palette from any chosen color
To make things easier, we'll store both the base color and the relative colors based on it in custom properties.
The syntax looks like this:
:root {
background: lab(from var(--theme-primary) 10% a b);
}in this example we see the following elements:
lab indicates the color space that we want to convert the color to
from indicates the source color, in this case the --theme-primary variable.
10% a b are the values for the lab color, the lightness, a axis and b axis. The example uses 90% as the value of lightness, making the color 90% lighter. The default would be l a b to just convert the color from HEX to Lab
So how would we build a color scale to use in a theme?
These definitions in the :root object creates the relative colors.
:root {
--theme-primary: #663399;
--theme-primary-900: lab(from var(--theme-primary) 10% a b);
--theme-primary-800: lab(from var(--theme-primary) 20% a b);
--theme-primary-700: lab(from var(--theme-primary) 30% a b);
--theme-primary-600: lab(from var(--theme-primary) 40% a b);
--theme-primary-500: lab(from var(--theme-primary) 50% a b);
--theme-primary-400: lab(from var(--theme-primary) 60% a b);
--theme-primary-300: lab(from var(--theme-primary) 70% a b);
--theme-primary-200: lab(from var(--theme-primary) 80% a b);
--theme-primary-100: lab(from var(--theme-primary) 90% a b);
}You can then use the color definition anywhere you can use a color. For example:
.background-light {
background: var(--theme-primary-400)
}
.background-dark {
var(--theme-primary-900)
}If your browser supports relative colors (as of May 2023, only Safari), you can view a fuller example below