Color codes

How would you set the colors that you see in everyday life on the devices like TVs, monitors or displays? How would you write using terms of electronic devices which pixel would be red, white, black or any other color? The brief answer to these questions would be ‘using synthesis of color and color models’. The models describe the ways of color synthesis and color reproduction. In other words, the models allow us to encode every color, so to define the color you need means to define the relevant color code.

The popular color models are: RGB, CMYK, HSL, HSV (or HSB), XYZ, Yxy. Our goal is to give information on color codes for web, so we'll look mostly at hex-codes and codes of RGB model.

HTML colors

You can set colors on web-pages using one of the 4 methods:

1. Using 3 pairs of hexadecimal codes (they are known as hex-codes): #FF0000 (red), #A52A2A (brown).
   .text { color: #FF0000; }
.bg { background: #A52A2A; }
2. Using English names of colors: green, blue, orange and other.
   .text { color: red; }
.bg { background: brown; }
   All popular colors have their names.
3. Using RGB-models and a construction like rgb(ххх,ххх,ххх) or rgba(ххх,ххх,ххх,А). Each of the xxx blocks is a color component which defines in the range from 0 to 255. A-block is an alpha channel, which defines the level of transparency of an element on a web-page and lies in the range from 0 to 1.
   .text { color: rgb(255,0,0,0.7); }
.bg { background: rgb(165,42,42); }
   Note: RGBA is in CSS3.
4. Using HSL-model that is in CSS3. The construction hsl(xxx,xxx,xxx) or hsla(xxx,xxx,xxx,A) is used. The last one is with alpha channel.
   .text { color: hsla(120, 100%, 50%, 0.5); }
.bg { background: hsl(0, 100%, 50%); }

RGB

The name of the model is an abbreviation from words Red + Green + Blue. RGB is a color model which consist of three channels: red + green + blue. Each of three channels is a numeric range from 0 to 255. So the code of any color consists of 3 pairs of numeric ranges. The model describes any color as a mix of three colors, which are taken in different proportions.

These are examples of color setting using RGB model: 255.0.0 — red, 255.255.0 — yellow, 165.42.42 — brown.

Another question might be interesting: how many colors are there? As each of the ranges includes 256 combinations and there are three of those, the overall number totals 256³ = 16 777 216. Each color in this model is defined by its unique code.

This model is being used widely in electronics.

The full size is 4096×4096 px.