@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 значения?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы