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) };