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

Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal system corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999. Each of the three colors - red, green and blue - can take values ​​from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue. It is allowed to use the abbreviated form #rgb, where each character should be doubled. Thus, the entry #fe0 should be regarded as #ffee00.

By name

Browsers support some colors by their name. In table 1 shows the names hexadecimal code, RGB, HSL values ​​and description.

Using RGB

You can define color using the red, green, and blue values ​​in decimal terms. Each of the three color components takes a value from 0 to 255. It is also permissible to specify the color as a percentage, with 100% corresponding to the number 255. First, specify the rgb keyword, and then specify the color components in parentheses, separated by commas, for example rgb(255 , 128, 128) or rgb(100%, 50%, 50%).

RGBA

The RGBA format is similar in syntax to RGB, but includes an alpha channel that specifies the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is semi-transparent.

RGBA was added to CSS3, so CSS code must be validated against this version. It should be noted that the CSS3 standard is still under development and some features may change. For example, a color in RGB format added to the background-color property is validated, but one added to the background property is no longer valid. At the same time, browsers quite correctly understand the color for both properties.

HSL

The name of the HSL format is derived from the combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the color value on the color wheel (Fig. 1) and is given in degrees. 0° corresponds to red, 120° to green, and 240° to blue. The hue value can vary from 0 to 359.

Rice. 1. Color wheel

Saturation is the intensity of a color and is measured as a percentage from 0% to 100%. A value of 0% indicates no color and a shade of gray, 100% maximum value saturation.

Lightness specifies how bright the color is and is specified as a percentage from 0% to 100%. Low values ​​make the color darker, and high values ​​make the color lighter; extreme values ​​of 0% and 100% correspond to black and white.

HSLA

The HSLA format is similar in syntax to HSL, but includes an alpha channel to specify the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is semi-transparent.

RGBA, HSL, and HSLA color values ​​have been added to CSS3, so please check your code for version validity when using these formats.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Warning

All lion catching methods listed on the site are theoretical and based on computational methods. The authors do not guarantee your safety when using them and disclaim any responsibility for the results. Remember, a lion is a predator and a dangerous animal!

The result of this example is shown in Fig. 2.

Rice. 2. Colors on the web page

Vlad Merzhevich

In HTML, color is specified in one of two ways: using hexadecimal code and by the name of certain colors. The method based on the hexadecimal number system is predominantly used, as it is the most universal.

Hexadecimal colors

HTML uses hexadecimal numbers to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. In table 6.1 shows the correspondence between decimal and hexadecimal numbers.

Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one (Table 6.2). For example, the number 255 in decimal corresponds to the number FF in hexadecimal.

To avoid confusion in defining the number system, a hexadecimal number is preceded by a hash symbol #, for example #aa69cc. In this case, the case does not matter, so it is permissible to write #F0F0F0 or #f0f0f0.

A typical color used in HTML looks like this.

Here the background color of the web page is set to #FA8E47. The hash symbol # in front of a number means it is hexadecimal. The first two digits (FA) define the red component of the color, the third through fourth digits (8E) define the green component, and the last two digits (47) define the blue component. The end result will be this color.

Each of the three colors - red, green and blue - can take values ​​from 00 to FF, resulting in a total of 256 shades. Thus, the total number of colors can be 256x256x256 = 16,777,216 combinations. A color model based on red, green and blue components is called RGB (red, green, blue). This model is additive (from add - add), in which the addition of all three components forms the color white.

To make it easier to navigate hexadecimal colors, take into account some rules.

