Оцените, является ли значение HEX темным или светлым
Пользователь веб-приложения ASP.NET, который я создаю, может выбирать цвета для использования на некоторых элементах (например, кнопки/заголовки), чтобы облегчить некоторую степень персонализации.
Проблема заключается в том, что по умолчанию текст на этих слоях является черным... то, что я пытаюсь сделать, - это оценить значение HEX, выбранное пользователем через сборщик, и программно переключаться между черно-белым текстом - это может быть в JavaScript или в коде.
Суть проблемы в том, что я просто не уверен, как оценить HEX, чтобы принять решение о близости близости выбранного цвета к черному, чтобы использовать черный текст.
Любые идеи?
Ответы
Ответ 1
Вместо того, чтобы добавлять компоненты RGB вместе, как сказал другой ответчик (ricknz), вы должны взять их в среднем.
Кроме того, поскольку зеленый цвет более заметен для человеческого глаза, чем синий, вы также должны добавить вес.
Итак, вам нужно умножить красную компоненту сначала на 0.299, зеленые разы 0.587 и синие времена 0.114
поэтому яркость задается следующим образом: Luminance = (r * 0.299 + g * 0.587 + b * 0.114)/3
изменить:
вот фрагмент, который его вычисляет:
float calcLuminance(int rgb)
{
int r = (rgb & 0xff0000) >> 16;
int g = (rgb & 0xff00) >> 8;
int b = (rgb & 0xff);
return (r*0.299f + g*0.587f + b*0.114f) / 256;
}
p.s. деление на 256, так как мы RGB побежали от 0-256 (вместо 0-1)
edit: изменил вычисление как разделить на 256, а не 768, как умело прокомментировал
Ответ 2
Преобразуйте в HSL и посмотрите на значение L
uminance. Это скажет вам, насколько он яркий.
Ниже приведена функция javascript для выполнения преобразования.
Ответ 3
Методы для этого встроены в .NET now:
var hexcolor = "#FA3CD0";
var color = System.Drawing.ColorTranslator.FromHtml(hexcolor);
var brightness = color.GetBrightness();
if (brightness > .5)
{
// color is light
}
else
{
// color is dark
}
Ответ 4
Шестнадцатеричный код цвета состоит из трех значений интенсивности: один для красного, один для зеленого и один для синего, с двумя шестнадцатеричными цифрами для каждого. Чтобы определить темноту против света, просто добавьте три значения вместе. Меньшие числа будут более темными, чем большие.
Для # 010203 добавление RGB-значений вместе дает 01 + 02 + 03 = 06. Это будет темнее, чем # 102030 = 60.