Light green color code. Color in styles can be specified in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA format

>>Color management

Hexadecimal RGB color values

Methods of describing and processing color differ from each other in what final representation they are intended for. Let us compare, for example, the representation of colors for printing and for computer monitors. In the first case, the basis is taken white the color of the paper on which three primary colors are subsequently applied: blue, purple And yellow. Mixing with each other and with the white color of paper in different proportions, these three primary colors give different color shades, except for pure black, or in the complete absence of paints they give white paper. If we add black color to them, we get CMYK-a method of transmitting color when the required color is obtained by subtracting the missing colors from white.

In the second case, the basis is taken black the color of the monitor screen, each cell of which glows in one of three colors: red-red, green-green and blue-blue. Then, in the complete absence of any glow, we get a pure black screen color, and any of the required colors is given by the ratio of each of the three colors. In this case we will get RGB-method of color transmission. Primary colors can range from 0 to 255 , or from 0% to 100% , or can be represented as a hexadecimal value. In the figure below you can see the results of mixing primary colors.

The hexadecimal number system, unlike the decimal number system, has not ten digits, but sixteen - hence the name. Accordingly, there can only be non-repeating variants of combinations of two digits - 256 , to continue the series of numbers after 9 letters from A to F, therefore, the series will look like this -

In this case, the color is specified by three hexadecimal numbers, each of which consists of two digits. The first number determines the intensity red colors, medium- green, last- blue colors. All numbers can take values ​​in the range from 00 to FF(from 0 to 255). For example: green color is given as #00FF00, red - like #FF0000, blue - like #0000FF, white - like #FFFFFF, complete absence of color or black is given as #000000 .

In the form below you can specify any hexadecimal values ​​for each of the three colors and see the result of mixing them by clicking in the output field.

Examples of some hexadecimal RGB color values: gradations of red, blue and green.

Specifying Color Using String Literals

For ease of use, some colors and their combinations were assigned names that are recognized by all browsers, and it became possible to specify many of them by name. The table below shows some of the color names:

Using a safe color palette

Unfortunately, on different platforms, with different system settings, correct color reproduction is a problem. The thing is that the browser always tries to adjust the color palette of the document to the system settings and monitor capabilities, by independently mixing colors and replacing them. As a result, sometimes the user does not see exactly what the webmaster wanted to show him. A way out of this situation was found in the use of a palette, each color of which is guaranteed to be rendered equally by all browsers on different platforms. This is the so-called guaranteed palette, also called safe palette. This palette includes colors whose color components take the following values: 00 ,33 ,66 ,99 , CC,FF, in all possible ways 216 their combinations.

Color codes in CSS are used to specify colors. Typically, color codes or color values ​​are used to set the color for either the foreground color of an element (e.g. text color, link color) or the background color of an element (background color, block color). They can also be used to change the color of a button, border, marker, hover, and other decorative effects.

You can specify your color values ​​in various formats. The following table lists all possible formats:

The listed formats are described in more detail below.

CSS Colors - Hex Codes

Hexadecimal color code is a six-digit representation of color. The first two digits (RR) represent the red value, the next two represent the green value (GG), and the last two represent the blue value (BB).

CSS Colors - Short Hex Codes

Short hex color code is a shorter form of six-character notation. In this format, each digit is repeated to produce an equivalent six-digit color value. For example: #0F0 becomes #00FF00.

The hexadecimal value can be taken from any graphics software such as Adobe Photoshop, Core Draw, etc.

Each hexadecimal color code in CSS will be preceded by a hash sign "#". Below are examples of using hexadecimal notations.

CSS Colors - RGB Values

RGB value is a color code that is set using the rgb() property. This property takes three values: one each for red, green, and blue. The value can be an integer, from 0 to 255, or a percentage.

Note: Not all browsers support the rgb() color property, so it is not recommended to use it.

Below is an example showing multiple colors using RGB values.

Color code generator

You can create millions of color codes using our service.

Browser Safe Colors

Below is a table of 216 colors that are the safest and most computer-independent. These colors in CSS range from 000000 to FFFFFF hexadecimal code. They are safe to use because they ensure that all computers display color correctly when working with the 256 color palette.

