{"id":3448,"date":"2024-08-12T13:38:35","date_gmt":"2024-08-12T18:38:35","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3448"},"modified":"2024-08-14T12:25:38","modified_gmt":"2024-08-14T17:25:38","slug":"relative-color-syntax-basic-use-cases","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/relative-color-syntax-basic-use-cases\/","title":{"rendered":"Relative Color Syntax \u2014 Basic Use Cases"},"content":{"rendered":"\n

As of last month, Firefox 128’s support of the relative color syntax<\/a> means we’ve now got support across the board<\/a>. I’m excited about that as it’s an extremely powerful way to manipulate colors in CSS. Plus it was part of Interop<\/a> this year so that is further proof that is trucking along nicely.<\/p>\n\n\n\n

The syntax with generic names looks like this:<\/p>\n\n\n

color-function<\/span>(from<\/span> origin-color<\/span> channel1<\/span> channel2<\/span> channel3<\/span> \/ alpha<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s how it works in my head:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Add Opacity to a Color you Already Have<\/h2>\n\n\n\n
It’s common to have CSS custom properties set up for colors on a project. <\/p>\n\n\n
html<\/span> {\n  --color-yellow<\/span>: oklch<\/span>(80%<\/span> 0.15<\/span> 94<\/span>);\n  --color-green<\/span>:  oklch<\/span>(70%<\/span> 0.25<\/span> 140<\/span>);\n\n  ...\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
In the past, I’ve split out the color values like this:<\/p>\n\n\n
html {\n  --color-yellow-lch: 80<\/span>% 0.15<\/span> 94<\/span>;\n  --color-yellow: oklch(var<\/span>(--color-yellow-lch);\n\n  ...\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
That way I could either use the color all together, or use the split out values to apply opacity:<\/p>\n\n\n
.box<\/span> {\n<\/span><\/span>  background<\/span>: var<\/span>(--color-yellow);\n<\/span><\/span>  border-color<\/span>: oklch<\/span>(var(--color-yellow-lch) \/ 50%<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
But that can get out of hand! You could also split each color into L, C, and H, the combine those, giving you five<\/em> variables for every color. Too much.<\/p>\n\n\n\n
With the relative color syntax, breaking down colors isn’t necessary. You apply alpha (and other transformations) on demand, leaving the original single color as the only variable (token) you need.<\/p>\n\n\n
.box<\/span> {\n<\/span><\/span>  background<\/span>: var<\/span>(--color-yellow);\n<\/span><\/span>  border-color<\/span>: oklch<\/span>(from var(--color-yellow) l c h \/ 50%<\/span>); \n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I much prefer the idea of keeping the main colors tokenized as custom properties, then tweaking them as needed on demand.<\/p>\n\n\n\n
Darken a Color you Already Have<\/h2>\n\n\n\n
In the above example, we had --color-yellow<\/code> and I ended by saying I prefer doing one-off tweaks on demand rather than making a whole new variable. If you have a ton<\/em> of usage of a slightly-darker version of a color, then sure, make a new variable and stay consistent. But if it’s more of a one-off, relative color syntax is awesome:<\/p>\n\n\n
.box {\n<\/span><\/span>  background<\/span>: var<\/span>(--gray-5<\/span>);\n<\/span><\/span>\n<\/span><\/span>  h2 {\n<\/span><\/span>    color<\/span>: var<\/span>(--color-yellow);\n<\/span><\/span>    \/* Darkened version of yellow *\/<\/span>\n<\/span><\/mark>    border-bottom: 2<\/span>px solid oklch(from<\/span> var<\/span>(--color-yellow) calc(l - 0.4<\/span>) c h);\n<\/span><\/mark>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Lighten a Color you Already Have<\/h2>\n\n\n\n
Same deal here. I’m using OKLCH because I like it<\/a>, particularly the “uniform brightness” characteristic. Meaning when doing this darkening and lightening across different colors, it feels like it lightens\/darkens the same amount<\/em>. Which feels weird to write, but it’s true. Other color spaces do not lighten and darken consistently. <\/p>\n\n\n
.box {\n  background<\/span>: var<\/span>(--gray-5<\/span>);\n\n  h2 {\n    color<\/span>: var<\/span>(--color-orange);\n    \/* Darkened version of orange *\/<\/span>\n    border-bottom: 2<\/span>px solid oklch(from<\/span> var<\/span>(--color-orange) calc(l + 0.4<\/span>) c h);\n  }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now you want to use that yellow, but at about 50% opacity. How do you do that? There are actually a couple of ways to add transparency to an existing color<\/a>, but in my opinion the relative color syntax is the nicest. <\/p>\n\n\n\n