Hex grey. HTML Tutorial

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

color scheme in html

In html, color can be specified in several formats:

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

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

At the beginning of the code (before the numbers), a hash mark is placed. 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, code white color in html will look like #FFFFFF:

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

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 as follows: rgb(0, 210, 100).

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

4. In RGBA format - it is an advanced RGB format, where the fourth value specifies the transparency of the color in the form of 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 is easy to get confused. Therefore, it was devised special table colors. In it, to 147 key names of color shades, codes of correspondence are given in all major color representation standards. Additionally, each field is equipped with a bar for visual color matching. One of these tables is presented on the site colorscheme.ru:

But even with the help of such a structuring of correspondence, the selection of the desired shade can be difficult. And it’s not a fact that there is the right one in the color code table.

To get around this barrier and make it as easy as possible to select the right shade, interactive web services have been developed. Their user interface may differ somewhat.

On the html-color-codes.info site, 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 hue is displayed by the color of the frame and rectangle on the left side. At the bottom, 3 fields display the color code in the main 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:

Color Safety

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

Then the great table of safe colors was bred. It indicated 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:

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

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

Fundamentals 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, thank science, even color harmony She managed to describe in the form of several schemes. All of them are based on the use of the color wheel. Schemes of harmonious selection of colors in html.

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

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

These formats are described in more detail below.

CSS Colors - Hex Codes

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

CSS Colors - Short Hex Codes

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

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

Each hexadecimal color code in CSS will be preceded by a "#" hash sign. The following are examples of the use of hexadecimal notation.

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's 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 with our service.

Safe Browser 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 hex code. They are safe to use as they ensure that all computers will display color correctly when working with the 256 color palette.

In HTML, color can be specified in three ways:

Setting color in HTML by its name

Some colors can be specified by their name, using the name of the color on the English language. The most common keywords: black (black), white (white), red (red), green (green), blue (blue), etc:

Text Color - Red

The most popular colors of the Consortium standard world wide web(English World Wide Web Consortium, W3C):

An example of using different color names:

Example: setting a color by its name

• Try it yourself "

Header on red background

Header on orange background

Header on lime background

White text on a blue background

Header on red background

Header on orange background

Header on lime background

White text on a blue background

Specifying color with RGB

When displaying different colors on the monitor, the RGB palette is taken as the basis. Any color is obtained by mixing the three main ones: R - red, G - green (green), B - blue (blue). The brightness of each color is given by one byte and therefore can take values ​​from 0 to 255. For example, RGB (255,0,0) is rendered as red because red is set to its highest value (255) and the rest are set to 0 You can also set the color as a percentage. Each of the parameters indicates the level of brightness of the corresponding color. For example: the values ​​rgb(127, 255, 127) and rgb(50%, 100%, 50%) will set the same medium saturation green color:

Example: Specifying a color with RGB

• Try it yourself "

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Set color by hexadecimal value

Values R G B can also be specified using hexadecimal (HEX) color values ​​in the form: #RRGGBB where RR (red), GG (green), and BB (blue) are hexadecimal values ​​from 00 to FF (same as decimal 0-255) . The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The hexadecimal system uses following signs: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Here the numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are the union of two characters into one value. For example, the highest number 255 in decimal corresponds to the highest FF in hexadecimal. Unlike the decimal system, the hexadecimal number is preceded by a pound sign. # , for example, #FF0000 is displayed as red because red is set to its highest value (FF) and the other colors are set to their minimum value (00). Characters after the hash symbol # can be typed in both uppercase and lowercase. The hexadecimal system allows you to use the abbreviated form #rgb, where each character is equal to twice. Thus, the entry #f7O should be regarded as #ff7700.

Example: Color HEX

• Try it yourself "

red: #FF0000

green: #00FF00

blue: #0000FF

red: #FF0000

green: #00FF00

blue: #0000FF

red+green=yellow: #FFFF00

red+blue=purple: #FF00FF

green+blue=cyan: #00FFFF

List of commonly used colors (name, HEX and RGB):

Color codes (background) by saturation and hue.

Table (palette) of html colors gives you the opportunity to independently choose the tone you need. The color value is displayed in three formats: Hex, RGB, and HSV.

• Hex consists of three two character values ​​in hexadecimal notation. For example: #ff00b3, where the first pair of numbers is red, the second is green, and the third is blue.
• RGB (RedGreenBlue) has the form "200,100,255" indicating the amount of the corresponding tone (red, green, blue) in the resulting color.
• HSV (Hue, Saturation, Value - tone, saturation, value) - a color model in which the coordinates are:
  • Hue - color tone, can vary from 0° to 360°.
  • Saturation - saturation, varies between 0-100 or 0-1. The larger this setting, the "purer" the color is, which is why this setting is sometimes referred to as color purity. And the closer this parameter is to zero, the closer the color is to neutral gray.
  • Value (color value) - sets the brightness, the value can also vary between 0-100 or 0-1.

Enter color code: GO

List of colors with names

The table lists the English color names (which can be used as values) supported by all browsers and their hexadecimal values. All colors listed are "safe", meaning they will display the same in all browsers.

For html pages colors are denoted primarily in hexadecimal. For this, two types of code recording are used - full or abbreviated. In order to correctly indicate the html color with a full record, you must write six characters (numbers and / or English letters) after the lattice, for example, black is written like this: #000000. An abbreviated notation for specifying html colors consists of a grid and three numbers and / or letters behind it. Wherein this species reserves can only be used if complete record a given color consists of the same symbols after the lattice. For example, the same black color can be written like this: #000. You can specify html colors with both large and small characters, since they are not case sensitive.

Each character written after "#" corresponds to a certain proportion of red, green and blue colors. In turn, all monitors consist of a huge number of pixels (microscopic dots), each of which includes 3 so-called "flashlights" (light sources): red, green and blue. Then, by adjusting the intensity of the emitted light by these "flashlights", the monitor displays the color we need.

By combining red, blue and green light intensity (from 0 to 256) the monitors can display 16,000,000 different colors.

Also, colors for sites can be specified verbally or in RGB code.

To date, verbally, you can prescribe 147 colors. It is important to know that some different names can refer to the same colors, for example Gray and Gray are gray (#808080).

Safe colors for websites.

Not every monitor and browser can display all 16 million html colors correctly.

If, for example, a color comes across that the browser cannot display correctly, then:

1. The browser replaces it with the one that is most similar to it and can be successfully reproduced;
2. To display correctly, the browser can mix multiple colors and reproduce the result.

In order to ensure that the output in any browser and on any monitor is the color that you specified in the code, it is recommended to use "Safe Colors". They were not determined by hand or at someone's will, but mathematically. Such 100% safe colors for html documents there are 216. And although today's technology has reached the point that modern monitors and browsers recognize millions of shades, we recommend using these safe colors to ensure color reproduction.

This table includes 216 safe html color codes. Each color has a value in RGB to determine the color in graphic editors and HEX for specifying colors on html pages.