Как сделать цвет текста адаптивным к цвету фона?

Question

[MisTFoR]

Здравствуйте.
Как сделать цвет фона адаптивным к цвету фона? Например цвет текста черный, а цвет фона тоже черный, что бы текст менялся на белый. Если не трудно - можете скинуть ссылку на подобную тему. Буду очень благодарен =D

Answer 1

[McBernar]

Вот буквально вчера делал с помощью js.
Алгоритм простой:
1. Взять цвет фона
2. Перевести hex в hsl
3. Если l в hsl выше 0.8 (то есть, фон яркий), берем из hsl параметр hue (оттенок), берем насыщенность 100% и яркость 10%, и конвертируем новый темный оттенок обратно в hex
4. Применяем этот hex к тексту

Таким образом мы имеем либо белый текст на темном фоне (по-умолчанию), либо темный текст, слегка подкрашенный в оттенок фона, на светлом фоне. Почему подкрашенный? Потому что чистый черный на условно светло-розовом будет смотреться плохо. А вот слегка розоватый — отлично.

Answer 2

[WapSter]

https://webref.ru/css/mix-blend-mode
Еще можно вот так