Как динамически изменить светлоту цвета в CSS переменной?

Question

[Dubrovin]

Есть CSS переменная с цветом, например var(--primary).
Я хочу работать, например, с цветами--primary-darken и --primary-lighten не создавая при этом переменные CSS

Пример:

<style>
--primary: #FFAA00;
</style>
<div style="color:var(--primary)"></div>
<div style="color:PRIMARY_DARKEN"></div>
<div style="color:PRIMARY_LIGHTEN"></div>

При изменении переменной --primary в инспекторе браузера цвета PRIMARY_DARKEN и PRIMARY_LIGHTEN должны подстраиваться автоматически под новый цвет.

p.s. Пока печатал вопрос понял, что он сводится к тому, как динамически извлекать hue, saturation и lightness из произвольного цвета, будь то solid-цвет или цвет в css переменной

Comments

[Игорь Борисов]

Сам спросил сам ответил?

[dom1n1k]

Нативный CSS такое не умеет. Препроцессоры умеют, но только статически. Для динамики придется использовать JS.

Answer 1

[inzeppelin]

Скорее всего, вам нужно преобразовать цвет в hsl. Примерно вот так И изменять значение l (lightness)

Или посмотреть в сторону CSS filter

На лету средствами CSS сконвертировать из HEX (или rgba) в HLS не получится.