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:
--dredging-color: 122, 104, 85;
Then, I can use the
--dredging-color variable throughout the stylesheet. For example:
background-color: rgba(var(--dredging-color), 1);
background-color: rgba(var(--dredging-color), 0.5);