Как правильно составить алгоритм, чтобы цвет текста подбирался под цвет заднего фона?

Самый простой пример: когда я указываю, что хочу цвет заднего фона черный, то текст должен быть белый, и наоборот, когда я указываю, что цвет заднего фона должен быть белый, а цвет текста черный. Как с такими простыми цветами быть понятно, но если рассматирвать другие варианты?
Например если указать ff0 (желтый), то текст тоже плохо видно, но уж слишком много надо перебирать условий. Например здесь реализована такая функция.
  • Вопрос задан
  • 294 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Гипотеза 1: по каждому из компонентов R, G, B,
нужно держаться как можно дальше от заданного цвета. Т.е. прижиматься к краям.

Значения от 0 до 255. Если в заданном цвете соотв. компонент выше середины (127), то 0. Если ниже, то 255.
Фиддл:


Гипотеза 2 Цвет текста либо чёрный, либо белый. Какой из двух – определяется яркостью фона, которая считается, например, по формуле sqrt( 0.299*R^2 + 0.587*G^2 + 0.114*B^2 ) Это никогда не будет точным значением, но для задачи подойдёт.

Пример реализации — в фиддле выше.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
v3shin
@v3shin
Веб-шаман
Вот как-то так можно получить инвертированный цвет текста:
// функция инвертирования знака 16-ричной системы счисления
let f = (c) => (15-parseInt(c, 16)).toString(16);
// вместо 'ab2' нужно подставить hex-значение цвета фона
console.log('ab2'.split('').map((c) => f(c)).join(''));
Ответ написан
shkuter
@shkuter
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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