有没有办法判断 HTML 十六进制颜色是浅色还是深色

Posted

技术标签:

【中文标题】有没有办法判断 HTML 十六进制颜色是浅色还是深色【英文标题】:Is there a way to tell if a HTML hex colour is light or dark 【发布时间】:2011-06-08 11:02:34 【问题描述】:

如果行的背景颜色为浅色,我希望我的 html 页面上的字体颜色变为黑色,如果背景为白色,则变为黑色

我在我的页面中使用 jsp。有没有办法这样说

如果颜色

编辑:寻找 scriptlet 或 javascript

【问题讨论】:

我认为你应该尝试 JavaScript 来实现这一点。 您可以通过使用颜色的反色来快速剪切它 - 因此您可以确保文本始终可见 inverted_color = FFFFFF 的十六进制值 - your_color 【参考方案1】:

“颜色”通常是指 24 位 RGB 颜色:1 个字节(8 位)用于红色、绿色、蓝色。也就是说,每个通道的值都在 0-255 之间,或者十六进制显示为 0x00 到 0xff。

白色表示所有通道已满:#FFFFFF,黑色表示所有通道已关闭:#000000。显然,颜色越浅意味着通道中的值越高,颜色越深意味着通道中的值越低。

您如何选择算法取决于您,简单的是:

//pseudo-code
if (red + green + blue <= (0xff * 3) / 2) //half-down, half-up
  fontcolor = white;
else
  fontcolor = black;

编辑:提问者要求更完整的例子,所以他/她可以有更好的开始,所以这里是:

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);

它产生输出:

红色 = 11,绿色 = 22,蓝色 = 33
使用白色#ffffff
颜色是#112233

并展示了将#aabbcc 格式的颜色拆分为 rgb 通道、稍后加入它们(如果需要)等的技术。

【讨论】:

这是在网页上,它如何知道 0xff 是什么。我正在处理像#000000这样的感冒 尝试阅读一些关于Java,jsp的教程,它是简单的编码 感谢您的回答,但没有更简单的方法我只想在页面上使用 scriptlet 或 javascript 比几行代码更简单?!到底有什么比这更容易?【参考方案2】:

更自然的方法可能是使用 HSL 颜色空间。您可以使用第三个分量(“亮度”)来计算颜色的亮度。这适用于大多数用途。

googling 的大量描述。基本上,您采用具有最高值的颜色分量(假设它是红色)和具有最低值的颜色分量(例如,绿色)。在这种情况下:

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

假设您将颜色提取为 0 到 255 之间的值。您将得到一个介于 0 和 1 之间的值。浅色可以是亮度高于某个任意值(例如 0.6)的任何颜色。

【讨论】:

@Dunes,好吧,无论如何我都会为你 +1 使用 Color API。我懒得去查了。 :-)【参考方案3】:

此解决方案使用java.awt.Color 类来导出颜色的亮度值,并使用该值来确定应使用哪种背景颜色。

编辑:此解决方案与其他一些解决方案不同,因为其他解决方案会将某些亮色视为暗色,例如。原红 (#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 代表色相、饱和度、亮度——亮度也称为光度。 Color 类的值介于 1 和 0 之间。因此,0.5 亮度是最亮颜色和最暗颜色之间的中间点。

色相、饱和度和亮度之间的相互作用比红色、蓝色和绿色要复杂一些。使用this工具实验不同颜色,找出RGB与HSB的关系

【讨论】:

伟大的作品很好。你能告诉我0.5是什么意思吗?那会是什么颜色? 还有你的代码,绿色(#45A61F)的亮度比浅蓝色(#99CCCC)更亮,你如何解决它 确定绿色和蓝色。我快速运行程序,它产生的蓝色亮度为 0.8,绿色亮度为 0.65。 (其中 1 是最亮的,0 是最暗的)。将添加关于 hsb 和 0.5 含义的编辑。【参考方案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 中使用的颜色选择器 效果不错

【讨论】:

太棒了!我在 PHP 中需要它,所以我将在 PHP 中发布它。【参考方案5】:

这是 Kiran 在 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;

用法(使用maliayas's adjustBrightness() function):

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

【讨论】:

以上是关于有没有办法判断 HTML 十六进制颜色是浅色还是深色的主要内容,如果未能解决你的问题,请参考以下文章

如何将十六进制转换为 RGB?

在材料设计组件中如何计算原色的浅色和深色版本?

十六进制代码亮度PHP?

如何根据背景颜色决定字体颜色为白色还是黑色?

iPad 2 确定设备颜色

使用 PHP 随机生成颜色