• If the values ​​of the color components are the same (for example: #D6D6D6), then the result will be a gray tint. How larger number, the lighter the color, with values ​​ranging from #000000 (black) to #FFFFFF (white).
• A bright red color is formed if the red component is made maximum (FF) and the remaining components are set to zero. A color with a value of #FF0000 is the reddest possible red shade. The same is true for green (#00FF00) and blue (#0000FF).
• Yellow (#FFFF00) is made by mixing red and green. This is clearly visible on the color wheel (Fig. 6.1), which presents the primary colors (red, green, blue) and complementary or additional ones. These include yellow, cyan and violet (also called magenta). In general, any color can be obtained by mixing colors close to it. Thus, cyan (#00FFFF) is obtained by combining blue and green.

Rice. 6.1. Color wheel

Colors based on hexadecimal values ​​do not have to be empirically selected. Suitable for this purpose graphic editor, able to work with different color models, for example, Adobe Photoshop. In Fig. Figure 6.2 shows the window for selecting a color in this program; the resulting hexadecimal value of the current color is outlined with a line. You can copy and paste it into your code.

Rice. 6.2. Window for choosing a color in Photoshop program

Web colors

If you set the monitor's color rendering quality to 8 bits (256 colors), then the same color can be displayed in different browsers in my own way. This is due to the way graphics are displayed, when the browser works with its own palette and cannot show a color that is not in its palette. In this case, the color is replaced by a combination of pixels of other, close to it, colors that imitate the given one. To ensure that the color remains the same across different browsers, a palette of so-called web colors was introduced. Web colors are those colors for which each component - red, green and blue - is set to one of six values ​​- 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). The hexadecimal value of this component is indicated in brackets. The total number of colors from all possible combinations gives 6x6x6 - 216 colors. An example web color is #33FF66.

The main feature of web color is that it appears the same in all browsers. IN at the moment The relevance of web colors is very small due to the improvement in the quality of monitors and the expansion of their capabilities.

Colors by name

To avoid having to remember a set of numbers, you can use the names of commonly used colors instead. In table 6.3 shows the names of popular color names.

It doesn't matter whether you specify a color by its name or by using hexadecimal numbers. These methods are equal in their effect. Example 6.1 shows how to set the background and text colors of a web page.

Example 6.1. Background and text color

Example text

IN in this example The background color is set using the bgcolor attribute of the tag , and the text color through the text attribute. For variety, the text attribute is set to a hexadecimal number, and the bgcolor attribute is set to the reserved keyword teal .

In HTML, color can be specified in three ways:

Setting a color in HTML by its name

Some colors can be specified by their name, using the color name on the English. Most common keywords: black (black), white (white), red (red), green (green), blue (blue), etc.:

Text color – red

The most popular colors of the Consortium standard World Wide Web(English) World Wide Web Consortium, W3C):

Example of using different color names:

Example: specifying a color by its name

• Try it yourself »

Header on red background

Header on orange background

Heading on lime background

White text on blue background

Header on red background

Header on orange background

Heading on lime background

White text on blue background

Specifying Color Using RGB

When displaying different colors on a monitor, the RGB palette is used as a basis. Any color is obtained by mixing three basic ones: R - red, G - green, B - blue. The brightness of each color is specified as a single byte and can therefore take values ​​from 0 to 255. For example, RGB(255,0,0) is displayed as red because red is set to its most high value(255), and the rest are set to 0. You can also set the color as a percentage. Each parameter indicates the brightness level of the corresponding color. For example: the values ​​rgb(127, 255, 127) and rgb(50%, 100%, 50%) will set the same green medium saturation:

Example: Specifying Color Using RGB

• Try it yourself »

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Set color by hexadecimal value

Values R G B can also be specified using hexadecimal (HEX) color values ​​in the form: #RRGGBB where RR (red), GG (green) and BB (blue) are hexadecimal values ​​from 00 to FF (same as decimal 0-255) . The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The hexadecimal system uses the following signs: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Here the numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are represented by combining two characters into one value. For example, the highest number 255 in decimal corresponds to the highest FF value in hexadecimal. Unlike the decimal system, a hexadecimal number is preceded by a hash symbol. # , for example, #FF0000 is shown as red because red is set to its highest value (FF) and the rest of the colors are set to their minimum value (00). Signs after the hash symbol # You can type in both uppercase and lowercase. The hexadecimal system allows you to use the abbreviated form #rgb, where each character is equivalent to double. Thus, the entry #f7O should be regarded as #ff7700.

Example: HEX Color

• Try it yourself »

red: #FF0000

green: #00FF00

blue: #0000FF

red: #FF0000

green: #00FF00

blue: #0000FF

red+green=yellow: #FFFF00

red+blue=purple: #FF00FF

green+blue=cyan: #00FFFF

List of common colors (name, HEX and RGB):

Color codes (background) by saturation and hue.

Color in CSS language can be specified 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 - 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 various quantities.

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 the right 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

Appeared in CSS3 new tool for working with color - 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 first three RGB channels), A 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 of zero makes any color invisible - completely transparent, the value equal to one broadcasts color in 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 specify color codes as hexadecimal digits the usual decimal digits from 0 to 9 are used and to represent the digits from 10 to 15 use latin letters from A to F 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. Yes, for the record decimal number 255 in hexadecimal notation is FF.

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 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 fades 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 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 HSL format A, like in RGBA, an alpha channel has been 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.

02/26/15 8.9K

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:

The RGB model remains the most popular today and is used to reproduce colors on TV screens and computer monitors. Since manufacturers endow their products different characteristics, was created in 1996 unified system RGB-based color synthesis called sRGB, which was developed jointly by Microsoft and HP.

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:

Using RGB color codes from this palette, a web developer can not worry about the display of colors on the pages of his site when viewed using different browsers, on various platforms and monitors. Although at the moment the table of safe colors is losing its relevance ( technical progress still doesn't stand still), when using it you can, as they say, sleep peacefully.

Gold color in RGB model

The word “golden” was first used at the beginning of the 14th century to describe the color 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 takes quite significant place in history, even if he is not the most expressive. Many cultural monuments, especially ancient sculptures, were made of soapstone and soapstone, which have a beige tint. In RGB model beige color has the following numerical representations.