如何根据当前颜色生成相反的颜色？ [英] How can I generate the opposite color according to current color?

问题描述

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

其实我有一个文本 （这个文字的颜色是动态的，它的颜色可以随意制作）。该文本到 div 中，我需要为背景颜色的格。我希望文字在 div （颜色透视图）中清晰。

相反颜色表示：暗/亮

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

  var TextColor =＃F0F0F0; //例如（它是一种明亮的颜色）
 
函数create_opp_color（当前颜色）{
 
 //根据当前颜色创建相反的颜色
 
} 
 
 create_opp_color（TextColor）; //这应该是像＃202020（或深色）
  

有什么想法创建 create_opp_color（）函数？

解决方案

/ strong>：

高级版本：

这有一个 bw 选项，用于决定是否转换为黑色或白色;所以你会得到更多的对比度，这通常对人眼更好。 $ b

函数invertColor（hex，bw）{
if（hex.indexOf（' ＃'）=== 0）{
hex = hex.slice（1）;
}
//将3位十六进制转换为6位数字。
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）{
// http://stackoverflow.com/a/3943023/112731
return（r * 0.299 + g * 0.587 + b * 0.114）> 186
？ '＃000000'
：'#FFFFFF';
}
//反色分量
r =（255 - r）.toString（16）;
g =（255 - g）.toString（16）;
b =（255 - b）.toString（16）;
//填充每个零并返回
返回＃+ padZero（r）+ padZero（g）+ padZero（b）;



$ b $ p
$ b

输出示例：

I'm trying to create a color opposite of current color. I mean if current color is black, then I need to generate white.

Actually I have a text (the color of this text is dynamic, its color can be made at random). That text is into a div and I need to set the opposite color of that text for the background-color of div. I would like that text be clear in the div (color perspective).

The opposite color means: Dark / Bright

I have the current color of text and I can pass it to this function:

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)

Is there any idea to create create_opp_color() function ?

解决方案

UPDATE: Production-ready code on GitHub.

---

This is how I'd do it:

1. Convert HEX to RGB
2. Invert the R,G and B components
3. Convert each component back to HEX
4. Pad each component with zeros and output.

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);
}

Example Output:

Advanced Version:

This has a bw option that will decide whether to invert to black or white; so you'll get more contrast which is generally better for the human eye.

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) {
        // http://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);
}

Example Output:

这篇关于如何根据当前颜色生成相反的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！