# The Colors Used by the Ten Most Popular Sites

I was curious what colors were being used by large, popular sites, so I decided to find out.

Alexa.com maintains a list of the most visited sites on the internet. I wrote a PHP script to scrape the ten most popular sites and record all the colors used in the sites' home pages and style sheets.

I plan to rescrape the data on a regular basis. Because of this, I'll keep analysis to a minimum, since it could become outdated when the data changes. Once I have data over a larger time period I'll be able to examine and graph trends in web development. I also plan to examine the difference in color usage between popular websites from different parts of the world.

This data is current as of September 18th, 2016.

NOTE: This visualization doesn't include colors used in images, only CSS and HTML color codes. For a full list of caveats click here.

## The Sites

Here are the ten most popular sites, and the colors that they use. Duplicates were removed on a per site basis. However, if a site used the same color in multiple formats, each format is included. For example, if they used `#000`

, `#000000`

, and `black`

, each would be included separately.

Click on a site for a breakdown of the colors that site uses.

## Colors by Hue

For the purposes of this chart, transparency was removed from all colors.

## Colors by Format

Browsers recognize colors in seven different formats; hexadecimal, RGB, RGBA, HSL, HSLA, and predefined color names.

## Colors by Hue and Then Saturation

In this fan chart, colors are organized around the circle by hue. Their distance from the center is determined by their saturation.

If a color was found more than once in the data it has a larger area. A color that was found three times has an area three times larger than a color that was found once. Colors had their hue, saturation and lightness rounded to the nearest integer. Transparency was removed.

Unfortunately, using this style of chart has one main disadvantage. Some colors become hidden under other colors.

# Converting Between Color Formats

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`

. These color names are written without any spaces. They're case insensitive, so it does not matter how they are capitalized.
View all predefined color names.

### 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.

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.

### 3 Digit Hexadecimal

Sometimes you'll see 3 digit hexadecimal colors like this: `#000`

. This means each color pair had 2 identical digits.

`f`

= `ff`

so `#fff`

= `#ffffff`

and `#3a9`

= `#33aa99`

.

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.

#### Hue

Hue is the most common way for people to describe colors. Hue refers to the shade of a color. Red, Green, Blue, Pink and Orange are all examples of hue.

In the hsl color model hue is plotted around a circle, so is represented as a number between 0 and 360.

#### Saturation

Saturation is the purity of a color, or how much grey is in the color.

A low saturation color is almost completely grey, black or white. A high saturation color is almost completely its hue. Saturation is represented as a percentage between 0 and 100.

#### Lightness

Lightness determines whether a color is dark or light. A `100%`

is white and a `0%`

is black.

### 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); } else if (green == max) { var temp_hue = 2 + (blue-red)/(max-min); } else if (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.

# Join My Mailing List

I'll only email you things I think you might find interesting. Things like this.