根据背景色判断前景黑白颜色

类似于iPhone的最上方信息栏(电量时间等),根据背景颜色的深浅程度,判断文字应该显示为白色还是黑色。

实现思路是,先抛弃颜色,转灰度,然后即可简单的设置一个阈值(实测186是一个不错的值)来判断。

转灰度的公式是Gray = R*0.299 + G*0.587 + B*0.114

1
2
3
4
5
6
7
8
9
10
// example: background cccccc (without #)
function decideFontColor(background) {
const red = parseInt(background.substr(0, 2), 16);
const green = parseInt(background.substr(2, 2), 16);
const blue = parseInt(background.substr(4, 2), 16);
if ((red * 0.299 + green * 0.587 + blue * 0.114) > 186) {
return '#000000';
}
return '#ffffff';
};
文章作者: 王思捷
文章链接: https://sijie.wang/2019/08/06/color-from-background/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 我爱平铺