Оцените, является ли значение 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.