As you know, color can affect a person’s state: both mental and physical. Every day, while browsing websites on the Internet, the eyes evaluate millions of colors and shades. A web designer who is familiar with the psychology of color can manipulate the visitor's mood to achieve certain goals.

This is due to the fact that some shades calm, and some, on the contrary, excite. Next we will talk about how color is synthesized and displayed using computer technology.

RGB is a color model that represents a method of obtaining all colors and their shades by mixing in various proportions three main components, which are:

• red ( Red);
• green color ( Green);
• blue color ( Blue).

This is where the abbreviated name RGB comes from. These colors were chosen as the main ones for a reason: the reason is the physiology of the retina of the human eye, and how it perceives them:

Numerical representation of color

As mentioned earlier, RGB colors are formed by mixing primary colors. To describe the intensity of each of them, a scheme was adopted in which color is represented by the range 0-255 (8 bits), which in hexadecimal notation corresponds to 00-FF.

That is, the primary colors will look like this:

• Red – RGB (255,0,0);
• Green – RGB (0,255,0);
• Blue – RGB (0,0,255);

If the color intensity takes values ​​less than 255, then different shades of red, green and blue are obtained. The following is a table of their gradations, as well as the hexadecimal values ​​of each of the shades:

RGB color tables

Naturally, in addition to gradations of primary colors, there are mixed ones, and their number is quite large. Therefore, a table of RGB colors was created, which presents all existing shades, as well as their names and numerical representations ( in decimal and hexadecimal form).

You can view it here. This table makes life much easier for web designers, since in a few seconds you can find the required shade and find out its numerical representation.

Safe RGB color palette

However, at some point there was a problem with displaying colors in different browsers, and to solve it, the so-called “safe” palette of RGB colors was compiled, which were derived by mathematical calculations.

When the browser can't display a color correctly, it will try to get something close to what it needs by mixing adjacent colors, and most likely the result will be completely unacceptable:

By using RGB color codes from this palette, a web developer can have peace of mind regarding the display of colors on the pages of their website when viewed using different browsers, platforms and monitors. Although at the moment the table of safe colors is losing its relevance ( technological progress still does not stand still), when using it you can, as they say, sleep peacefully.

Gold color in RGB model

The word “gold” was first used at the beginning of the 14th century to describe the color of a chemical element called Aurum - gold. In the RGB model, the color gold is represented by the following numerical values:

• RGB (255, 215, 0) – decimal system;
• HEX #FFD700 – hexadecimal system.

Beige color in RGB model

Beige color occupies a rather significant place in history, even if it is not the most expressive. Many cultural monuments, especially ancient sculptures, were made of soapstone and soapstone, which have a beige tint. In the RGB model, the color beige has the following numeric representations.

Color in CSS can be set in different ways:

• by name,
• by hexadecimal value,
• in RGB and RGBA formats,
• in HSL and HSLA formats.

Set color by name

Browsers support specifying some colors for elements by name. This table contains some keywords (English color names) used to specify color properties, RGB code, hexadecimal code (HEX) and HSL code.

This is an example of the use of color names, the color names are taken from the extended table.

Here's how this code works:

Setting color using RGB

RGB is an additive color model. In English addition- addition. RGB is an abbreviation of the English words: Red, Green, Blue - red, green, blue). From this it is clear that in the RGB model, colors are synthesized by adding three colors (red, green, blue) in different quantities.

By mixing red, green and blue colors you can get several million shades. All possible combinations are stored in computer memory.

Get to the point.

To set properties in this format, use the notation rgb(r, g, b) , where r, g, b are the three channels for each color (red, green, blue). Values ​​for each channel are set in the range from 0 to 255.

Example code.

To make everything clear, here is a code example:

This is how this example should work:

Explanations for example.

At the beginning of the page we create the div.rgb class, it is needed for blocks created by the tag

were displayed in the required size: 240px by 40px. We assign the line-height property a value of 40px, that is, equal to the height of the block, this will allow you to display text in the block

at the vertical center. We center the text horizontally using the rule ( text-align : center ;).

Next, in the code we set the background color of the block

using the style attribute, using the background property, and assigning values ​​to rgb(255, 0, 0) , rgb(0, 255, 0) , and rgb(0, 0, 255) . That is, we alternately make one channel as saturated as possible, and the remaining channels are not used for synthesis, since their value is zero.

Try editing this example and specifying your own values, for example rgb(100, 100, 100) .

