Question

我有一些色板应该显示所显示颜色的rgb值，而背景是实际颜色。然后，如果所讨论的颜色为浅色，则文本应为黑色，如果所讨论的颜色为暗色，则文本颜色应为白色。

如何检测RGB值是亮还是暗？

<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

如果您正在寻找相对亮度，则可以使用的快速公式是：

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颜色值。

Answer 2

因此，如果您对十六进制有答案，请对RGB进行修改，因为十六进制值只是rgb以10为基数的基数16。正在寻找一种在碱基之间进行转换的方法。

编辑：如果十六进制的r值为“ 5a”，则以rgb（）为底数以10为基数的r值为parseInt("5a",16)

EDIT2：要从十进制获取十六进制值，此方法有效：const hex = d => Number(d).toString(16).padStart(2, '0')〜来自How to convert decimal to hex in JavaScript?

Answer 3

您必须检查if(red + green + blue >= 255 * 1.5)是否有浅色，如this post中的第二个答案所说

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

通过RGB确定色彩亮度

3 个答案: