当前位置：文江博客话题详情

如何更改由背景颜色确定的文本颜色？

发布于 2024-10-12 18:18:11 字数 125 浏览 3 评论 0原文

我正在寻找一种方法，最好使用 jQuery，根据背景颜色的亮度确定正确的文本颜色？

例如白色背景，黑色文本颜色。我相信这可以通过添加十六进制值和猜测来粗略地完成，但有人知道更好的方法或 jQuery 方法来做到这一点吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我心暖 2024-10-19 18:18:12

如果您使用 Typescript，您可以使用此功能：

setFontColor(bgColor){
  let r = bgColor.substring(1, 3);
  let g = bgColor.substring(3, 5);
  let b = bgColor.substring(5, 7);

  const bgDelta = (parseInt(r, 16) * 0.299) + (parseInt(g, 16) * 0.587) + (parseInt(b, 16) * 0.114);
  return ((255 - bgDelta) < 105) ? "#000" : "#fff"; }

在 HTML 中（如 Angular）：

<div class="color-bg" [style.color]="true? setFontColor(color) : '#000'">
    your text
</div>

我的结果：

If you use Typescript you can use this function:

setFontColor(bgColor){
  let r = bgColor.substring(1, 3);
  let g = bgColor.substring(3, 5);
  let b = bgColor.substring(5, 7);

  const bgDelta = (parseInt(r, 16) * 0.299) + (parseInt(g, 16) * 0.587) + (parseInt(b, 16) * 0.114);
  return ((255 - bgDelta) < 105) ? "#000" : "#fff"; }

In the HTML (Like Angular):

<div class="color-bg" [style.color]="true? setFontColor(color) : '#000'">
    your text
</div>

My result:

回复收藏 0 原文

旧梦荧光笔 2024-10-19 18:18:11

您可以尝试反转颜色的十六进制值。因此，#FFFFFF 变为 #000000，#AAAAAA 变为 #555555。当然，当您有 #888888 时，此方法就会失败，当反转时，会为您提供 #777777 （它们的对比度不那么高）。

这篇博客文章描述了另一种方式（他们只使用黑色或白色前景色，取决于背景色）。我把它翻译成Javascript：

function idealTextColor(bgColor) {

   var nThreshold = 105;
   var components = getRGBComponents(bgColor);
   var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

   return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";   
}

function getRGBComponents(color) {       

    var r = color.substring(1, 3);
    var g = color.substring(3, 5);
    var b = color.substring(5, 7);

    return {
       R: parseInt(r, 16),
       G: parseInt(g, 16),
       B: parseInt(b, 16)
    };
}

You can try inverting the hex value of the color. So #FFFFFF becomes #000000 and #AAAAAA becomes #555555. Of course, this method falls through when you have #888888 which when inverted, gives you #777777 (they don't contrast as much).

This blog post describes another way (they only use black or white for the foreground color, depending on the background color). I've translated it into Javascript:

function idealTextColor(bgColor) {

   var nThreshold = 105;
   var components = getRGBComponents(bgColor);
   var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

   return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";   
}

function getRGBComponents(color) {       

    var r = color.substring(1, 3);
    var g = color.substring(3, 5);
    var b = color.substring(5, 7);

    return {
       R: parseInt(r, 16),
       G: parseInt(g, 16),
       B: parseInt(b, 16)
    };
}

回复收藏 0 原文

~没有更多了~