Setting color using RGBA

CSS3 has a new tool for working with color - the RGBA format. It can be called an evolution of the RGB model, but with the addition of one new channel - the A or alpha channel. This channel sets the transparency of the color. Its values ​​are set in the range from 0 to 1. A value of 0 corresponds to full transparency, 1 - full opacity (the color will be the same as it was specified in the first three RGB channels), and intermediate values ​​like 0.4 or 0.6 - translucency to varying degrees.

Example code.

Here's how it will work:

This code is visually similar to the following, which uses the RGB model to specify a color value:

Here is his result:

An alpha channel value equal to zero makes any color invisible - absolutely transparent; a value equal to one translates the color in the RGB code without changes. The rgba(255,0,0,1.0) property shows the color red rgb(255, 0, 0) .

By hexadecimal value (HEX code)

In everyday life, we use the decimal counting system. Its origins are very simple - we have ten fingers on our hands, and counting on our fingers has been convenient in life. If the decimal system has ten digits: from 0 to 9, and the number 10 is the next digit, then the hexadecimal number system has 16 digits, and the next digit is the number 16.

To indicate color codes, ordinary decimal digits from 0 to 9 are used as hexadecimal digits, and Latin letters from A to F are used to indicate numbers from 10 to 15, that is, (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). For clarity, let's put this in a table:

To write hexadecimal numbers greater than F (15 in the decimal system), as in the decimal system, they also use the combination of two digits, but already hexadecimal, which is obvious. Thus, to write the decimal number 255 in hexadecimal notation, use FF notation.

The hexadecimal system is more understandable to the computer, and it processes values ​​​​set by hexadecimal value faster.

To specify a color in hexadecimal, precede the numeric value with a “#” sign, example: #FFC0CB. The value #FFC0CB itself consists of three hexadecimal digits FF, C0 and CB. The meaning of this entry is the same as setting the color in the RGB format (rgb(r, g, b)) - each hexadecimal digit in the HEX code indicates the color saturation in its channel of the RGB model.

#FF0000

#00FF00

#0000FF

This code will display the following elements:

And here is a picture with the result from the section "Setting colors using RGB" on this page above.

Fig.1. Colors in RGB.

We see that the colors are identical.

A shortened notation of the HEX color code is allowed: a 6-digit number can be written as a 3-digit number. This is only valid when two digits in the color value of one channel are repeated.

That is, the following abbreviation is acceptable:

For example, the color #ff22aa can be written as #f2a, or the color #44aa22 can be written as #4a2.

Setting Color Using HSL

CSS3 has a new format for specifying colors.

The HSL format is an abbreviation for the English words: Hue (hue), Saturate (saturation) and Lightness (lightness).

Hue in HSL is the value of a color on a special color wheel (Figure 2) and is specified in degrees. If we draw analogies with the RGB model, then 0° corresponds to red, 120° corresponds to green, and 240° corresponds to blue.

The hue value will change from 0 to 359.

Figure 2. HSL color wheel.

The second value - saturation (Saturate) is set as a percentage. At 100% saturation, the color is as “juicy” as possible; as the saturation indicator moves towards 0%, the color becomes duller and rolls into gray.

The third value, Lightness, is also set as a percentage. The higher the percentage, the brighter the color will be. The extreme values ​​of 0% and 100% will indicate black (no light) and white (overexposed) colors, respectively, and it does not matter which color from the color wheel was selected in the first channel. The optimal color brightness value is 50%.

Setting Color Using HSLA

The HSLA format is related to HSL, just as RGB is to RGBA. In the HSLA format, as in RGBA, an alpha channel is added, which is responsible for color transparency.

Color specified in HSL format is easier to read. We can say that it is intuitive. For example, the code hsl(120,60%,50%) can represent the final color if there is a picture of the HSL color wheel in memory. The same cannot be said about the RGB and HEX formats; the color code specified in these formats becomes clear only after it is visualized on the monitor.

New formats in CSS3 (HSL, HSLA and RGBA) work in browsers starting from versions: IE 9.0, Opera 10.0 Firefox 3.0. How can I make styles work on older browsers?

Somebloсk ( background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) )

When using this code in older browsers, the background color for the .somebloсk class, although it will not use an alpha channel, will be displayed in RGB format.