RGB gray color. HTML tutorial. RGB colors. Safe palette colors. Specifying Color Using String Literals

There are several ways to represent color in web design.

HEX is a hexadecimal color representation system based on base 16. For this system, Arabic decimal digits from 0 to 9 and Latin letters from A to F are used to complement the digital number to 16. For web design, 16 primary (key) colors are used, the so-called hexadecimal color code #RRGGBB, where each pair is responsible for its share of the color: RR – red, GG – green and BB – blue. Each color fraction ranges from 00 to FF.

Two other representations of color in web design are: in the form of RGB(*,*,*), where each “*” fraction of a color is represented by decimal digits from 0 to 255 and by color names in English.

When creating a color image, the main problem is the correct reproduction of colors on different types of computers, monitors and browsers. If the browser cannot display a color correctly, it selects a similar one or mixes several colors. And sometimes it can be replaced with some completely different color.

Table 16 primary colors, which are used in all browsers

Table purple colors and its shades

Table gray colors and its shades

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

HTML colors
HTML colors and ways to specify them

In HTML, there are two ways to specify a color:

1. Using the color name,
2. Using the RGB system, where colors are specified in hexadecimal format.

Color name

Name colors in HTML indicated by English words, such as red or green. The color name acts as the value of the HTML tag attribute. There are a lot of flower names, in this article we will consider only the main ones.

Typically, two attributes are used in HTML to set a color:

1. Attribute color="color_name" - text color,
2. Attribute bgcolor="color_name" - background color.

Examples of using color attributes:
color="red" - assign a red color to the text,
bgcolor="green" - assign a green color to the background.

Table of basic HTML color names:

Hexadecimal number system

In everyday life, we use the decimal number system from 0 to 9. Programmers and designers often use the hexadecimal number system from 0 to 15, where:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Almost every color and shade visible to our vision can be written in the hexadecimal system, for example, the red color red in the hexadecimal system will be equal to ff0000

color="red" - red color, by name,
color="#ff0000" — red color, in hexadecimal number system.

In HTML, a hexadecimal number is preceded by a hash sign # in the attribute value.

RGB

Before you start specifying colors in HTML using the hexadecimal number system, you first need to learn about such a thing as R G B

RGB is an abbreviation for the words R ed G reen B lue (Red Green Blue).

A color in HTML, written in hexadecimal, consists of three blocks of numbers 00 00 00, where each block is responsible for one of the RGB colors, the first block for red, the second for green, and the third for blue. Numbers can range from 00 to ff.

Where, ff is 255 in decimal notation.

RGB scheme:
Red - from 00 to ff
Green - from 00 to ff
Blue - from 00 to ff

As a result, we get a six-digit number 000000, where the first two numbers are responsible for the red color, the second two numbers are responsible for the green color, and the third two numbers are responsible for the blue color.

If we want to get a red color, then we write ff0000, green color 00ff00, blue color 0000ff. For example, if we want to get a dark red color, then we need to reduce the first block of numbers and instead of ff (which is equal to 255 in decimal number system), write for example 96 (which is equal to 150 in decimal notation).

For clarity, we give examples of colors and their hexadecimal code:

Mixing colors in HTML

If you didn’t miss drawing classes at school, you probably remember that by evenly mixing red and green, you can get yellow,
when you add a little green to red you can get orange, etc.

Hexadecimal and RGB colors can also be mixed:

By experimenting with the hexadecimal number system and RGB, you will eventually get the hang of it and be able to choose the color you want.

Unfortunately, it is not yet possible to display taste sensations on the website. But this can be fully compensated with the help of colors. After all, html colors allow you to display any of millions of shades. So " colored pencils There are many more than seven in his set.

Color scheme in html

In html, color can be specified in several formats:

1. As a hexadecimal value – the code specified in the hexadecimal number system is used. Such color codes in html consist of three pairs of hexadecimal numbers. Each pair is responsible for the saturation of the shade with its primary color:

• The first numerical pair is responsible for the color red;
• The second pair is for the green color content;
• The latter is for its blue content.

A hash mark is placed at the beginning of the code (before the numbers). This is the hexadecimal color code. In addition to numbers from 1 to 9, this number system uses letters of the Latin alphabet (A, B, C, D, E, F).

For example, the white color code in html will look like #FFFFFF:

2. Keyword - HTML currently supports about 147 keywords. But not all of these words are unique. Some of them refer to the same color shade.

The color gray is represented by two keywords: gray and gray . Their hexadecimal code (HEX) is given by the same value #808080.

Example:

#808080

3. In RGB format - this color encoding in html is based on the use of three values, set in the range from 0 to 255. Each of them determines the saturation of the hue with one of the primary colors:

• R – red (red);
• G – green (green);
• B – blue (blue).

The color number in RGB format is written in the following form: rgb(0, 210, 100).

background-color:rgb(100,186,43)

4. In the RGBA format - it is an improved RGB format, where the fourth value specifies the transparency of the color as a decimal fraction from 0 to 1.

Usage example:

background-color:rgba(100,86,143,0.2)

background-color:rgba(100,86,143,0.5)

background-color:rgba(100,86,143,0.8)

background-color:rgba(100,86,143,1)

HTML color tables and color generators

With such a wide range of color setting formats, it's easy to get confused. Therefore, a special color table was invented. It provides 147 key names of color shades with compliance codes in all major color standards. Additionally, each field is equipped with a bar for visual color selection. One of these tables is presented on the website colorscheme.ru:

But even with this structuring of matching, choosing the right shade can be difficult. And it’s not a fact that the table of color codes will contain the one you need.

To get around this obstacle and make choosing the right shade as easy as possible, interactive web services have been developed. Their user interface may differ slightly from each other.

On the website html-color-codes.info the color generator looks like this:

And within the color-picker.appsmaster.co service, this tool is implemented a little differently:

The saturation of each color in the generator is set using special sliders. Visually, the shade is displayed by the color of the frame and rectangle on the left side. At the bottom, 3 fields display the color code in basic formats.

But the color generator is available not only on specialized sites. Almost all graphic editors are equipped with a similar tool. For example, Photoshop:

Safety precautions when working with color

And this was a long time ago, back in the era of video cards that supported only 256 colors. In those distant times, operating systems could only display a certain number of eight-bit shades without distortion.

Then a great table of safe colors was developed. It specified 216 shades that could be displayed without distortion in any of the browsers of that time. And to this day this " great manuscript» is still available on some resources:

Nowadays everything has changed. Therefore, all safety rules when working with color in html are completely canceled. After all, modern computer hardware supports more than 16 million different shades. And 216 safe colors have sunk into oblivion.

These data are fully confirmed by statistics. Judging by it, in 2014, only 0.5% of users have computers that support only 256 shades.

Basics of color harmony

Not all of us are endowed with a natural harmonious sense of taste. Therefore, choosing the right color can be a real challenge. But, praise be to science, she even managed to describe color harmony in the form of several schemes. All of them are based on the use of a color wheel. Schemes for harmonious selection of colors in html.

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.

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

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

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 .