Есть ли способ определить, является ли HTML-шестнадцатеричный цвет светлым или темным

Question

Я хочу, чтобы цвет шрифта на моей html-странице изменился на черный, если цвет фона строки светлый, и черный, если фон белый * *

Я использую jsp на своей странице. есть ли способ сказать что-то вроде этого

если цвет <## 0686FF, то fontcolour = # 000000, например </p>

edit: поиск скриптлета или javascript

Answer 1

Это решение использует класс java.awt.Color для получения значения яркости цвета и использует его для определения того, какой цвет фона следует использовать.

edit: это решение отличается от некоторых других решений, посколькудругие решения будут считать некоторые яркие цвета темными, например.основной красный (# FF0000).Принимая во внимание, что это решение, будет считать основной красный цвет одним из самых ярких цветов, которые вы можете иметь.Я полагаю, это зависит от ваших предпочтений.Хотите читать красный на черном или красный на белом?

String fontColor = "#0cf356";

// remove hash character from string
String rawFontColor = fontColor.substring(1,fontColor.length());

// convert hex string to int
int rgb = Integer.parseInt(rawFontColor, 16);

Color c = new Color(rgb);

float[] hsb = Color.RGBtoHSB(c.getRed(), c.getGreen(), c.getBlue(), null);

float brightness = hsb[2];

if (brightness < 0.5) {
   // use a bright background
} else {
   // use a dark background
}

HSB означает Hue, Saturation, Brightness - яркость также известна как яркость.При значениях класса Color от 1 до 0. Следовательно, 0,5 яркости - это половина расстояния между самыми яркими и самыми темными цветами.

Взаимодействие между оттенком, насыщенностью и яркостью немного сложнеекрасный, синий и зеленый.Используйте этот инструмент, экспериментируйте с разными цветами и найдите отношения между RGB и HSB

Answer 2

Под «цветом» мы обычно подразумеваем 24-битный цвет RGB: 1 байт (8 бит) для красного, зеленого и синего.То есть каждый канал имеет значение от 0 до 255 или от 0x00 до 0xff на шестнадцатеричном дисплее.

Белый цвет - все каналы заполнены: #FFFFFF, черный - все каналы отключены: # 000000.Очевидно, что более светлый цвет означает более высокие значения в каналах, более темный цвет означает более низкие значения в каналах.

То, как именно вы выберете свой алгоритм, зависит от вас, простой будет:1008 * Редактировать: спрашивающий просит более полный пример, чтобы он / она мог лучше начать, вот он:

public static void main(String[] args) throws IOException {

String value =
       // new Scanner(System.in).nextLine(); //from input
        "#112233"; //from constant
int red = Integer.parseInt(value.substring(1, 1 + 2), 16);
int green = Integer.parseInt(value.substring(3, 3 + 2), 16);
int blue = Integer.parseInt(value.substring(5, 5 + 2), 16);

System.out.println("red = " + Integer.toHexString(red)
        + ", green = " + Integer.toHexString(green)
        + ", blue = " + Integer.toHexString(blue));

if (red + green + blue <= 0xff * 3 / 2)
    System.out.println("using white color #ffffff");
else
    System.out.println("using black color #000000");

String colorBackToString = "#" + Integer.toHexString(red) +
        Integer.toHexString(green) +
        Integer.toHexString(blue);
System.out.println("color was " + colorBackToString);
}

Он производит вывод:

red = 11, green = 22, blue = 33
using white color #ffffff
color was #112233

И показывает технику разделения цвета в формате #aabbcc на каналы rgb, объединения их позже (при необходимости) и т. Д.

Answer 3

Более естественным подходом может быть использование цветового пространства HSL. Вы можете использовать третий компонент («легкость»), чтобы выяснить, насколько светлый цвет. Это будет работать для большинства целей.

Множество описаний googling . В основном вы берете компонент цвета с самым высоким значением (скажем, красный) и компонент с самым низким (скажем, зеленый). В этом случае:

L = (red + green) / (255*2.0)

Предполагая, что вы извлекли свои цвета в виде значений от 0 до 255. Вы получите значение от 0 до 1. Светлый цвет может быть любым цветом с яркостью выше определенного произвольного значения (например, 0,6).

Answer 4

function isTooLightYIQ(hexcolor)
{
      var r = parseInt(hexcolor.substr(0,2),16);
      var g = parseInt(hexcolor.substr(2,2),16);
      var b = parseInt(hexcolor.substr(4,2),16);
      var yiq = ((r*299)+(g*587)+(b*114))/1000;
      return yiq >= 128;
}

Палитра цветов, используемая в http://www.careerbless.com/services/css/csstooltipcreator.php хорошо работает

Answer 5

Вот ответ Кирана сверху в PHP , который прекрасно работает для меня. Спасибо Киран.

function isTooLightYIQ($hexcolor)
{
    $hexcolor = ltrim($hexcolor, "#");
    $r = base_convert(substr($hexcolor, 0, 2), 16, 10); 
    $g = base_convert(substr($hexcolor, 2, 2), 16, 10); 
    $b = base_convert(substr($hexcolor, 4, 2), 16, 10); 
    $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
    return $yiq >= 128;
}

Использование (с использованием функции регулировки яркости () * * * * * *: 1008 *

$adjustPercent = -0.45;  //  45% darker
$darkHexColor = (isTooLightYIQ($hexColor)) ? adjustBrightness($hexColor, $adjustPercent) : $HexColor;