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

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

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

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

// 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/posts/color-from-background/

本站文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请保留原始链接