Color models of color reproduction in WEB-design

In web design, several models of the presentation of color on the page are used to correctly display it by the browser. The most popular and current browsers since the first model - the RGB , which allows to specify the color through the three components of its component .

Color palette

RGB color model

As follows from the abbreviation of the model, the RGB color space ( Red - red, Green - the green component and Blue - blue) describes all the possible colors and their shades that can be obtained by mixing the main components of red, green, and blue. This method of color coding allows you to describe allows you to imagine  16 777 216 different colors . This is perhaps the most popular model in computer graphics due to 100% compatibility for all color interpreters.

The digital values ​​of RGB color coefficients are a triad of integers in the range from 0 to 255 . Thus, RGB (0, 255, 0) is displayed as pure green, since the value of the green coefficient is set to maximum, and the rest of the parameters are set to 0.

For the convenience of programmers, modern browsers support the presentation of coefficients in percentage form from 0% to 100% .

Examples of color transfer to WEB using the RGB model for CSS styles of elements:

H1 {background: RGB(0, 200, 0);} /* green */
H2 {background: RGB(200, 124, 203);} /* pink */
H3 {background: RGB(100%, 65%, 0%);} /* orange */

RGBA color model

RGBA is an extended version of RGB , but with additional support for the alpha channel , which is responsible for the transparency of the color fill. For this color model, four coefficients are already indicated, the last of which is a fractional number in the range from 0 , where 0 is full transparency to 1 , which will correspond to a completely opaque color.

Examples of color transfer to the WEB using the RGBA model for CSS styles of elements:

H1 {background: RGBA(0, 248, 0, 1);} /* intensely green, fill 100% */
H2 {background: RGBA(0, 248, 0, 0.5);} /* translucent green, fill 50% */
H3 {background: RGBA(0, 248, 0, 0);} /* absolutely transparent color */

HEX color model

HEX color coding is essentially a hexadecimal representation of the RGB model discussed above .

All color codes of this model are presented in combined form from a triad of numbers in a hexadecimal number system, in which each of the three groups is responsible for its component color . The length of the group is fixed - 2 characters . This approach allows you to still specify 256 states of the desired color factor. The values ​​of each of the coefficient groups must be between 00 and FF .

For browsers, a simplified form of recording color in HEX format is also possible , where only three characters of the code are indicated instead of 6. In this case, it is understood that each of the three groups consists of the same characters. For example, AAFF11, can be shortened to AF1.

Examples of color transfer to WEB using the HEX model for CSS styles of elements:

H1 {background: #00FF00;} /* green */
H2 {background: #0F0;} /* green in abbreviated format */

In addition to these features, the HEX model also supports the alpha channel for controlling transparency, in which case a fourth coefficient is added in the range from 00 and FF (256 values). In this case, the use of an abbreviated form of recording is already unacceptable.

An example of color transfer to WEB using the HEXA model for CSS styles of elements:

H1 {background: #00FF0080;} /* translucent green */

HSL color model

The HSL color model allows you to interpret the basic RGB model in the projection of a cylindrical color coordinate system . Coloring experts believe that HSL allows you to specify colors in a more understandable way for an ordinary person than a typical RGB model. The HSL abbreviation is interpreted as Hue (color / hue), Saturation (saturation), Lightness / Luminance (luminosity, not to be confused with brightness).

  • The first coefficient ( Hue ) indicates the color coordinate within the color wheel ( from 0 to 360 degrees )
  • The second coefficient ( Saturation ) transfers the percentage value of saturation ( from 0% to 100% )
  • The last coefficient ( Lightness ) indicates the percentage value of luminosity ( from 0% to 100% )

Examples of color transfer to WEB using the HSL model for CSS styles of elements:

H1 {background: HSL(212, 100%, 50%);} /* navy */
H2 {background: HSL(212, 100%, 75%);} /* blue */
H3 {background: HSL(360, 0%, 50%);} /* gray */

HSLA color model

As with RGBA, HSL has an advanced HSLA model with the ability to control the alpha channel to ensure transparency in the color fill.

The color code in the HSLA is indicated by the formula: HSLA (hue, saturation, lightness, alpha). Where the last parameter alpha is a fractional number in the range from 0 (fully transparent fill) to 1 (opaque color) with an arbitrary step.

H1 {background: HSLA(212, 100%, 50%, 1);} /* completely blue */
H2 {background: HSLA(212, 100%, 75%, 0.5);} /* translucent blue */
Liked the project?

Just share the link to this page with your friends