Soft pink color code. White text on blue background

using the style attribute using the background property, and assigning the 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 to edit this example and specify your values, for example rgb (100, 100, 100).

Setting color using RGBA

In CSS3 appeared new instrument for working with color - RGBA format. It can be called an evolution of the RGB model, but with the addition of one new channel - 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 equal to 0 corresponds to full transparency, 1 - full opacity (the color will be the same as it is specified in first three RGB channels), and intermediate values, like 0.4 or 0.6 - translucency to varying degrees.

Sample code.

This is how it works:

This code in its own way visual presentation is similar to the following, which uses the RGB model to set the color value:

Here's the result:

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

Hexadecimal value (HEX code)

In everyday life, we use the decimal system of counting. Its origins are very simple - we have ten fingers on our hands, and it used to be convenient to count on fingers in life. If in decimal system ten digits: from 0 to 9, and the number 10 is already the next digit, then in the hexadecimal notation system there are 16 digits, and the next digit will be the number 16.

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

To write hexadecimal numbers greater than F (15 in the decimal system), as in the decimal system, the union of two digits is also used, but already hexadecimal, which is obvious. So, for the record decimal number 255 in hexadecimal system FF notation is used.

The hexadecimal system is more understandable for the computer, it processes the values ​​specified by the hexadecimal value faster.

To indicate a hexadecimal color, before numerical value you need to put a "#" sign, example: # FFC0CB. The # FFC0CB value itself consists of three hexadecimal digits FF, C0 and CB. The meaning of this notation is the same as setting the color to RGB format(rgb (r, g, b)) - each hexadecimal digit in the HEX code indicates the color saturation in its RGB channel.

This code will display the following items:

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

Fig. 1. Colors in RGB.

We see that the colors are identical.

An abbreviated notation of the color HEX 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 of the notation is acceptable:

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

Setting color using HSL

In CSS3 appeared new format to indicate the color.

HSL is an abbreviation of the English words Hue, Saturate, and Lightness.

Hue in HSL is a color value on a special color wheel (Figure 2) and it 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 range from 0 to 359.

Figure 2. HSL color wheel.

The second value is saturation (Saturate) is set in percentage. At 100% saturation, the color is maximum "juicy", as the saturation indicator moves to 0%, the color becomes more and more dull and rolls into gray.

The third value, Lightness, is also set as a percentage. The higher the percentage, the brighter the color will be. Extreme values ​​of 0% and 100% will mean black (no light) and white (blown out) colors, respectively, no matter which color from the color wheel was selected in the first channel. The optimal color brightness value can be considered equal to 50%.

Color setting with HSLA

HSLA is related to HSL, just like RGB to RGBA. V HSLA format As in RGBA, an alpha channel has been added, which is responsible for the transparency of the color.

HSL color is easier to read. We can say that it is intuitive. For example, an hsl (120.60%, 50%) code can represent the final color if there is an HSL color wheel picture in memory. The same cannot be said about RGB and HEX formats, the color code specified in these formats becomes understandable 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 do I make the 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 the alpha channel, will be displayed in RGB format.

02/26/15 8.9K

As you know, color can affect a person's condition: both mental and physical. Every day, looking at sites on the Internet, the eyes evaluate millions of colors and shades. A web designer who is familiar with the psychology of color can manipulate a visitor's mood in order to achieve any goal.

