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.
You can set colors on web-pages using one of the 4 methods:
.text { color: #FF0000; }
.bg { background: #A52A2A; }
.text { color: red; }
.bg { background: brown; }
.text { color: rgb(255,0,0,0.7); }
.bg { background: rgb(165,42,42); }
.text { color: hsla(120, 100%, 50%, 0.5); }
.bg { background: hsl(0, 100%, 50%); }
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 2563 = 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.