home Free programs Beige color html. HTML Tutorial. RGB colors. Safe Palette Colors

Beige color html. HTML Tutorial. RGB colors. Safe Palette Colors

02/26/15 8.9K

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

This is due to the fact that some shades soothe, 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 the three main components, which are:

Red color ( Red);
green color ( Green);
Blue colour ( Blue).

This is where the abbreviated name RGB comes from. These colors are 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 with different characteristics, in 1996 the one system An RGB - based color synthesis called sRGB , which was developed jointly by Microsoft and HP .

Numeric color representation

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 the color is represented by the range 0-255 (8 bits), which corresponds to 00-FF in hexadecimal.

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 various shades of red, green and blue are obtained. The following is a table of their gradation, as well as the hexadecimal values of each of the shades:

RGB Color Charts

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, in which all existing shades are presented, as well as their names and numerical representations ( in decimal and hexadecimal form).

You can get to know her here. This table makes life a lot easier for web designers, because 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, 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 tries to get close to what it needs by mixing neighboring colors, and most likely the result will be completely unacceptable:

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

Golden 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 the RGB model, the gold color is represented by the following numerical values:

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

Beige color in RGB model

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

>>Color Management

Hexadecimal RGB color values

Methods for describing and processing colors differ from each other in what final representation they are intended for. Let's compare, for example, representations of colors for polygraphy and for computer monitors. In the first case, the basis is white the color of the paper on which the 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 colors they give white paper. If we add black to them, we get CMYK- a way to convey color when the desired color is obtained by subtracting the missing colors from white.

In the second case, the basis is 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 color of the screen, and any of the required colors is given by the ratio of each of the three colors. In this case we will get RGB- Color transfer method. Primary colors can have meanings from 0 before 255 , or from 0% before 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 in its series of digits, but sixteen - hence the name. Accordingly, non-repeating variants of combinations of two digits can only be - 256 , to continue the series of digits after 9 letters from A before F, so the row will look like this -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

To convert numbers from one number system to another and vice versa, use the calculator below. The maximum value here can be FF - 255 .

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

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

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

view	the code	view	the code	view	the code	view	the code	view	the code	view	the code
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

Specifying a Color with String Literals

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

view	name	view	name	view	name	view	name
	White		Red		Orange		Yellow
	Green		Blue		Purple		Black
	Alice blue		antique white		Aqua		aquamarine
	Azure		Beige		Bisque		blanchedalmond
	Blueviolet		Brown		Burlywood		Cadetblue
	chartreuse		Chocolate		Coral		Cornflowerblue
	Cornsilk		Crimson		cyan		dark blue
	Darkcyan		darkgoldenrod		darkgray		dark green
	Darkkhaki		Darkmagenta		Darkolivegreen		darkorange
	Darkorchid		dark red		darksalmon		Darkseagreen
	darkslate blue		darkslate gray		darkturquoise		Darkviolet
	Deeppink		deep sky blue		Dimgray		dodger blue
	Firebrick		Floral white		forest green		Fuschia
	Gainsboro		ghost white		Gold		Goldenrod
	Gray		Greenyellow		Honeydew		hotpink
	Indian Red		Indigo		Ivory		Khaki
	Lavender		Lavenderblush		Lemonchiffon		light blue
	light coral		lightcyan		lightcoldenrodyellow		light green
	lightgray		Lightpink		light salmon		Lightsea green
	Lightskyblue		Lightslate gray		light steel blue		lightyellow
	lime		Limegreen		linen		Magenta
	maroon		mediumaquamarine		medium blue		Medium orchid
	Medium purple		Mediumseagreen		Mediumslateblue		Mediumspringgreen
	medium turquoise		mediumvioletred		midnight blue		mintcream
	mistyrose		Navajowhite		Navy		oldlace
	Olive		Olivedrab		orange red		Orchid
	palegoldenrod		Palegreen		paleturquoise		palevioletred
	papayawhip		Peachpuff		Peru		Pink
	Plum		Powder blue		Rosybrown		royal blue
	saddlebrown		seagreen		Seashell		Sienna
	Silver		sky blue		Slateblue		Slategray
	Snow		Springgreen		steel blue		Tan
	Teal		Thistle		tomato		Turquoise
	violet		Wheat		Whitesmoke		yellow green

The list of lowercase literals with color names is quite extensive and more than sufficient. If you want to set a background color so unusual that it doesn't even have a name, you can use a hexadecimal value.

Using a Safe Color Picker

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 under system settings and monitor capabilities, by self-mixing colors and substituting them. As a result, sometimes the user sees not quite what the webmaster wanted to show him. The way out of this situation was found in the use of a palette, each color of which is guaranteed to be rendered in the same way by all browsers on different platforms. This so-called guaranteed palette, also known as safe palette. This palette includes colors whose color components take on the following values: 00 ,33 ,66 ,99 , CC,FF, in all possible 216 their combinations.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699 0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000FF 0000CC 0033CC 000033 3333FF 3300FF 3300CC 3333CC 000099 000066 9999CC 6666FF 6666CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF 6600CC 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF 660099 663366 CC66FF CC33FF CC00FF 9900CC 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

view	the code	view	the code	view	the code	view	the code	view	the code	view	the code

Color can be set in CSS different ways:

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

Set color by name

Browsers support specifying certain colors for elements by name. In this table, some of the keywords (English color names) used to set color properties, RGB code, hexadecimal code (HEX) and HSL code.

Tab. 1. Names of colors, their RGB, HEX and HSL code.

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

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

RGB to CSS

Medium Turquoise

brown

crimson

blueviolet

rolelivedrab

Here is how this code works:

Setting color with RGB

RGB is an additive color model. On the English language addition- addition. RGB is an abbreviation of 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.

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

