根据背景颜色的亮度调整字体的颜色

王晗发布于2019-08-23 12:47 / 1870人阅读

摘要：根据背景的颜色调整字体的颜色是我最近在项目中遇到的一个需求，这里将代码贴出来，供以后查阅。根据进制颜色值，计算色彩的亮度。所以，当背景色的亮度时，文字就应该为白色，反之为黑色。

根据背景的颜色调整字体的颜色是我最近在项目中遇到的一个需求，这里将代码贴出来，供以后查阅。也希望对遇到同样需求的人有帮助。

这里的需求是：整个项目中的所有页面都有一个背景色，这个背景色是在专门的配置页面统一配置的，当在配置页面设置好颜色后，整个项目中的背景色随之改变，同时，各个页面头部，底部的一些文字颜色随着背景的亮度，对应变成黑色或者白色。

step1: 遇到这么个需求，我首先去搜索了计算颜色亮度的函数：

 let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;

step2: 由于，我们项目里存的都是16进制的颜色，所以需要将16进制的颜色转换成rgb表示。

const hexToRgb = (hexColor) => {
    return parseInt(hexColor, 16).toString();
}

step3: 根据16进制颜色值，计算色彩的亮度。

let brightnessOfColor = (colorHexdecimalValue) => {
    let useColorValue = colorHexdecimalValue.slice(1);
    let rColor = useColorValue.slice(0, 2);
    let gColor = useColorValue.slice(2, 4);
    let bColor = useColorValue.slice(4);

    let rColorValue = hexToRgb(rColor);
    let gColorValue = hexToRgb(gColor);
    let bColorValue = hexToRgb(bColor);

    let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
    return lightness;
}

step4: 根据计算，颜色的色彩亮度区间是0~255，这里我取了一个中间值作为文字颜色的显示的拐点。

decideTxtColor = (colorHexdecimal) => {
    return brightnessOfColor(colorHexdecimal) < 128;
}

所以，当背景色的亮度 < 128时，文字就应该为白色，反之为黑色。

const IsWhiteFooter = decideTxtColor(window.themeColor);

接着将IsWhiteFooter用到标签的style上即可。

OK, 这就是我解决这个问题的过程。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99007.html

eclipse代码和背景颜色设置

摘要：在这样的配色中，最难分辨的就是局部变量和类型的私有字段其他好歹可以通过大小写规则来判断，如果代码编写够规范的话。 1.eclipse 背景色设置：Window->Preferences->General->Editors->Text Editors->Backgroud colors取消System default 设置成：RGB(204,232,207). 2.字体大小设置：java...

trilever 2019-08-14 17:26 评论0 收藏0
JavaScript中的颜色空间转换

摘要：色相是这个圆柱的偏角，饱和度为圆柱水平切面的半径，亮度以圆柱的高度表示。这意味着中，饱和度总是从完全饱和变化到等价的灰色，而在中是从完全饱和变化为白色。到的换算在数学上定义为空间的坐标到空间的坐标的换算。当为亮度为极值时，饱和度恒等于。我在做 webapp 的顶部导航栏时，碰到了一个挑战，导航栏的字体与图标要根据背景的颜色深浅来显示不同白色和黑色，但是导航栏的颜色是支持多种配色的，我...

tain335 2019-08-23 18:34 评论0 收藏0
[译]HTML&CSS Lesson3: 了解CSS

摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。首先，我们要明确的了解样式是怎么被渲染的。具体的...

lavnFan 2019-08-01 17:17 评论0 收藏0
[译]HTML&CSS Lesson3: 了解CSS

摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。首先，我们要明确的了解样式是怎么被渲染的。具体的...

soasme 2019-08-29 13:04 评论0 收藏0