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

Demo Options (auto reload the page on change):

Values Autochanger

Values Optimizer