As you know, color can affect a person's condition: both mental and physical. Every day, looking at sites on the Internet, the eyes evaluate millions of colors and shades. A web designer who is familiar with the psychology of color can manipulate a visitor's mood in order to achieve any goal.
This is due to the fact that some shades are soothing, while others, on the contrary, are exciting. Next, we will talk about how color is synthesized and displayed using computer technology.
RGB is a color model that represents a method of obtaining all colors and their shades by mixing in various proportions three main components, which are:
- Red color ( Red);
- green color ( Green);
- blue color ( Blue).
This is where the abbreviated name RGB comes from. These colors were chosen as the main ones for a reason: the reason is the physiology of the retina of the human eye, and how it perceives them:
The RGB model remains the most popular today and is used to reproduce colors on TV screens and computer monitors. As manufacturers endow their products with different characteristics, a unified RGB-based color synthesis system called sRGB was created in 1996, which Microsoft and HP collaborated on.
Numerical color representation
As mentioned earlier, RGB colors are formed by mixing the main colors. To describe the intensity of each of them, a scheme was adopted in which the color is represented by the range 0-255 (8 bits), which in the hexadecimal system corresponds to 00-FF.
That is, the primary colors will look like this:
- Red - RGB (255,0,0);
- Green - RGB (0.255.0);
- Blue - RGB (0,0,255);
If the color intensity takes on values less than 255, then different shades of red, green and blue are obtained. Below is a table of their gradation, as well as the hexadecimal values of each of the shades:
RGB color tables
Naturally, in addition to the gradations of the primary colors, there are mixed ones, and their number is quite large. Therefore, a table of RGB colors was created, in which all existing shades are presented, as well as their names and numerical representations ( decimal and hexadecimal).
You can get acquainted with it here. This table makes life much easier for web designers, since in a few seconds you can find the desired shade and find out its numerical representation.
Safe RGB color palette
However, at some point there was a problem of displaying colors in different browsers, and to solve it, a so-called "safe" palette of RGB colors was compiled, which were deduced by mathematical calculations.
When the browser cannot display a color correctly, it tries to get close to the desired one by mixing adjacent colors, and most likely the result will be completely unacceptable:
By using RGB color codes from this palette, a web developer can have no fear of displaying colors on their site pages when viewed with different browsers, platforms and monitors. Although at the moment the table of safe colors is losing its relevance ( technical progress still does not stand still), when using it, you can, as they say, sleep well.
Gold color in RGB model
For the first time the word "gold" was used at the beginning of the XIV century to describe the color of a chemical element called Aurum - gold. In RGB, gold is represented by the following numerical values:
- RGB (255, 215, 0) - decimal system;
- HEX # FFD700 - hexadecimal system.
Beige color in RGB model
The color beige occupies a rather significant place in history, even if it is not the most expressive one. Many cultural monuments, especially antique sculptures, were made of soapstone and soapstone, which have a beige tint. In RGB, beige has the following numerical representations.
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.
| 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.CSS color codes are used to specify a color. Typically, color codes or color values are used to set a color for either the foreground of an element (for example, text color, link color) or for the background 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 set your own color values in various formats. The following table lists all possible formats:
The listed formats are described in more detail below.
CSS Colors - Hexadecimal Codes
Hexadecimal color code is a six-digit representation of a 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 the shorter form of six-digit 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 graphics 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 using hexadecimal notation.
CSS Colors - RGB Values
RGB value is the color code, which 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 using our service.
Safe browser colors
Below is a table of 216 colors that are the safest and most computer independent. These CSS colors range from 000000 to FFFFFF hexadecimal. They are safe to use because they ensure that all computers display color correctly when working with a 256 color palette.
| CSS "safe" color table | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | # 3300CC | # 3300FF |
| #333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| # CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
| # CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| # FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
| # FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
| # FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |
