Green color in css. 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 onto 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 have values ranging 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, 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 before F, therefore, the series 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, medium- green, last thing- blue colors. All numbers can take values in the range 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 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.

view	code	view	code	view	code	view	code	view	code	view	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 were assigned 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
	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		Oliverab		Orangered		Orchid
	Palegoldenrod		Palegreen		Paletteurquoise		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 literals with color names is quite extensive and more than sufficient. If you need to set a background color that is so unusual that it doesn’t even have a name, you can use a hexadecimal value.

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.

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	code	view	code	view	code	view	code	view	code	view	code

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.

F.A.

FA8E47

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; 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. The higher the 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 circle

Colors based on hexadecimal values do not have to be empirically selected. For this purpose, a graphic editor that can work with different color models, for example, Adobe Photoshop, is suitable. 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 colors in Photoshop

Web colors

If you set the monitor's color rendering quality to 8 bits (256 colors), then the same color can be displayed differently in different browsers. 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 parentheses. 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. 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.

Table 6.3. Names of some colors

Color name	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	Dark blue	#000080
olive	Olive	#808000
purple	Dark purple	#800080
red	Red	#FF0000
silver	Light gray	#C0C0C0
teal	Blue-green	#008080
white	White	#FFFFFF
yellow	Yellow	#FFFF00

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

Colors

Example 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 variety, the text attribute is set to a hexadecimal number, and the bgcolor attribute is set to the reserved keyword teal .

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 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 determining the number system, a hash symbol # is placed in front of 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

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 their name. In table 1 shows the names, hexadecimal code, RGB, HSL values and description.

Table 1. Names of colors

Name	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%)	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

Using 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 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

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 specifies the transparency of the element. 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

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 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% is the maximum value for 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

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 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 are added to CSS3, so please check your code for version validity when using these formats.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Colors

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!

Arrrgh!

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

Rice. 2. Colors on the web page

HEX/HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are represented as three groups of hexadecimal digits, where each group is responsible for its own color: #112233, where 11 is red, 22 is green, 33 is blue. All values must be between 00 and FF.

Many applications allow a shortened form of hexadecimal color notation. If each of the three groups contains the same characters, for example #112233, then they can be written as #123.

