Light red rgb color. HTML tutorial. RGB colors. Safe palette colors

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

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

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

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

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

Color codes in CSS are used to specify colors. Typically, color codes or color values ​​are used to set the color for either the foreground color of an element (e.g. text color, link color) or the background color of an element (background color, block color). They can also be used to change the color of a button, border, marker, hover, and other decorative effects.

You can specify your color values ​​in various formats. The following table lists all possible formats:

The listed formats are described in more detail below.

CSS Colors - Hex Codes

Hexadecimal color code is a six-digit representation of color. The first two digits (RR) represent the red value, the next two represent the green value (GG), and the last two represent the blue value (BB).

CSS Colors - Short Hex Codes

Short hex color code is a shorter form of six-character notation. In this format, each digit is repeated to produce an equivalent six-digit color value. For example: #0F0 becomes #00FF00.

The hexadecimal value can be taken from any graphics software such as Adobe Photoshop, Core Draw, etc.

Each hex color code in CSS will be preceded by a hash sign "#". Below are examples of using hexadecimal notations.

CSS Colors - RGB Values

RGB value is a color code that is set using the rgb() property. This property takes three values: one each for red, green, and blue. The value can be an integer, from 0 to 255, or a percentage.

Note: Not all browsers support the rgb() color property, so it is not recommended to use it.

Below is an example showing multiple colors using RGB values.

Color code generator

You can create millions of color codes using our service.

Browser Safe Colors

Below is a table of 216 colors that are the most secure and computer-independent. These colors in CSS range from 000000 to FFFFFF hexadecimal code. They are safe to use because they ensure that all computers display color correctly when working with the 256 color palette.

Color in CSS can be set 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 is an 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 different quantities.

By 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 in the required 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

CSS3 has a new tool for working with color - the 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 the first three RGB channels), and intermediate values ​​such as 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 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 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 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 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. Thus, to write the decimal number 255 in hexadecimal notation, use FF notation.

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 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 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 from the 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 the HSLA format, as in RGBA, an alpha channel is 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.

• Internet
• Programs
• Instructions
• Browsers
• Windows 10
• Android
• iOS
• Connection

The last notes

Standard load test

What to do if orders in your personal account on Aliexpress are missing?

Solving problems with screen sharing on Skype

Tizen operating system in Samsung Smart TV Webos operating system in lg TVs

What is a function in Excel?

Popular

Programs for tuning a guitar on a computer

Free installation of play store on laptop

How to convert LAB file to PDF file

News

2024-05-22 01:37:38

Ways to clear the cache on a computer or laptop

2024-05-21 01:37:12

USB Type-C: a universal connector for everything

2024-05-20 01:39:31

Liveexpert - reviews about making money from consultations in LiveExpert

2024-05-20 01:39:31

Firmware or flashing Sony Xperia Directly flashing the device

2024-05-20 01:39:31

The best frameless smartphones