This is due to the fact that some shades are soothing, while others, on the contrary, are exciting. Further it will be 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 color ( 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, in 1996 was created one system color synthesis based on RGB called sRGB, on which we worked together Microsoft and HP.

Numerical color representation

As mentioned earlier, RGB colors are formed by mixing the main colors. To describe the intensity of each of them, a scheme was adopted in which the color is represented by the range 0-255 (8 bits), which in the hexadecimal system 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 on values ​​less than 255, then different shades of red, green and blue are obtained. Below is a table of their gradation, as well as the hexadecimal values ​​of each of the shades:

RGB color tables

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

You can get acquainted with it here. This table makes life a lot easier for web designers, since in a few seconds you can find the desired shade and find out its numerical representation.

Safe RGB color palette

However, at some point there was a problem of displaying colors in different browsers, and to solve it, a so-called "safe" RGB palette colors that were deduced by mathematical calculations.

When the browser cannot display a color correctly, it tries to get close to the desired one by mixing adjacent colors, and most likely the result will be completely unacceptable:

Using codes RGB colors from this palette, a web developer can not be afraid of displaying colors on the pages of his site when viewed using different browsers, on the different platforms and monitors. Although on this moment table safe colors loses its relevance ( technical progress still does not stand still), when using it, you can, as they say, sleep well.

Gold color in RGB model

For the first time the word "gold" was used at the beginning of the XIV century to describe the color of a chemical element called Aurum - gold. In RGB, gold is represented by the following numerical values:

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

Beige color in RGB model

The beige color takes quite significant place in history, even if it is not the most expressive. Many cultural monuments, especially antique sculptures, were made of soapstone and soapstone, which have a beige tint. In RGB, beige has the following numerical representations.

Hexadecimal numbers are used to set colors. The hexadecimal system, in contrast to 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. Digits 10 to 15 replaced with Latin letters... Numbers greater than 15 in hexadecimal are formed by combining two numbers into one. For example, 255 decimal equals FF hexadecimal. To avoid confusion in the definition of the number system, before hexadecimal number use the hash symbol #, for example # 666999. Each of the three colors — red, green, and blue — can range from 00 to FF. Thus, the color designation is divided into three components #rrggbb, where the first two characters mark the red component of the color, the two middle ones - green, and the last two - blue. It is allowed to use an abbreviated form like #rgb, where each character should be doubled. So, the # fe0 entry should be treated as # ffee00.

By name

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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

Tab. 1. Names of colors

Name	Color	The code	RGB	Hsl	Description
white		#ffffff or #fff	rgb (255,255,255)	hsl (0.0%, 100%)	White
silver		# c0c0c0	rgb (192,192,192)	hsl (0.0%, 75%)	Grey
gray		#808080	rgb (128,128,128)	hsl (0.0%, 50%)	Dark grey
black		# 000000 or # 000	rgb (0,0,0)	hsl (0.0%, 0%)	Black
maroon		#800000	rgb (128,0,0)	hsl (0.100%, 25%)	Dark red
red		# ff0000 or # f00	rgb (255,0,0)	hsl (0.100%, 50%)	Red
orange		# ffa500	rgb (255,165,0)	hsl (38.8,100%, 50%)	Orange
yellow		# ffff00 or # ff0	rgb (255,255,0)	hsl (60,100%, 50%)	Yellow
olive		#808000	rgb (128,128,0)	hsl (60,100%, 25%)	Olive
lime		# 00ff00 or # 0f0	rgb (0.255.0)	hsl (120,100%, 50%)	Light green
green		#008000	rgb (0.128.0)	hsl (120,100%, 25%)	Green
aqua		# 00ffff or # 0ff	rgb (0,255,255)	hsl (180,100%, 50%)	Blue
blue		# 0000ff or # 00f	rgb (0,0,255)	hsl (240,100%, 50%)	Blue
navy		#000080	rgb (0,0,128)	hsl (240,100%, 25%)	Navy blue
teal		#008080	rgb (0.128.128)	hsl (180,100%, 25%)	Blue green
fuchsia		# ff00ff or # f0f	rgb (255,0,255)	hsl (300,100%, 50%)	Pink
purple		#800080	rgb (128,0,128)	hsl (300,100%, 25%)	Violet

With RGB

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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

RGBA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

The RGBA format is similar in syntax to RGB, but includes an alpha channel that controls the transparency of the element. A value of 0 corresponds to full transparency, 1 to opacity, and an intermediate value like 0.5 to semi-transparency.

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

Hsl

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

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

Rice. 1. Color wheel

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

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

HSLA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

The HSLA format is similar in syntax to HSL, but includes an alpha channel that sets the transparency of the element. A value of 0 corresponds to full transparency, 1 to opacity, and an intermediate value like 0.5 to semi-transparency.

Color values ​​in RGBA formats, HSL and HSLA have been added in CSS3, so be sure to check for version validity when using these formats.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Warning

All the methods of catching a lion 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 result. Remember, the lion is a predator and a dangerous animal!

Result this example shown in fig. 2.

Rice. 2. Colors on the web page