# How can I generate the opposite color according to current color?

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?

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
}

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

Example Output:

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
}
``````

Example Output:

Simple and elegant.

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

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

Simple way to achieve this with CSS:

``````mix-blend-mode: difference;
color:white;
``````

Watch out Accesibility (AA/AAA). Colour contrast by itself is useless. Really different colors can have no contrast at all for colour blind people. IMHO a calculation for such a color could go like this:

(Use "HLS" for simplicity)

• Rotate Hue 180º to get the (maybe useless) maximal color contrast
• Calculate Brightness Difference.
• ( Calculate Colour Difference... unnecesary, it's maximal or almost )
• Calculate Contrast Ratio.
• If the resulting color complies the requirements calculation ends, if not, loop:
• If Brightness Difference is not enought increase or decrese calculated color luminosity (L) by a certain amount or ratio (up or down depending on the original colour brightness: > or < than the mid value)
• Check if it complies your requirements, if it does calculation ends.
• if luminosity can be increased (or decrased) any more there is no valid color to comply the requirements, just try black and white, take "the best one" of those (probably the one with bigger contrast ratio) and end.

In my understanding of your question, by opposite color you mean inverted color.

``````InvertedColorComponent = 0xFF - ColorComponent
``````

So for the color red (#FF0000) this means: R = 0xFF or 255 G = 0x00 or 0 B = 0x00 or 0

inverted color red (#00FFFF) is:

``````R = 0xFF - 0xFF = 0x00 or 255 - 255 = 0
G = 0xFF - 0x00 = 0xFF or 255 - 0 = 255
B = 0xFF - 0x00 = 0xFF or 255 - 0 = 255
``````

Another examples:

Black (#000000) becomes White (#FFFFFF).

Orange (#FFA500) becomes #005AFF

Simply flipping background color to text color won't work with some middle range values, e.g. `0x808080`. I had tried with shifting the color values instead - `(v + 0x80) % 0x100`. See a demo here.

Agreeing with the comment from miguel-svq - although expecting to see more detailed algorithms for each calculation step.

This is a simple function that invert an hexadecimal color

``````const invertColor = (col) => {
const colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
let inverseColor = '#'
col.replace('#','').split('').forEach(i => {
const index = colors.indexOf(i)
inverseColor += colors.reverse()[index]
})
return inverseColor
}

``````

Codepen example

Function to Invert Color of Element. Gets the luminosity of each and if they are close, inverts text color.

``````function adjustColor(element) {
var style = window.getComputedStyle(element);
var background = new Color(style['background-color']);
var text = new Color(style['color']);
if (Math.abs(background.luma - text.luma) < 100) {
element.style.color = text.inverted.toString();
}
}
``````

The Color "Class" below. Accepts hex, rgb, rgba (even with percents), and can output to either one as well. Explorer will need polyfills for String.padStart and String.startsWith and the interpolated string in the toString() method will need to be modified using concat instead.

``````const Color = (function () {
function parsePart(value) {
var perc = value.lastIndexOf('%');
return perc < 0 ? value : value.substr(0, perc);
}
function Color(data) {
if (arguments.length > 1) {
this[0] = arguments[0];
this[1] = arguments[1];
this[2] = arguments[2];
if (arguments.length > 3) { this[3] = arguments[3]; }
} else if (data instanceof Color || Array.isArray(data)) {
this[0] = data[0];
this[1] = data[1];
this[2] = data[2];
this[3] = data[3];
} else if (typeof data === 'string') {
data = data.trim();
if (data[0] === "#") {
switch (data.length) {
case 4:
this[0] = parseInt(data[1], 16); this[0] = (this[0] << 4) | this[0];
this[1] = parseInt(data[2], 16); this[1] = (this[1] << 4) | this[1];
this[2] = parseInt(data[3], 16); this[2] = (this[2] << 4) | this[2];
break;
case 9:
this[3] = parseInt(data.substr(7, 2), 16);
//Fall Through
case 7:
this[0] = parseInt(data.substr(1, 2), 16);
this[1] = parseInt(data.substr(3, 2), 16);
this[2] = parseInt(data.substr(5, 2), 16);
break;
}
} else if (data.startsWith("rgb")) {
var parts = data.substr(data[3] === "a" ? 5 : 4, data.length - (data[3] === "a" ? 6 : 5)).split(',');
this.r = parsePart(parts[0]);
this.g = parsePart(parts[1]);
this.b = parsePart(parts[2]);
if (parts.length > 3) { this.a = parsePart(parts[3]); }
}
}
}
Color.prototype = {
constructor: Color,
0: 255,
1: 255,
2: 255,
3: 255,
get r() { return this[0]; },
set r(value) { this[0] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
get g() { return this[1]; },
set g(value) { this[1] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
get b() { return this[2]; },
set b(value) { this[2] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
get a() { return this[3] / 255; },
set a(value) { this[3] = value == null ? 255 : Math.max(Math.min(value > 1 ? value : parseFloat(value) * 255, 255), 0); },
get luma() { return .299 * this.r + .587 * this.g + .114 * this.b; },
get inverted() { return new Color(255 - this[0], 255 - this[1], 255 - this[2], this[3]); },
toString: function (option) {
if (option === 16) {
return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (this[3] === 255 ? '' : toHex(this[3]));
} else if (option === '%') {
if (this.a !== 1) {
return `rgba(\${this.r / 255 * 100}%, \${this.b / 255 * 100}%, \${this.g / 255 * 100}%, \${this.a / 255})`;
} else {
return `rgb(\${this.r / 255 * 100}%, \${this.b / 255 * 100}%, \${this.g / 255 * 100})%`;
}
} else {
if (this.a !== 1) {
return `rgba(\${this.r}, \${this.b}, \${this.g}, \${this.a})`;
} else {
return `rgb(\${this.r}, \${this.b}, \${this.g})`;
}
}
}
};

return Color;
}());
``````

For Typescript lovers, here what I use:

``````invertHex(hex: string) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}

if (hex.length != 6) {
console.warn('Hex color must be six hex numbers in length.');
return '#' + hex;
}

hex = hex.toUpperCase();
const splitNum = hex.split('');
let resultNum = '';
const simpleNum = 'FEDCBA9876'.split('');
const complexNum = {
A: '5', B: '4', C: '3', D: '2', E: '1', F: '0'
};

for (let i = 0; i < 6; i++) {
if (!isNaN(Number(splitNum[i]))) {
resultNum += simpleNum[splitNum[i]];
} else if (complexNum[splitNum[i]]) {
resultNum += complexNum[splitNum[i]];
} else {
console.warn('Hex colors must only include hex numbers 0-9, and A-F');
return '#' + hex;
}
}

return '#' + resultNum;
}
``````

Pure CSS implementation of @Onur's answer bw part.

``````  <input type="color" oninput="['--r','--g','--b'].forEach((k,i)=>this.nextElementSibling.style.setProperty(k,parseInt(event.target.value.slice(1+i*2,3+i*2),16)))" />

<div style="--r: 0; --g: 0; --b: 0; --c: calc(-1 * ((var(--r) * 0.299 + var(--g) * 0.587 + var(--b) * 0.114) - 186) * 255)">
<div style="background-color: rgb(var(--r), var(--g), var(--b)); color: rgb(var(--c), var(--c), var(--c))">Test</div>
</div>``````

It is possible to convert a HEX color using the snippets

``````function invertColor(color) {
return '#' + ("000000" + (0xFFFFFF ^ parseInt(color.substring(1),16)).toString(16)).slice(-6);
}
``````