Определите яркость цвета с помощью RGB

Question

У меня есть несколько образцов цвета, которые должны показывать значение rgb отображаемого цвета, а фон - это фактический цвет.Затем, если рассматриваемый цвет является светлым, текст должен быть черным, а если рассматриваемый цвет - темным, цвет текста должен быть белым.

Как я могу определить, является ли значение RGB светлым или темным ??

JS FIDDLE

<style>
#preview {
  display: block; 
  height: 40px; 
  line-height: 40px; 
  font-size: 20px; 
  vertical-align: middle;
  width: 150px; 
  text-align: center; 
}
</style>

<!-- html -->
<button id="new_color">Try Random Color</button>
<p id="preview">Click the button!</p>

<script>
const getRandNum = () => Math.floor(Math.random() * 256);

const get_random_color = () => (`rgb(${getRandNum()}, ${getRandNum()}, ${getRandNum()})`);

const checkColor = (color) => {
    // color = 'rgb(x, y, z)'; 
    // check color is light
    // or color is dark
    return true; 
}

$('#new_color').click(function(){
    const p = $('#preview');
    const bg_color = get_random_color(); 
    const color_is_light = checkColor( bg_color ); 

    const text_color = color_is_light ? 'black' : 'white';

    p.css({
        color: text_color,
        backgroundColor: bg_color
    })
});
</script>

Я нашел решения только для цветов #hex, но не для rgb.Любая помощь очень ценится.

Answer 1

Так что, если у вас есть ответы для шестнадцатеричного числа, адаптируйте их для RGB, потому что шестнадцатеричные значения - это только 16 базовых чисел из 10 базовых значений rgb.Ищите способ преобразования между базами сейчас.

РЕДАКТИРОВАТЬ: Если ваше значение r в шестнадцатеричном формате "5a", способ получить это значение r в базе 10 для rgb () равно parseInt("5a",16)

EDIT2: чтобы получить шестнадцатеричное значение из десятичного числа, это работает: const hex = d => Number(d).toString(16).padStart(2, '0') ~ взято из Как преобразовать десятичное число в шестнадцатеричное в JavaScript?

Answer 2

Вы должны проверить if(red + green + blue >= 255 * 1.5) на светлый цвет, как сказано во втором ответе в этом сообщении

const checkColor = (color) => {
    // extract values of red, green and blue from color
    let clrarr = color.match(/\d+/g).map(num => +num);

  if(clrarr[0] + clrarr[1] + clrarr[2] >= 255 * 3 / 2) 
    return true; // color is light

  return false; // color is dark
}

JSFiddle

Answer 3

Если вы ищете относительную яркость, вы можете воспользоваться быстрой формулой:

Y = 0.2126R + 0.7152G + 0.0722B

Источник: https://en.wikipedia.org/wiki/Relative_luminance

Чтобы иметь возможность напрямую использовать вышеуказанные коэффициенты,вам придется либо нормализовать ваши компоненты RGB до 1. Или сначала разделить на 255.Значение Y, которое вы получите, находится в диапазоне 0-1, поэтому вы, вероятно, можете затем сделать:

const color_is_light = y > 0.5;

Я бы сделал что-то вроде:

const getRandomRgb = () => [
  Math.random(),
  Math.random(), 
  Math.random()
];

const getRelativeLuminance = (rgb) =>
  0.2126 * rgb[0]
  + 0.7152 * rgb[1]
  + 0.0722 * rgb[2];

const getCssColor = (rgb) => `rgb(${rgb.map((c) => c * 255)}`;

Хотя, там будетбуквально «серая область», где вы не получите достаточного контраста с белым или черным текстом на средне-сером фоне.

Возможно, вы захотите изменить функцию get_random_color, чтобы она возвращала отдельные компоненты, сделайтевыше, а затем создайте CSS-значение цвета.