Как сделать цвет светлее?

Question

[PenguinVasily]

Здравствуйте, у меня есть элемент, который хранит в себе список тегов:

<div class='tags-container'>
    {% for tag in anecdote.tags.all %}
        <span class='tag' style="color:#{{ tag.color.code }}; border-color:#{{ tag.color.code }} "> {{ tag }}</span>
    {% endfor %}
</div>

Я хочу сделать так, чтобы при наведении на тег - он подсвечивался более светлым цветом, чем сам текст. Как можно получить более светлый оттенок из hex значения?

Цвета привязаны к тегам и берутся из бд, поэтому приходится переопределять цвет текста и границы в самом элементе.

Answer 1

[Сергей П]

В простом случае достаточно домножить каждую компоненту цвета на некий коэффициент, который чуть больше единицы, округлить и собрать новый увет.
Можно перевести цвет из RGB в LAB и прибавить немного к компрненте L, а за оттенок в этом формате отвечают компоненты A и B, так что их оставляем неизменными.
Если заморочитьс яглубже, то есть много статей в сети про то, как устоен цвет, как воспринимаются цвета, яркость и прочее. Вот пример: https://habr.com/ru/post/304210/
И таких статей полно. Если вам нужно что-то вроде этого, то вы, видимо, просто не пытались искать.