Функция calc() — приведение типов в CSS

Хочу реализовать следующую задумку: в зависимости от ширины экрана генерировать цвет в rgb(). В данный момент есть идея использовать для этого единицы измерения vw, но не знаю как приводить эти единицы к пикселям, а потом получать из пикселей значения без единиц измерения. Как это можно реализовать на чистом CSS?
:root { --r: 100; --g: 150; --b: 200; } * { box-sizing: border-box; } .block { background-color: rgb(calc(var(--r) + 2vw), calc(var(--r) + 1vw), calc(var(--r) + 0.5vw)); width: 100px; height: 100px; border: 1px solid; display: inline-block; padding: 20px; /* doesn't work */ } .block2 { background-color: rgb(calc(var(--r) + 50), calc(var(--g) + 50), calc(var(--b) + 50)); }

calc() not OK

calc() OK

Ответ

Путем чтения документации стало понятно, что приведение типов в функции calc() возможно, но результат неизбежно приводится к каким-либо единицам измерения и получить просто из, например, нельзя, а значит заполнить rgb() динамически исходя из ширины экрана в vw-юнитах тоже нельзя.
Следующее предположение было генерировать цвет при помощи hsl(), ведь там в двух значениях из трех используется тип , может можно как-то динамически получать проценты? Нет, проблема осталась той же, потому что математические выражения внутри calc() с типами и вначале приводятся к и результат обязательно будет в пикселях.
the second and third arguments of the hsl() function can only be expressed as s. Although calc() productions are allowed in their place, they can only combine percentages with themselves, as in calc(10% + 20%)
То есть, использовать calc() внутри hsl() можно, но только если внутри неё будут производиться операции с процентами, что никак не приближает нас к динамической генерации цвета в зависимости от ширины экрана.