Pages

How to generate rainbow colors


Hi There,
At times you might have to generate few colors which almost covers entire rainbow (visible spectrum) range.

Here in this article I am giving away a function which generates as many colors as you want but those colors will try to cover the entire (visible light) spectrum. i.e if you just generate 3 colors you will get Green, Red and Blue. If you generate 100 colors you will get multiple tints of Green, Red and Blue.

Function Name is : getColor(count)
Input count: Number of colors to generate.
Returns : li items with color (as style attribute).

<li class="color" style="background-color:rgb(254,64,54);">  </li>

How it works?
I have taken 3 sine waves, all are with different phase. Each of these sine curve generates my RGB values. Each sine wave will swing from 0 to 2pie (360deg). There has been a bit of normalization just to make the colors look good (in final code).





function getColor(noOfColors) {
    html = "";
    frequency = 5 / noOfColors; 
    for (var i = 0; i < noOfColors;++i) {
        r = Math.sin(frequency * i + 0) * (127) + 128;
        g = Math.sin(frequency * i + 1) * (127) + 128;
        b = Math.sin(frequency * i + 3) * (127) + 128;
        li = '<li class="color" style="background-color:rgb({r},{g},{b});">  </li>';
        li = li.replace("{r}", Math.floor(r));
        li = li.replace("{g}", Math.floor(g));
        li = li.replace("{b}", Math.floor(b));
        html = html + li;
    }
    return html;
}

                                                                  Demo jsfiddle 

1 comment:

  1. Best Slots Casinos in Las Vegas, NV - Mapyro
    The 파주 출장샵 closest casinos 평택 출장마사지 to Las 오산 출장안마 Vegas, NV are found on Mapyro Las Vegas. See all Casino's 전주 출장마사지 hotels and places to stay closest to the casinos. 경주 출장안마

    ReplyDelete

Your comment will inspire me, Please leave your comment