Converting Colors

Format Hex

The Hex color format or hex triplet is a 3 byte hexadecimal code. This leads to 16,777,216 possible combinations of the 6 characters for the hex triplet. The hex color is based on three primary colors, first red, then the green value and last the blue color. The hex color is build by concatenating these six characters, for example FF00AA.

If one of the three hexadecimal color values is less than 16, a zero must be prepended. So a hex value of 4 would be 04 as the triplet always has six characters. Let's look at the example from before again and break it down:

The # indicates that the following characters are a hex color. The rest of the string FF00AA is representing the colors red, green and blue, valid characters in the hex color are only ten numerals (0-9) and six letters (a-f). As a representation with only numbers would not cover the full color space the letters a-f are used to represent the numbers 10 - 16.

The higher the value of a primary color is, the brighter that color is. This means that the hex color 000000 has zero brightness in all three primary colors and is therefore black. The color FFFFFF is the opposite as all colors have full brightness which leads to white.

To make it easier to understand a few more examples:
FF0000, as only the red color has a value for brightness and as it is the highest value possible (f=16) this color code shows the brightest red.
00FF00, now the red color has no value but the green color has, meaning this is the brightest green color.
0000FF, same concept here only the last primary color (blue) has a value for brightness and shows therefore the brightest blue color.

Shorthand

In CSS it is possible to use a shorthand three digit format, where the single digits get doubled. So for example 0FC would be 00FFCC in the normal format. In the Shorthand format there are only 4096 possible colors.


Hex CSS

To use a Hex color in CSS the following format needs to be used #RRGGBB. Hex colors are supported by all browsers.

div {
  background-color:#FF0000;
  color:#FFFFFF;
}