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

Vlad Merzhevich

In HTML, a 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 number system is mainly used, as the most universal one.

Hexadecimal colors

Hexadecimal numbers are used to specify colors in HTML. 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. Numbers from 10 to 15 are replaced by Latin letters. 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, 255 decimal is FF hexadecimal.

To avoid confusion in the definition of the number system, the hash character # is placed in front of the hexadecimal number, for example # aa69cc. In this case, the register 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) are green, and the last two digits (47) are blue. As a result, you get this color.

FA

+

8E

+

47

=

FA8E47

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

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

• If the values ​​of the color components are the same (for example: # D6D6D6), then you get a gray tint. The higher the number, the lighter the color, the values ​​vary from # 000000 (black) to #FFFFFF (white).
• A bright red color is formed if the red component is set to maximum (FF), and the rest of the components are set to zero. The color # FF0000 is the reddest possible red tint. The same is the case with green (# 00FF00) and blue (# 0000FF).
• Yellow (#FFFF00) is obtained by mixing red with green. This is clearly visible on the color wheel (Fig. 6.1), where the primary colors (red, green, blue) and complementary or complementary colors are presented. These include yellow, cyan, and purple (also called magenta). In general, any color can be obtained by mixing nearby colors. So, cyan (# 00FFFF) is obtained by combining blue and green.

Rice. 6.1. Color circle

Hexadecimal colors do not need to be chosen empirically. For this purpose, a graphic editor that can work with different color models is suitable, for example, Adobe Photoshop. In fig. 6.2 shows a window for choosing 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. Color selection window in Photoshop

Web colors

If you set the color quality of the monitor to 8 bit (256 colors), then the same color can be displayed differently in different browsers. This is due to the way graphics are displayed, where the browser is working with its own palette and cannot show a color that it does not 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 specified one. To keep the color unchanged in different browsers, we introduced a palette of so-called web colors. Web colors are those colors, for each component of which - red, green and blue - one of six values ​​is set - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). The parentheses indicate the hexadecimal value of this component. The total number of colors from all possible combinations gives 6x6x6 - 216 colors. An example of a web color is # 33FF66.

The main feature of web color is that it appears the same across 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 memorize a set of numbers, you can use the names of commonly used colors instead. Table 6.3 lists the names of popular color names.

Tab. 6.3. Some color names

Color name	Color	Description	Hexadecimal 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		Navy 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 in which way you specify the color - by its name or using hexadecimal numbers. These methods are equal in their action. Example 6.1 shows how to set the background and text color of a web page.

Example 6.1. Background and text color

Sample text

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

>> Color management

Hexadecimal RGB color values

The methods of describing and processing color differ from each other in what final presentation they are intended for. Let us compare, for example, the representations of colors for printing and for computer monitors. In the first case, the basis is taken 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 the paper in different proportions, these three primary colors give different color shades, except for pure black, or, in the complete absence of paint, give the white color of the paper. If we add black to them, we get CMYK- a method of color rendering, 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 set by the ratio of each of the three colors. In this case, we get RGB- a method of color transfer. Primary colors can range from 0 before 255 , or from 0% before 100% , or can be represented as a hexadecimal value. In the picture below, you can see the results of mixing the primary colors.

The hexadecimal number system, in contrast to the decimal number in its row of digits, has not ten digits, but sixteen - hence the name. Accordingly, non-repeating variants of combinations of two digits can only be - 256 , to continue a series of digits after 9 letters from A before F hence 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 specified by three hexadecimal numbers, each of which consists of two digits. The first number determines the intensity red colors, average green, last thing- blue colors. All numbers can take values ​​in the range from 00 before FF(from 0 to 255). For example: green 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 set any hexadecimal values ​​for each of the three colors and see the result of their mixing by clicking in the output field.

RED		GREEN		BLUE
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f
... click here

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

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 color using string literals

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

view	name	view	name	view	name	view	name
	White		Red		Orange		Yellow
	Green		Blue		Purple		Black
	Aliceblue		Antiquewhite		Aqua		Aquamarine
	Azure		Beige		Bisque		Blanchedalmond
	Blueviolet		Brown		Burlywood		Cadetblue
	Chartreuse		Chocolate		Coral		Cornflowerblue
	Cornsilk		Crimson		Cyan		Darkblue
	Darkcyan		Darkgoldenrod		Darkgray		Darkgreen
	Darkkhaki		Darkmagenta		Darkolivegreen		Darkorange
	Darkorchid		Darkred		Darksalmon		Darkseagreen
	Darkslateblue		Darkslategray		Darkturquoise		Darkviolet
	Deeppink		Deepskyblue		Dimgray		Dodgerblue
	Firebrick		Floralwhite		Forestgreen		Fuschia
	Gainsboro		Ghostwhite		Gold		Goldenrod
	Gray		Greenyellow		Honeydew		Hotpink
	Indianred		Indigo		Ivory		Khaki
	Lavender		Lavenderblush		Lemonchiffon		Lightblue
	Lightcoral		Lightcyan		Lightcoldenrodyellow		Lightgreen
	Lightgray		Lightpink		Lightsalmon		Lightseagreen
	Lightskyblue		Lightslategray		Lightsteelblue		Lightyellow
	Lime		Limegreen		Linen		Magenta
	Maroon		Mediumaquamarine		Mediumblue		Mediumorchid
	Mediumpurple		Mediumseagreen		Mediumslateblue		Mediumspringgreen
	Mediumturquoise		Mediumvioletred		Midnightblue		Mintcream
	Mistyrose		Navajowhite		Navy		Oldlace
	Olive		Olivedrab		Orangered		Orchid
	Palegoldenrod		Palegreen		Paleturquoise		Palevioletred
	Papayawhip		Peachpuff		Peru		Pink
	Plum		Powderblue		Rosybrown		Royalblue
	Saddlebrown		Seagreen		Seashell		Sienna
	Silver		Skyblue		Slateblue		Slategray
	Snow		Springgreen		Steelblue		Tan
	Teal		Thistle		Tomato		Turquoise
	Violet		Wheat		Whitesmoke		Yellowgreen

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

Using a safe color picker

Unfortunately, on different platforms, with different system settings, correct color rendering 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 sees not exactly what the web-master 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 the same by all browsers on different platforms. This is the so-called guaranteed palette, also called it safe palette. This palette includes colors, the color components of which take 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 in CSS language can be set in different ways:

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

Color assignment by name

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

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

Name	Color	RGB	HEX	Hsl	Description
white		rgb (255, 255, 255)	#ffffff 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%)	Navy 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 a sample of the use of color names, the color naming is taken from the extended table.

This is how this code works:

Setting color using RGB

RGB is an additive color model. In English 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 different amounts.

By mixing red, green and blue, 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, use the rgb (r, g, b) notation, where r, g, b are three channels for each color (red, green, blue). Values ​​for each channel range from 0 to 255.

Sample code.

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

This is how this example should work:

Fig. 1. Colors in RGB.

Explanations for example.

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

Top related articles