As you know, color can affect the state of a person: both mental and physical. Every day, browsing the Internet, the eyes evaluate millions of colors and shades. A web designer who is familiar with the psychology of color can control the visitor's mood to achieve any goals.
This is due to the fact that some shades soothe, and some, on the contrary, excite. 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 the three main components, which are:
- Red color ( Red);
- green color ( Green);
- Blue colour ( Blue).
This is where the abbreviated name RGB comes from. These colors are 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. Since manufacturers endow their products with different characteristics, in 1996 the one system An RGB - based color synthesis called sRGB , which was developed jointly by Microsoft and HP .
Numeric color representation
As mentioned earlier, RGB colors are formed by mixing primary 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 corresponds to 00-FF in hexadecimal.
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 values less than 255, then various shades of red, green and blue are obtained. The following is a table of their gradation, as well as the hexadecimal values of each of the shades:
RGB Color Charts
Naturally, in addition to gradations of 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 ( in decimal and hexadecimal form).
You can get to know her here. This table makes life a lot easier for web designers, because 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, the so-called "safe" palette of RGB colors was compiled, which were derived by mathematical calculations.
When the browser can't display a color correctly, it tries to get close to what it needs by mixing neighboring colors, and most likely the result will be completely unacceptable:
By using the RGB color codes from this palette, a web developer can have no worries about displaying colors on their site pages when viewed with different browsers, on the various platforms and monitors. Although on this moment the table of safe colors loses its relevance ( technological progress does not stand still), when using it, you can, as they say, sleep peacefully.
Golden 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 the RGB model, the gold color is represented by the following numerical values:
- RGB (255, 215, 0) - decimal system;
- HEX #FFD700 - hexadecimal system.
Beige color in RGB model
Beige has a rather significant place in history, even if it is not the most expressive. Many cultural monuments, especially antique sculptures, were made of steatite and soapstone, which have a beige tint. In the RGB model beige color has the following numerical representations.
>>Color Management
Hexadecimal RGB color values
Methods for describing and processing colors differ from each other in what final representation they are intended for. Let's compare, for example, representations of colors for polygraphy and for computer monitors. In the first case, the basis is white the color of the paper on which the 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 colors they give white paper. If we add black to them, we get CMYK- a way to convey color when the desired color is obtained by subtracting the missing colors from white.
In the second case, the basis is 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 color of the screen, and any of the required colors is given by the ratio of each of the three colors. In this case we will get RGB- Color transfer method. Primary colors can have meanings 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 in its series of digits, but sixteen - hence the name. Accordingly, non-repeating variants of combinations of two digits can only be - 256 , to continue the series of digits after 9 letters from A before F, so the row will look like this -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
In this case, the color is given by three hexadecimal numbers, each consisting of two digits. The first number determines the intensity red colors, average green, last thing- blue colors. All numbers can take values ranging 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 colors or black is given as #000000 .
In the form below, you can set any hexadecimal values for each of the three colors and see the result of their mixing by clicking in the output field.
Examples of some hexadecimal RGB color values: red, blue, and green gradations.
| view | the code | view | the code | view | the code | view | the code | view | the code | view | the 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 a Color with String Literals
For ease of use, some colors and their combinations were given 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 | ||||
| Alice blue | antique white | Aqua | aquamarine | ||||
| Azure | Beige | Bisque | blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| chartreuse | Chocolate | Coral | Cornflowerblue | ||||
| Cornsilk | Crimson | cyan | dark blue | ||||
| Darkcyan | darkgoldenrod | darkgray | dark green | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | darkorange | ||||
| Darkorchid | dark red | darksalmon | Darkseagreen | ||||
| darkslate blue | darkslate gray | darkturquoise | Darkviolet | ||||
| Deeppink | deep sky blue | Dimgray | dodger blue | ||||
| Firebrick | Floral white | forestgreen | Fuschia | ||||
| Gainsboro | ghost white | Gold | Goldenrod | ||||
| Gray | Greenyellow | Honeydew | hotpink | ||||
| Indian Red | Indigo | Ivory | Khaki | ||||
| Lavender | Lavenderblush | Lemonchiffon | light blue | ||||
| light coral | lightcyan | lightcoldenrodyellow | light green | ||||
| lightgray | Lightpink | light salmon | Lightsea green | ||||
| Lightskyblue | Lightslate gray | light steel blue | lightyellow | ||||
| lime | Limegreen | linen | Magenta | ||||
| maroon | mediumaquamarine | medium blue | Medium orchid | ||||
| Medium purple | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| medium turquoise | mediumvioletred | midnight blue | mintcream | ||||
| mistyrose | Navajowhite | Navy | oldlace | ||||
| Olive | Olivedrab | orange red | Orchid | ||||
| palegoldenrod | Palegreen | paleturquoise | palevioletred | ||||
| papayawhip | Peachpuff | Peru | Pink | ||||
| Plum | Powder blue | Rosybrown | royal blue | ||||
| saddlebrown | seagreen | Seashell | Sienna | ||||
| Silver | sky blue | Slateblue | Slategray | ||||
| Snow | Springgreen | steel blue | Tan | ||||
| Teal | Thistle | Tomato | Turquoise | ||||
| violet | Wheat | Whitesmoke | yellow green |
Using a Safe Color Picker
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 under system settings and monitor capabilities, by self-mixing colors and substituting them. As a result, sometimes the user sees not quite what the webmaster wanted to show him. The way out of this situation was found in the use of a palette, each color of which is guaranteed to be rendered in the same way by all browsers on different platforms. This so-called guaranteed palette, also known as safe palette. This palette includes colors whose color components take on the following values: 00 ,33 ,66 ,99 , CC,FF, in all possible 216 their combinations.
| view | the code | view | the code | view | the code | view | the code | view | the code | view | the code |
| 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 |
Vlad Merzhevich
In HTML, the color is specified in one of two ways: using a hexadecimal code and by the name of some colors. The most commonly used method is based on the hexadecimal system, as the most universal.
Hexadecimal colors
HTML uses hexadecimal numbers to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 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 system corresponds to the number FF in hexadecimal.
To avoid confusion in the definition of the number system, the hexadecimal number is preceded by the pound sign #, 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 is as follows.
Here, the background color of the web page is set to #FA8E47. The pound sign # in front of a number means it is in hexadecimal. The first two digits (FA) define the red component of the color, the third to fourth digits (8E) the green component, and the last two digits (47) the blue component. The end result is this color.
| FA | + | 8E | + | 47 | = | FA8E47 |
Each of the three colors - red, green and blue - can take values from 00 to FF, which eventually forms 256 shades. Thus, the total number of colors can be 256x256x256 = 16.777.216 combinations. The color model based on the 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 white.
To make it easier to navigate in hexadecimal colors, take into account some rules.
- If the values of the color components are the same (for example: #D6D6D6), then a gray tint will be obtained. The higher the number, the lighter the color, and the values change from #000000 (black) to #FFFFFF (white).
- A bright red color is formed if the red component is made maximum (FF), and the rest of the components are set to zero. The color with the value #FF0000 is the reddest possible red tint. The same is true for green (#00FF00) and blue (#0000FF).
- Yellow (#FFFF00) is obtained by mixing red with green. This is clearly seen on the color wheel (Fig. 6.1), which presents the primary colors (red, green, blue) and complementary or complementary. These include yellow, cyan, and violet (also called magenta). In general, any color can be obtained by mixing colors adjacent to it. So, 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. Suitable for this purpose graphics editor who can work with different color models, for example, Adobe Photoshop. On fig. 6.2 shows a window for choosing a color in this program, the line circles the resulting hexadecimal value of the current color. You can copy and paste it into your code.
Rice. 6.2. Color picker in Photoshop
Web Colors
If you set the monitor's color quality to 8-bit (256 colors), the same color can be displayed in different browsers in my own way. This has to do with the way graphics are rendered 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. In order for the color to remain the same in different browsers, a palette of so-called web colors was introduced. Web colors are such colors, for each component of which - red, green and blue - one of six values \u200b\u200bis set - 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 is displayed 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
In order not to remember a collection of numbers, you can use the names of commonly used colors instead. In table. 6.3 shows the names of popular color names.
| Color name | Color | Description | Hex 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 violet | #800080 | |
| red | Red | #FF0000 | |
| silver | light gray | #C0C0C0 | |
| teal | blue green | #008080 | |
| white | White | #FFFFFF | |
| yellow | Yellow | #FFFF00 |
It doesn't matter how you specify the color - by its name or by using hexadecimal numbers. In their effect, these methods are equal. Example 6-1 shows how to set the background and text colors of a web page.
Example 6.1. Background and text color
Sample text
AT this example the background color is set using the bgcolor attribute of the tag
, and the color of the text through the text attribute. For variety, the value of the text attribute is set to a hexadecimal number, and bgcolor is set to a reserved value. keyword teal.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 background of an element (background, block color). They can also be used to change button color, borders, marker, hover and other decorative effects.
You can set your own 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.
| Table of "safe" colors in CSS | |||||
| #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 |