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

Question

[Nickita]

Добрый день! Не можете подсказать в какую сторону двигаться? Есть сайт где выводятся "плиткой" новости (похоже на Yandex), плитка состоит из фото и теста. Как определить тон фото, что бы выводить текст белым или черным?

Comments

[Антон Спирин]

Возможно лучшим решением будет использовать text-shadow + linear-gradient. Посмотрите, например, на сайт Медузы, выглядит здорово и хорошо читается на любом фоне.

[Максим Тимофеев]

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

Почувствуй силу, Люк.


Сорри, не удержался.

[Nickita]

Антон Спирин, Да, спасибо. Так уже было использовано, хотелось именно то,что меняло бы цвет текста.

Answer 1

[Максим]

www.kennethcachia.com/background-check

Answer 2

[xmoonlight]

rgb - средний цвет изображения (или необходимого участка):

function getContrastLum(rgb) {
        var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
        return luminance < 110 ? 'f0f0f0' : '020202';
}

Comments

[Владимир Олохтонов]

А что это за магические коэффициенты?

[xmoonlight]

Владимир Олохтонов, конвертер из RGB->HLS

[Владимир Олохтонов]

xmoonlight, https://ru.wikipedia.org/wiki/HSL вот здесь написано, что L = (MAX + MIN) / 2, то есть число от 0 до 1, что звучит в целом разумно.

Вы, насколько я понял, предлагаете uint8 значения каналов (1 пикселя?) умножать на эти странные коэффициенты, чтобы получить какое-то волшебное число, сравниваемое затем со 110.

Откуда такая магия? :)

[xmoonlight]

Владимир Олохтонов, отсюда

[Владимир Олохтонов]

xmoonlight, очень интересно, благодарю :)