Оцените, является ли значение HEX темным или светлым - PullRequest
Новая
       46

Оцените, является ли значение HEX темным или светлым

12 голосов
/ 18 ноября 2009

Пользователь веб-приложения ASP.NET, которое я создаю, может выбирать цвета для использования на некоторых элементах (например, кнопках / заголовках), чтобы облегчить некоторую степень персонализации.

Проблема в том, что по умолчанию текст на этих слоях чёрный ... я пытаюсь оценить значение HEX, выбранное пользователем с помощью средства выбора, и программно переключаться между чёрным и белым текстом - это может быть в JavaScript или в коде позади.

Суть проблемы в том, что я просто не уверен, как оценить HEX, чтобы принять решение, слишком ли близка выбранный цвет к черному, чтобы использовать черный текст.

Есть идеи?

Ответы [ 4 ]

15 голосов
/ 18 ноября 2009

Вместо того чтобы добавлять компоненты RGB вместе, как сказал другой отвечающий (ricknz), вы должны взять их среднее значение.

Кроме того, поскольку зеленый цвет более заметен человеческому глазу, чем синий, вам также следует добавить вес.

Таким образом, вы должны умножить красный компонент сначала на 0,299, зеленый на 0,587 и синий на 0,114

, поэтому яркость определяется как: Яркость = (r * 0,299 + г * 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, как разумно прокомментировано

10 голосов
/ 18 ноября 2009

Преобразуйте в HSL и посмотрите на значение L заработок. Это скажет вам, как это ярко.

Вот функция javascript для выполнения преобразования.

4 голосов
/ 21 мая 2014

Методы для этого встроены в .Net сейчас: 

    var hexcolor = "#FA3CD0";
    var color = System.Drawing.ColorTranslator.FromHtml(hexcolor);
    var brightness = color.GetBrightness();
    if (brightness > .5)
    {
        // color is light
    }
    else
    {
        // color is dark
    }
1 голос
/ 18 ноября 2009

Шестнадцатеричный цветовой код состоит из трех значений интенсивности, одного для красного, одного для зеленого и одного для синего, с 2 шестнадцатеричными цифрами для каждого. Чтобы определить темнота против света, просто сложите три значения вместе. Меньшие числа будут темнее, чем большие значения.

Для # 010203, сложение значений RGB вместе дает 01 + 02 + 03 = 06. Это будет темнее, чем # 102030 = 60.

...