h1 ( color: #ff0000; ) /* red */
h2 ( color: #00ff00; ) /* green */
h3 ( color: #0000ff; ) /* blue */
h4 ( color: #00f; ) /* same blue, shorthand */

RGB

The RGB (Red, Green, Blue) color space consists of all possible colors that can be created by mixing red, green, and blue. This model is popular in photography, television, and computer graphics.

RGB values are specified as an integer from 0 to 255. For example, rgb(0,0,255) is displayed as blue because the blue parameter is set to its highest value (255) and the others are set to 0.

Some applications (particularly web browsers) support percentage recording of RGB values (from 0% to 100%).

h1 ( color: rgb(255, 0, 0); ) /* red */
h2 ( color: rgb(0, 255, 0); ) /* green */
h3 ( color: rgb(0, 0, 255); ) /* blue */
h4 ( color: rgb(0%, 0%, 100%); ) /* same blue, percentage entry */

RGB color values are supported in all major browsers.

RGBA

Recently, modern browsers have learned to work with the RGBA color model - an extension of RGB with support for an alpha channel, which determines the opacity of an object.

The RGBA color value is specified as: rgba(red, green, blue, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
h2 ( color: rgba(0, 0, 255, 1); ) /* the same blue in RGBA, because opacity: 100% */
h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
h5 ( color: rgba(0, 0, 255, 0); ) /* completely transparent */

RGBA is supported in IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.

HSL

The HSL color model is a representation of the RGB model in a cylindrical coordinate system. HSL represents colors in a more intuitive and human-readable way than typical RGB. The model is often used in graphics applications, color palettes, and image analysis.

HSL stands for Hue (color/hue), Saturation (saturation), Lightness/Luminance (lightness/lightness/luminosity, not to be confused with brightness).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Lightness is a percentage of lightness (from 0% to 100%).

h1 ( color: hsl(120, 100%, 50%); ) /* green */
h2 ( color: hsl(120, 100%, 75%); ) /* light green */
h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
h4 ( color: hsl(120, 60%, 70%); ) /* pastel green */

HSL is supported in IE9+, Firefox, Chrome, Safari, and Opera 10+.

HSLA

Similar to RGB/RGBA, HSL has an HSLA mode with alpha channel support to indicate the opacity of an object.

The HSLA color value is specified as: hsla(hue, saturation, lightness, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
h2 ( color: hsla(120, 100%, 50%, 1); ) /* the same green in HSLA, because opacity: 100% */
h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
h5 ( color: hsla(120, 100%, 50%, 0); ) /* completely transparent */

CMYK

The CMYK color model is often associated with color printing and printing. CMYK (unlike RGB) is a subtractive model, meaning that higher values are associated with darker colors.

Colors are determined by the ratio of cyan (Cyan), magenta (Magenta), yellow (Yellow), with the addition of black (Key/blacK).

Each of the numbers that define a color in CMYK represents the percentage of ink of a given color that makes up the color combination, or more precisely, the size of the screen dot that is output on the phototypesetting machine on film of that color (or directly on the printing plate in the case of CTP).

For example, to obtain the PANTONE 7526 color, you would mix 9 parts cyan, 83 parts magenta, 100 parts yellow, and 46 parts black. This can be denoted as follows: (9,83,100,46). Sometimes the following designations are used: C9M83Y100K46, or (9%, 83%, 100%, 46%), or (0.09/0.83/1.0/0.46).

HSB/HSV

HSB (also known as HSV) is similar to HSL, but they are two different color models. They are both based on cylindrical geometry, but HSB/HSV is based on the "hexcone" model, while HSL is based on the "bi-hexcone" model. Artists often prefer to use this model, it is generally accepted that the HSB/HSV device is closer to the natural perception of colors. In particular, the HSB color model is used in Adobe Photoshop.

HSB/HSV stands for Hue (color/hue), Saturation (saturation), Brightness/Value (brightness/value).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Brightness is a percentage of brightness (from 0% to 100%).

XYZ

The XYZ color model (CIE 1931 XYZ) is a purely mathematical space. Unlike RGB, CMYK, and other models, in XYZ the principal components are “imaginary,” meaning you cannot associate X, Y, and Z with any set of colors to mix. XYZ is the master model for almost all other color models used in technical fields.

LAB

The LAB color model (CIELAB, “CIE 1976 L*a*b*”) is calculated from the CIE XYZ space. Lab's design goal was to create a color space in which color changes would be more linear in terms of human perception (compared to XYZ), that is, so that the same change in color coordinate values in different regions of the color space would produce the same sensation of color change.

Look carefully at the drawing. The background of the drop-down window is made translucent. This is a fairly common design technique. Let's think about how this can be implemented.

Task

Make the color cross-browser translucent.

Solution

The first thought in this situation is to use a png24 image with a preset translucency for the background. But this picture is completely unnecessary. You can do just fine without it (and therefore without an extra request to the server). Let's still try to find the optimal solution.

The second thought is to use . But in this case it is not very convenient. After all, then not only the background, but also the inscriptions will become translucent. Yes, actually, the entire window at once.

Of course, you can try to add an additional container and apply opacity only to it, but this HTML element will be intended only for decoration and will obviously be redundant. Is it possible to do without it?

Of course you can! If you use RGBA.

RGBA color description format

CSS3 allows you to specify color using RGB and RGBA functions. In this case, we must indicate the proportion of each color component for which one byte is allocated (from 0 to 255, in case anyone doesn’t know).

The syntax for this case is very simple:

Background: rgb(0, 255, 0); /* pure green */

For RGBA, a fourth parameter is added - alpha transparency (from 0 to 1).

Background: rgba(255, 0, 0, 0.5); /* pure red with 50% transparency */

Here it is, the solution to our problem. Just set the background color using rgba and everything will look the way we want. Without unnecessary pictures and elements!

Where can I get these numbers?

You can look at the components of color using Photoshop's eyedropper tool.

About cross-browser compatibility

Since the RGB function is much older than RGBA and has been present since the days of the CSS2 standard, to protect against the most ancient browsers, you can use the following duplicate construction:

SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )

With this approach, the great-grandfathers of modern browsers will not have translucency, but the color itself will remain correct.

You will have to take care of IE separately. Donkeys don't understand RGBA right up to version 8 inclusive.

As always: land for the peasants, factories for the workers, and donkeys a crutch! As .

Of course, in combat conditions we put this rule into a separate CSS, which we connect.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

The trick is to specify the starting and ending colors as the same (ff0000 - red) and take advantage of the fact that you can set the alpha channel for the gradient in this filter (in the example, the value is 80).

For reference: the filter uses the hexadecimal system and the code for a completely opaque color is FF (in decimal this is 255). Accordingly, hexadecimal 80 is decimal 128, i.e. 50% transparency.

Tested in:

IE 6-9
Firefox 3+
Opera 10+
Safari 4
Chrome

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