Is there a formula that I can apply to find out a complementary color?

Question

I have a web page with a blue/violet background and a simple table with a white background and currently a blue hover color. This is demonstrated in this fiddle. Note that I put the example in jsfiddle because it was an easy place to show the HTML for others but I am not looking for a javascript solution. It's just for example purposes.

http://jsfiddle.net/gL7Lpys0/

I would like to find a complementary color for the hover. Is there a formula or a way that I can do this mathemetically? Note that I don't want to set it at run time I would just like to find out if there's a way I can find a good color that would match so I can use this at design time.

Here are the details:

Background body color:  #162252
Table header color:     #e3e3e3  
Table background color: #FFFFFF
Hover row color:        #0081c2 << This color currently does not match /
                                   look good so I would like to find out
                                   how I can calculate something that 
                                   matches.

See this: http://stackoverflow.com/questions/1664140/js-function-to-calculate-complementary-colour — Anupam Basak, Feb 27 '15 at 17:35
Thanks but the link is for javascript. I would like to find a formula that I could use / put into a few lines of Excel to do the calculation at design time. — Alan2, Feb 27 '15 at 17:36
Stephan - Sorry but what should I put as the tags for this. I think many people who are familar with HTML and CSS will know or have an interest in how to choose colors. — Alan2, Feb 27 '15 at 17:40
@Alan: The html and css tags are fine. You can add another tag with the language that you plan to use to determine this complementary color, for example javascript, assuming you want to do it programmatically. — BoltClock, Feb 27 '15 at 17:44

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Here is how you can compute complementary colors with JavaScript:

// complement
temprgb=thisrgb;
temphsv=RGB2HSV(temprgb);
temphsv.hue=HueShift(temphsv.hue,180.0);
temprgb=HSV2RGB(temphsv);

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

//Adding HueShift via Jacob (see comments)
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); 
}

Source

Is there a formula that I can apply to find out a complementary color?

1 Answers1