On Dimensions of CSS in a Style Guide

Absolutes

On the concept of “absolutes”: If a color is the same as CSS named colors, name it as is or use the name itself:

--color-red: #ff0000;

If you “invented” a color or base it on an existing brand color, “invent” a name for it, but always attach the name of the basic color:

--color-coagulated-red: #c93434;
--color-facebook-blue: #4267b2;

Generics

On the concept of “generics”: Use these colors as basis for primaries, secondaries, accents, etc.:

--primary-color: var(--color-facebook-blue);

Specifics

On the concept of “specifics”: Use the “generics” to identify colors of UI elements:

.submit-button { background-color: var(--primary-color) };