如何根据当前颜色生成相反的颜色？

Question

我正在尝试创建与当前颜色相反的颜色。我的意思是如果当前颜色是 _黑色_，那么我需要生成 _白色_。

其实我有一个文本 （这个文本的颜色是动态的，它的颜色可以随意制作） 。该文本位于 div 中，我需要为 background-color 的 div 设置该文本的相反颜色。我希望 div (color perspective) 中的文字 清晰。

相反的颜色 意味着：暗/亮

我有文本的当前颜色，我可以将它传递给这个函数：

 var TextColor = #F0F0F0;    // for example (it is a bright color)

function create_opp_color(current color) {

    // create opposite color according to current color

}

create_opp_color(TextColor); // this should be something like "#202020" (or a dark color)

有什么想法可以创建 create_opp_color() 功能吗？

原文由 stack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新： GitHub 上 的生产就绪代码。

---

这就是我的做法：

1. 将十六进制转换为 RGB
2. 反转 R、G 和 B 分量
3. 将每个组件转换回 HEX
4. 用零和输出填充每个组件。

 function invertColor(hex) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    // invert color components
    var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
        g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
        b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
    // pad each with zeros and return
    return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}

示例输出：

高级版：

这有一个 bw 选项将决定是反转为黑色还是白色；所以你会得到更多的对比度，这通常对人眼更好。

 function invertColor(hex, bw) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
        // https://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
            ? '#000000'
            : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(r) + padZero(g) + padZero(b);
}

示例输出：

原文由 Onur Yıldırım 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简洁大方。

 function invertHex(hex) {
  return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase()
}

invertHex('00FF00'); // Returns FF00FF

原文由 Gerardlamo 发布，翻译遵循 CC BY-SA 4.0 许可协议