Show HN: Colors Used by Popular Sites

In order to organize this data for the above charts, I had to convert all the colors used into a single format. Here I'll explain the different color formats and how I converted them all to HSL.

Predefined Color Names

Browsers recognize certain predefined color names. 140 names are supported by all browsers. The names range from common words like white and red to stranger examples like LightGoldenRodYellow, PapayaWhip, IndianRed and AliceBlue.

RGB (Red, Green, Blue)

Digital colors are made by combining different amounts of red, green and blue light. The amount of each color is represented by a number between 0 and 255.

This is how to write the RGB color format: rgb(186, 218, 85). The first number is red, the second is green and the third is blue.

RGBA (Red, Green, Blue, Alpha)

There's another version of RGB which is frequently used on the web. RGBA adds an additional parameter; alpha. Alpha determines the transparency or opacity of the color. 0 is completely transparent. 1 is completely opaque.

Hexadecimal

The most common color format on the web is hexadecimal. Hexadecimal colors are another way to represent RGB colors.

Hexadecimal numbers are base 16 instead of base 10, so each character represents a number between 0 and 15 instead of 0 and 9.

base16ToBase10('f0');
function base16ToBase10(base16){
return parseInt(base16,16);
}

base10ToBase16(186);
function base10ToBase16(base10){
var base16 = parseFloat(base10).toString(16);
// If the hex number is 1 character long, add a 0 to the front.
if(base16.length==1){
        base16 ='0'+ base16;
}
return base16;
}

A hexadecimal color is six characters long and preceded by a number sign: #BADA55. Hexadecimal colors can be split into 4 sections: # + BA + DA + 55. We can ignore the first section: #. This section tells the browser that a hexadecimal color is coming.

The remaining 3 sections contain important information about the color. Hexadecimal colors are based off of the RGB (Red, Green, Blue) color model and each section defines how much of one of those colors is present in the final color.

Here are the color values for #BADA55, converted into base 10.

 hexToRgb('#BADA55');
function hexToRgb(color){
var red   = base16ToBase10( color.substring(1,3));
var green = base16ToBase10( color.substring(3,5));
var blue  = base16ToBase10( color.substring(5,7));
return'rgb('+ red +','+ green +','+ blue +')';
}

 rgbToHex('rgb(100,222,0)');
function rgbToHex(color){
var temp_color = color.replace('rgb(','');
    temp_color = temp_color.replace(')','');
    temp_color = temp_color.split(',');
var red = base10ToBase16(temp_color[0]);
var green = base10ToBase16(temp_color[1]);
var blue = base10ToBase16(temp_color[2]);
return'#'+ red + green + blue;
}

3 Digit Hexadecimal

Sometimes you'll see 3 digit hexadecimal colors like this: #000. This means each color pair had 2 identical digits.

threeDigitsToSix('#000');
function threeDigitsToSix(color){
    hex = color.split('');
return'#'+ hex[1]+ hex[1]+ hex[2]+ hex[2]+ hex[3]+ hex[3];
}

HSL (Hue, Saturation, Lightness)

HSL is a color format that attempts to match how humans view color by organizing by hue, saturation and lightness.

HSLA (Hue, Saturation, Lightness, Alpha)

Similar to RGBA, HSLA has an alpha channel to determine transparency.

Converting from RGB to HSL

The first step is to convert all red, green and blue values into decimals between 0 and 1.

Then you determine the “min” and “max.” The min is the smallest decimal and the max is the largest decimal.

To discover the lightness, add the min and max values together and then divide by 2.

Once we have these values we can determine whether there is saturation and hue. If min and max are the same, then the saturation is 0. If the saturation is 0, then the hue is 0.

If min and max aren't the same, then we need to determine the saturation. Depending on the lightness there are 2 different formulas to use.

If the lightness is below 0.5 then the saturation equals (max-min)/(max+min)

If the lightness is larger than 0.5 then the saturation equals (max-min)/(2-max-min)

Now that we know the lightness and saturation, we can determine the hue. The formula to determine hue depends on which color was the "max."

If red was the max then hue equals (green-blue)/(max-min)

If green was the max then hue equals 2+(blue-red)/(max-min)

If blue was the max then hue equals 4+(red-green)/(max-min)

After making this calculation you need to convert hue to a value between and 255. Multiply the value by 42.6. If it is below 0, then add 255 to the value.

rgbToHsl('rgb(100,50,0)');
function rgbToHsl(rgb){
var channels = rgb.replace('rgb(','');
    channels = channels.replace(')','');
    channels = channels.split(',');
var red = channels[0]/=255;
var green = channels[1]/=255;
var blue = channels[2]/=255;
/* Getting the Max and Min values. */
var max =Math.max.apply(Math,[red,green,blue]);
var min =Math.min.apply(Math,[red,green,blue]);
var lightness =(min + max)/2;
if(min === max){
var saturation =0;
var hue =0;
}else{
if( lightness <0.5){
var saturation =(max-min)/(max+min);
}else{
var saturation =(max-min)/(2-max-min);
}
if(red == max){
var temp_hue =(green-blue)/(max-min);
}elseif(green == max){
var temp_hue =2+(blue-red)/(max-min);
}elseif(blue == max){
var temp_hue =4+(red-green)/(max-min);
}
var hue = temp_hue *42.6;
if(hue <0){
            hue +=255;
}
}
    saturation *=100;
    lightness *=100;
return'hsl('+ hue +','+ saturation +','+ lightness +')';
}

We're Done!

The HSL color model is very close to how people interpret colors, so it is the most useful model for organization and analysis. Now that all of our colors are in HSL we can organize by hue, saturation and lightness.