Generate colors from CSS custom properties (R,G,B)

Generate colors from CSS custom properties (R,G,B)

Read the article
Check the code on Github

CSS custom properties are not supported in the current browser

Color components:

Red var(--r); Green var(--g); Blue var(--b);

Color:

rgba(var(--r), var(--g), var(--b), 1);

Filtered colors:

Grayscale

rgba( calc(0.2126 * var(--r)), calc(0.7152 * var(--g)), calc(0.0722 * var(--b)), 1 );

Invert

rgba( calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)), 1 );

Sepia

rgba( calc(var(--r) * 0.393 + var(--g) * 0.769 + var(--b) * 0.189), calc(var(--r) * 0.349 + var(--g) * 0.686 + var(--b) * 0.168), calc(var(--r) * 0.272 + var(--g) * 0.534 + var(--b) * 0.131), 1 );