## JS function to calculate complementary colour?

calculate complementary color rgb
js color
javascript color functions
complementary colors
javascript color palette generator
javascript color library
javascript color class
js color opacity

Does anybody know, off the top of your heads, a Javascript solution for calculating the complementary colour of a hex value?

There is a number of colour picking suites and palette generators on the web but I haven't seen any that calculate the colour live using JS.

A detailed hint or a snippet would be very much appreciated.

Parsed through http://design.geckotribe.com/colorwheel/

```    // Complement
temprgb={ r: 0, g: 0xff, b: 0xff }; // Cyan
temphsv=RGB2HSV(temprgb);
temphsv.hue=HueShift(temphsv.hue,180.0);
temprgb=HSV2RGB(temphsv);
console.log(temprgb); // Complement is red (0xff, 0, 0)

function RGB2HSV(rgb) {
hsv = new Object();
max=max3(rgb.r,rgb.g,rgb.b);
dif=max-min3(rgb.r,rgb.g,rgb.b);
hsv.saturation=(max==0.0)?0:(100*dif/max);
if (hsv.saturation==0) hsv.hue=0;
else if (rgb.r==max) hsv.hue=60.0*(rgb.g-rgb.b)/dif;
else if (rgb.g==max) hsv.hue=120.0+60.0*(rgb.b-rgb.r)/dif;
else if (rgb.b==max) hsv.hue=240.0+60.0*(rgb.r-rgb.g)/dif;
if (hsv.hue<0.0) hsv.hue+=360.0;
hsv.value=Math.round(max*100/255);
hsv.hue=Math.round(hsv.hue);
hsv.saturation=Math.round(hsv.saturation);
return hsv;
}

// RGB2HSV and HSV2RGB are based on Color Match Remix [http://color.twysted.net/]
// which is based on or copied from ColorMatch 5K [http://colormatch.dk/]
function HSV2RGB(hsv) {
var rgb=new Object();
if (hsv.saturation==0) {
rgb.r=rgb.g=rgb.b=Math.round(hsv.value*2.55);
} else {
hsv.hue/=60;
hsv.saturation/=100;
hsv.value/=100;
i=Math.floor(hsv.hue);
f=hsv.hue-i;
p=hsv.value*(1-hsv.saturation);
q=hsv.value*(1-hsv.saturation*f);
t=hsv.value*(1-hsv.saturation*(1-f));
switch(i) {
case 0: rgb.r=hsv.value; rgb.g=t; rgb.b=p; break;
case 1: rgb.r=q; rgb.g=hsv.value; rgb.b=p; break;
case 2: rgb.r=p; rgb.g=hsv.value; rgb.b=t; break;
case 3: rgb.r=p; rgb.g=q; rgb.b=hsv.value; break;
case 4: rgb.r=t; rgb.g=p; rgb.b=hsv.value; break;
default: rgb.r=hsv.value; rgb.g=p; rgb.b=q;
}
rgb.r=Math.round(rgb.r*255);
rgb.g=Math.round(rgb.g*255);
rgb.b=Math.round(rgb.b*255);
}
return rgb;
}

function HueShift(h,s) {
h+=s; while (h>=360.0) h-=360.0; while (h<0.0) h+=360.0; return h;
}

//min max via Hairgami_Master (see comments)
function min3(a,b,c) {
return (a<b)?((a<c)?a:c):((b<c)?b:c);
}
function max3(a,b,c) {
return (a>b)?((a>c)?a:c):((b>c)?b:c);
}```

Color Harmonies in JavaScript - DEV Community ‍ ‍ , Short summary of the math i used in a recent color picker. We are mostly concerned with the Hue in these calculations. The key to this function is that we can look at the split complement as the baseHue + 150 and the  color rgb javascript colors calculate inverse function wheel palette java Algorithm to randomly generate an aesthetically-pleasing color palette I'm looking for a simple algorithm to generate a large number of random, aesthetically pleasing colors.

I find that taking the bit-wise complement works well, and quickly.

```var color = 0x320ae3;
var complement = 0xffffff ^ color;
```

I'm not sure if it's a perfect complement in the sense of "mixes together to form a 70% grey", however a 70% grey is "pure white" in terms of color timing in film. It occurred to me that XORing the RGB hex out of pure white might be a good first approximation. You could also try a darker grey to see how that works for you.

Again, this is a fast approximation and I make no guarantees that it'll be perfectly accurate.

See https://github.com/alfl/textful/blob/master/app.js#L38 for my implementation.

How to Calculate a Complementary Colour / Color, Art of Web Design article: How to Calculate complementary colours / colors, Our formula to convert RGB to HSL takes three decimal fractions of 1 as its input. 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)

None of the other functions here worked out the box, so I made this one.

It takes a hex value, converts it to HSL, shifts the hue 180 degrees and converts back to Hex