Get to the point.

To set properties in this format, the notation rgb(r, g, b) is used, 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.

Code example.

To make everything clear, I will give an example code:

RGB to CSS

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

This is how this example should work:

Fig.1. Colors in RGB.

Explanations for example.

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

displayed in the correct size: 240px by 40px . We assign the value - 40px to the line-height property (line height), that is, equal to the height of the block, this will allow the text to be displayed in the block

in the center of the vertical. horizontally center the text using the rule ( text-align : center ;).

Next, in the code 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 to include your own values, like rgb(100, 100, 100) .

Setting color with RGBA

In CSS3 appeared 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 - 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 set in first three RGB channels), and intermediate values like 0.4 or 0.6 - translucency to varying degrees.

Code example.

RGBA to CSS3

Here is how it will work:

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

RGBA to CSS3

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 system of counting. Its origins are very simple - we have ten fingers on our hands, and it was convenient to count on fingers in life. If in decimal system ten digits: from 0 to 9, and the number 10 is the next digit, then there are 16 digits in the hexadecimal number system, and the next digit will be 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 summarize this in a table:

To write hexadecimal numbers greater than F (15 decimal), as in the decimal system, they also use the union 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, it processes the values given by the hexadecimal value faster.

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

HEX code in CSS

#FF0000

#00FF00

#0000FF

This code will display the following elements:

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

Fig.1. Colors in RGB.

We see that the colors are identical.

An abbreviated notation for the HEX color code is allowed: a 6-digit number can be written as a 3-digit number. This is only valid if two digits in the color value of the same 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 with HSL

CSS3 has a new format for specifying colors.

The HSL format is an abbreviation of the English words: Hue (hue), Saturate (saturation) and Lightness (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 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 more and more dull and rolls into gray.

The third value - lightness (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 respectively black (lack of light) and white (exposed) colors, and it does not matter which color from the color wheel was selected in the first channel. The optimal value can be considered the value of color brightness equal to 50%.

Color setting with HSLA

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

A 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. This cannot be said about the RGB and HEX formats, the color code specified in these formats becomes clear only after it is rendered on the monitor.

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

Someblock ( 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 not using an alpha channel, will be displayed in RGB format.

Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 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 the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in the definition of the number system, the hexadecimal number is preceded by the hash symbol #, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the designation of the color is divided into three components #rrggbb, where the first two characters mark the red component of the color, the two middle ones mark green, and the last two mark 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

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. In table. 1 shows the names, hex code, values in RGB, HSL format and description.

Tab. 1. Color names

Name	The code	RGB	HSL	Description
white	#fffff 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%)	Dark 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 define a 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 acceptable to set the color as a percentage, while 100% will correspond to the number 255. First, the rgb keyword is specified, and then the color components are specified in brackets, 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 sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

RGBA is added to CSS3, so validation of CSS code should be carried out according to 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 passes validation, but one added to the background property does not. 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 color value on the color wheel (Fig. 1) and is specified in degrees. 0° is red, 120° is green, and 240° is blue. Hue value can vary 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% indicates no color and a shade of gray, 100% is the maximum saturation value.

Lightness sets how bright the color is and is specified as a percentage from 0% to 100%. Small values make the color darker, while high values make it lighter, 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 element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

Color values in RGBA formats, HSL, and HSLA are added to CSS3, so when using these formats, check the code for validity against the version.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Colors

Warning

All 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!

Arrrgh!

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

Rice. 2. Colors on the web page

Vlad Merzhevich

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

Hexadecimal colors

HTML uses hexadecimal numbers to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 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 the definition of the number system, the hexadecimal number is preceded by the pound sign #, 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 is as follows.

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

FA8E47

Each of the three colors - red, green and blue - can take on 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. The color model based on the red, green and blue components is called RGB (red, green, blue; red, green, blue). This model is additive (from add - add), in which the addition of all three components forms white.

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

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

Rice. 6.1. Color circle

Colors based on hexadecimal values do not have to be empirically selected. Suitable for this purpose graphics editor who can work with different color models, for example, Adobe Photoshop. On fig. 6.2 shows a window for choosing a color in this program, the line circles the resulting hexadecimal value of the current color. You can copy and paste it into your code.

Rice. 6.2. Color picker in Photoshop

Web Colors

If you set the monitor's color quality to 8-bit (256 colors), the same color can be displayed in different browsers in my own way. This has to do with the way graphics are rendered when the browser is working with its own palette and cannot show a color that it doesn't have in the palette. In this case, the color is replaced by a combination of pixels of other, close to it, colors that imitate the given one. In order for the color to remain the same in different browsers, a palette of so-called web colors was introduced. Web colors are those colors, for each component of which - red, green and blue - one of six values \u200b\u200bis set - 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 is displayed the same in all browsers. At the moment, the relevance of web colors is very small due to the increase in the quality of monitors and the expansion of their capabilities.

Colors by name

In order not to remember a collection of numbers, you can use the names of commonly used colors instead. In table. 6.3 shows the names of popular color names.

Tab. 6.3. Names of some colors

Color name	Description	Hex value
black	Black	#000000
blue	Blue	#0000FF
fuchsia	Light purple	#FF00FF
gray	Dark grey	#808080
green	Green	#008000
lime	light green	#00FF00
maroon	Dark red	#800000
navy	Dark blue	#000080
olive	Olive	#808000
purple	Dark violet	#800080
red	Red	#FF0000
silver	light gray	#C0C0C0
teal	blue green	#008080
white	White	#FFFFFF
yellow	Yellow	#FFFF00

It doesn't matter how you specify the color - by its name or by using hexadecimal numbers. In their effect, these methods are equal. Example 6-1 shows how to set the background and text colors of a web page.

Example 6.1. Background and text color