Как сделать класс с увеличением градиента цвета?

Question

[111ilya111]

Есть bootstrap таблица, в ячейках цифры (например от 1 до 100), как можно сделать класс-классы, для background-color. Чем больше цифра тем темнее цвет (зеленый).
Спасибо.

Comments

[Сергей Карвасарный]

Берешь Js и пишешь) только что посмотрел в коллор пикере RGB меняется только центральная часть по факту, по этому обычный Math.Random от 0-255, дальше проходишь циклом таблицу и в каждой ячейке делаешь цвет + смотришь чтобы G шло от 255 в низ и учитываешь количество колонок чтобы палитры хватило, можешь вообще в ручную.

[111ilya111]

Сергей Карвасарный, я думал об этом, но допустим за 1 возьмем #d9ead3 - как мне его сделать темнее на 2, 3, 50?

[Антон Р.]

Первое что приходит на ум - задать переменные и цвета соответствующие им, затем вставлять это доп именем класса. При создании таблицы когда у тебя идет foreach счетчиком считать количество столбцов и на основе счетчика подставлять доп класс.

$a1 = 'lightblack';
$a2 = 'mediumblack';
... и так далее

<table>
<tr>
<td class="<?=$a . $i?>">...<td>
<td class="<?=$a . $i?>">...<td>
<tr>
</table>

[Сергей Карвасарный]

Вот так и взять как rgb а не hex)) - 111ilya111,

[Сергей Карвасарный]

111ilya111, Открываешь пикер если другой цвет нужен и сверху в низ тянешь, если ровно тянешь то меняется обычно в 1 месте с ним уже и работаешь в скрипте))

[Сергей]

Можно с css фильтрами поиграться
мне вот такая штука на ум пришла
https://codepen.io/speedblizzz/pen/XWrRgRa

[RAX7]

Переведи rgb в hsl https://css-tricks.com/converting-color-spaces-in-... и меняй значение яркости у цвета.

[111ilya111]

RAX7, Отличное решение, спасибо!