```/* hexToComplimentary : Converts hex value to HSL, shifts
* hue by 180 degrees and then converts hex, giving complimentary color
* as a hex value
* @param  [String] hex : hex value
* @return [String] : complimentary color as hex value
*/
function hexToComplimentary(hex){

// Convert hex to rgb
// Credit to Denis http://stackoverflow.com/a/36253499/4939630
var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';

// Get array of RGB values
rgb = rgb.replace(/[^\d,]/g, '').split(',');

var r = rgb, g = rgb, b = rgb;

// Convert RGB to HSL
r /= 255.0;
g /= 255.0;
b /= 255.0;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2.0;

if(max == min) {
h = s = 0;  //achromatic
} else {
var d = max - min;
s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));

if(max == r && g >= b) {
h = 1.0472 * (g - b) / d ;
} else if(max == r && g < b) {
h = 1.0472 * (g - b) / d + 6.2832;
} else if(max == g) {
h = 1.0472 * (b - r) / d + 2.0944;
} else if(max == b) {
h = 1.0472 * (r - g) / d + 4.1888;
}
}

h = h / 6.2832 * 360.0 + 0;

// Shift hue to opposite side of wheel and convert to [0-1] value
h+= 180;
if (h > 360) { h -= 360; }
h /= 360;

// Convert h s and l values into r g and b values
if(s === 0){
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;

r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}

r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);

// Convert r b and g values to hex
rgb = b | (g << 8) | (r << 16);
return "#" + (0x1000000 | rgb).toString(16).substring(1);
}
```

c0bra/color-scheme-js: Generate pleasant color schemes in , Contribute to c0bra/color-scheme-js development by creating an account on GitHub. Get the minified file (8kb). Additionally, the add_complement() method can be used to add complementary colors (i.e. those that are opposite the source  Placed side by side as tiny dots, in partitive color mixing, complementary colors appear gray. Finding complementary color is very simple in RGB model. For any given color, for example, red (#FF0000) you need to find the color, which, after being added to red, creates white (0xFFFFFF).

Rather than reinventing the wheel, I found a library to work with colors.

Tiny Color

This is how you would implement some of the other answers using it.

```color1 = tinycolor2('#f00').spin(180).toHexString(); // Hue Shift
color2 = tinycolor2("#f00").complement().toHexString(); // bitwise
```

How to manipulate CSS colors with JavaScript, How To Manipulate CSS Colors With JavaScript The formula for calculating the hue angle from RGB coordinates is a bit const rotate30 = rotateHue(30); const getComplementary = rotateHue(180); const getTriadic = color  Complementary colours are opposite one another on the colour wheel, so the easiest way to calculate them is to convert to a colour notation system that's based on that wheel, e.g., HSL. If you're already familiar with HSL, skip to the calculation section below.

##### RGB Complimentary

```function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i.exec(hex);
return result ? {
r: parseInt(result, 16),
g: parseInt(result, 16),
b: parseInt(result, 16)
} : null;
}

function rgbComplimentary(r,g,b){

var hex = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';

// Get array of RGB values
rgb = rgb.replace(/[^\d,]/g, '').split(',');

var r = rgb/255.0, g = rgb/255.0, b = rgb/255.0;

var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2.0;

if(max == min) {
h = s = 0;  //achromatic
} else {
var d = max - min;
s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));

if(max == r && g >= b) {
h = 1.0472 * (g - b) / d ;
} else if(max == r && g < b) {
h = 1.0472 * (g - b) / d + 6.2832;
} else if(max == g) {
h = 1.0472 * (b - r) / d + 2.0944;
} else if(max == b) {
h = 1.0472 * (r - g) / d + 4.1888;
}
}

h = h / 6.2832 * 360.0 + 0;

// Shift hue to opposite side of wheel and convert to [0-1] value
h+= 180;
if (h > 360) { h -= 360; }
h /= 360;

// Convert h s and l values into r g and b values
if(s === 0){
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;

r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}

r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);

// Convert r b and g values to hex
rgb = b | (g << 8) | (r << 16);
return hexToRgb("#" + (0x1000000 | rgb).toString(16).substring(1));

}

console.log(rgbComplimentary(242, 211, 215));```

TinyColor - Fast, small color manipulation in JavaScript, jQuery xColor for some of the combination functions; w3.org for the color list and parsing rules; mjijackson.com for the first stab at RGB / HSL / HSV converters. I am trying to randomly generate a color in hex in javascript. However the colors generated are almost indistinguishable from eachother. Is there a way to improve it? Here is the code I am using:

color, Does anybody know, off the top of your heads, a Javascript solution for calculating the complementary colour of a hex v. A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

Complementary Colours Algorithm, Get unlimited public & private packages + package-based permissions with npm Pro. JavaScript library for immutable color conversion and manipulation Manipulation functions by CSS tools like Sass, LESS, and Stylus. Comment puis-je supprimer une propriété d'un objet JavaScript? Quel est le moyen le plus efficace de cloner profondément un objet en JavaScript? "Penser en AngularJS" si j'ai une formation en jQuery? [fermé] Comment retourner la réponse d'un appel asynchrone? Comment inclure un fichier JavaScript dans un autre fichier JavaScript?

Calculating Color: Dynamic Color Theming with Pure CSS, To find out pairs of complementary colours we can use a colour wheel. following formula to work out the complementary RGB colour code: Color Harmony Basics How to choose colors that really work? Use the color wheel (or our color calculator) to help you identify harmonious color combinations. The following color harmonies are based on geometric relationships on the color wheel. For this reason, we can represent them as shapes.

• This works nicely, except if you want the result to always be 6 characters long. I suggest `('000000' + (('0xffffff' ^ '0x320ae3').toString(16))).slice(-6);`