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

Question

[Никита Гуриев]

Самый простой пример: когда я указываю, что хочу цвет заднего фона черный, то текст должен быть белый, и наоборот, когда я указываю, что цвет заднего фона должен быть белый, а цвет текста черный. Как с такими простыми цветами быть понятно, но если рассматирвать другие варианты?
Например если указать ff0 (желтый), то текст тоже плохо видно, но уж слишком много надо перебирать условий. Например здесь реализована такая функция.

Comments

[Kovalsky]

Ну раз там реализовано, то там и смотрите. Вон там в комментарии написано, что используется jamiebrittain/colourBrightness.js

А собака вот здесь зарыта

dom1n1k, получается что вместо (r * 299 + g * 587 + b * 114) / 1000 надо использовать (r * 0.2126 + g * 0.7152 + b * 0.0722)?

Answer 1

[Сергей Соколов]

Гипотеза 1: по каждому из компонентов R, G, B,
нужно держаться как можно дальше от заданного цвета. Т.е. прижиматься к краям.

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


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

Пример реализации — в фиддле выше.

Answer 2

[v3shin]

Вот как-то так можно получить инвертированный цвет текста:

// функция инвертирования знака 16-ричной системы счисления
let f = (c) => (15-parseInt(c, 16)).toString(16);
// вместо 'ab2' нужно подставить hex-значение цвета фона
console.log('ab2'.split('').map((c) => f(c)).join(''));

Comments

[wisgest]

Исходя из каких соображений?

Answer 3

[shkuter]