RGB Values as CSS Variables

I was working on a site that was color-coding project types and there was a need to use one color with varying opacity per project type. For the full opacity colors, I could use the hex value, the rgb syntax, or the rbga syntax with “1” as the opacity. But with so many style declarations I wanted to use a CSS variable (custom property) to define the color in one location.

What I learned was that CSS variables accept the RGB values as a comma-separated string. For example:

:root{
--dredging-color: 122, 104, 85;
}

Then, I can use the --dredging-color variable throughout the stylesheet. For example:

background-color: rgb(var(--dredging-color));
background-color: rgba(var(--dredging-color), 1);
background-color: rgba(var(--dredging-color), 0.5);

Pretty cool.