Blue rgb. HTML Tutorial
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 display only 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.
Table (palette) of colors html 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 the hexadecimal number system. 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 from 0-100 or 0-1. The higher this parameter, the “purer” the color, which is why this parameter is sometimes called 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 names of the colors on English(which can be used as values) supported by all browsers, and their hexadecimal values. All colors listed are “safe”, meaning they will appear the same in all browsers.
| Color name | HEX | Color |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| Medium Blue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| Midnight Blue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| Slate Gray | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| Sky Blue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| Dark Khaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGray | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| Blanched Almond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFFF0 | |
| White | #FFFFFF |
There are several ways to represent color in web design.
HEX is a hexadecimal color representation system based on base 16. This system uses Arabic decimal digits from 0 to 9 and Latin letters from A to F for complement digital quantity up to 16. For web design, 16 primary (key) colors were taken, 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 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
| Name | Color | Hex | (RGB) |
| Aqua (sea wave) | #00FFFF | (000,255,255) | |
| Black | #000000 | (000,000,000) | |
| Blue | #0000FF | (000,000,255) | |
| Fuchsia (magenta) | #FF00FF | (255,000,255) | |
| Gray | #808080 | (128,128,128) | |
| Green | #008000 | (000,128,000) | |
| Lime (bright green) | #00FF00 | (000,255,000) | |
| Maroon (dark burgundy) | #800000 | (128,000,000) | |
| Navy (dark blue) | #000080 | (000,000,128) | |
| Olive | #808000 | (128,128,000) | |
| Purple | #800080 | (128,000,128) | |
| Red | #FF0000 | (255,000,000) | |
| Silver | #C0C0C0 | (192,192,192) | |
| Teal (gray-green) | #008080 | (000,128,128) | |
| White | #FFFFFF | (255,255,255) | |
| Yellow | #FFFF00 | (255,255,000) |
Table purple colors and its shades
| Name | Color | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuchsia (fuchsia) | #FF00FF | (255,000,255) | |
| Mauvein (aniline purple) | #EF0097 | (239,000,151) | |
| Salmon pink (orange pink) | #FF91A4 | (255,145,164) | |
| Cenise (a shade of purple) | #DE3163 | (153,149,140) | |
| Aubergine Eggplant (eggplant) | #990066 | (153,000,132) | |
| Lavender blush (pinkish-lavender) | #FFF0F5 | (255,240,245) | |
| Lilac (lilac) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Orchid (orchid) | #DA70D6 | (218,112,214) | |
| Red-violet (purple-red) | #C71585 | (199,021,133) | |
| Sanguine (sanguine) | #92000A | (146,000,010) | |
| Thistle (shade of purple) | #D8BFD8 | (185,211,238) | |
| Violet-eggplant (a shade of purple) | #991199 | (153,017,153) | |
| Rosa vivo (deep pink) | #FF007F | (255,000,127) | |
| Lavender-rose (a shade of purple) | #FBA0E3 | (108,123,139) | |
| Mountbatten pink | #997ABD | (153,122,141) |
Table gray colors and its shades
| Name | Color | Hex | (RGB) |
| Gray | #808080 | (128,128,128) | |
| Gray | #bebebe | (190,190,190) | |
| (Grey-shade) | #858585 | (133,133,133) | |
| Gray33 | #545454 | (084,084,084) | |
| (Grey slate) | #708090 | (112,128,144) | |
| (Quartz) | #99958с | (153,149,140) | |
| (Light gray) | #bbbbbb | (187,187,187) | |
| (Silver) | #c0c0c0 | (192,192,192) | |
| (Grey-white) | #f0f0f0 | (240,240,240) | |
| (Abdel-Kerim's beards) | #e0e0e0 | (224,224,224) | |
| LightGray (Light gray) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (Pale cornflower blue1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Pale cornflower blue2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
For html pages Colors are designated primarily in hexadecimal. To do this, two types of code recording are used - full or abbreviated. To correctly indicate the html color in full, you must enter six characters (numbers and/or english letters) after the hash, for example, black is written like this: #000000. Abbreviated form of instructions html colors consists of a hash and three numbers and/or letters behind it. In this case, this type of stock can only be used if the complete record of a given color consists of identical symbols after the hash mark. For example, the same black color can be written like this: #000. You can specify html colors using 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. 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 light emitted by these “flashlights”, the monitor displays the color we need.
By combining the emission intensity of red, blue and green light (from 0 to 256), monitors can display 16,000,000 different shades.
Also, colors for websites can be indicated verbally or in RGB code.
Today, 147 colors can be written verbally. It is important to know that some different names can mean the same colors, for example Gray and Gray are the color gray (#808080).
Safe colors for websites.
Not every monitor and browser can correctly display all 16 million html colors.
If, for example, you come across a color that the browser cannot display correctly, then:
- The browser replaces it with the one that is most similar to it and can be successfully reproduced;
- For correct display the browser can mix multiple colors and reproduce the result.
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 determined not manually or by someone else's desire, but mathematically. There are 216 such 100% safe colors for HTML documents. And although today’s technologies have reached the point where modern monitors and browsers recognize millions of shades, we recommend using these safe colors to guarantee color rendering.
| Hexadecimal color system. | Color codes in RGB (Red, Green, Blue). |
| HTML color code: #000000 | RGB color: 0 0 0 |
| HTML color code: #333333 | RGB color: 51 51 51 |
| HTML color code: #666666 | RGB color: 102 102 102 |
| HTML color code: #999999 | RGB color: 153 153 153 |
| HTML color code: #CCCCCC | RGB color: 204 204 204 |
| HTML color code: #FFFFFF | RGB color: 255 255 255 |
| HTML color code: #666600 | RGB color: 102 102 0 |
| HTML color code: #999900 | RGB color: 153 153 0 |
| HTML color code: #999933 | RGB color: 153 153 51 |
| HTML color code: #999966 | RGB color: 153 153 102 |
| HTML color code: #CCCC33 | RGB color: 204 204 51 |
| HTML color code: #CCCC66 | RGB color: 204 204 102 |
| HTML color code: #333300 | RGB color: 51 51 0 |
| HTML color code: #666633 | RGB color: 102 102 51 |
| HTML color code: #CCCC99 | RGB color: 204 204 153 |
| HTML color code: #CCFF33 | RGB color: 204 255 51 |
| HTML color code: #CCFF00 | RGB color: 204 255 0 |
| HTML color code: #CCFF66 | RGB color: 204 255 102 |
| HTML color code: #669900 | RGB color: 102 153 0 |
| HTML color code: #99CC33 | RGB color: 153 204 51 |
| HTML color code: #99CC00 | RGB color: 153 204 0 |
| HTML color code: #99CC66 | RGB color: 153 204 102 |
| HTML color code: #99FF33 | RGB color: 153 255 51 |
| HTML color code: #99FF00 | RGB color: 153 255 0 |
| HTML color code: #336600 | RGB color: 51 102 0 |
| HTML color code: #669933 | RGB color: 102 153 51 |
| HTML color code: #66CC33 | RGB color: 102 204 51 |
| HTML color code: #66CC00 | RGB color: 102 204 0 |
| HTML color code: #99FF66 | RGB color: 153 255 102 |
| HTML color code: #CCFF99 | RGB color: 204 255 153 |
| HTML color code: #009900 | RGB color: 0 153 0 |
| HTML color code: #339900 | RGB color: 51 153 0 |
| HTML color code: #33CC00 | RGB color: 51 204 0 |
| HTML color code: #33FF00 | RGB color: 51 255 0 |
| HTML color code: #66FF33 | RGB color: 102 255 51 |
| HTML color code: #66FF00 | RGB color: 102 255 0 |
| HTML color code: #00CC33 | RGB color: 0 204 51 |
| HTML color code: #33CC33 | RGB color: 51 204 51 |
| HTML color code: #00CC00 | RGB color: 0 204 0 |
| HTML color code: #00FF00 | RGB color: 0 255 0 |
| HTML color code: #00FF33 | RGB color: 0 255 51 |
| HTML color code: #33FF33 | RGB color: 51 255 51 |
| HTML color code: #003300 | RGB color: 0 51 0 |
| HTML color code: #336633 | RGB color: 51 102 51 |
| HTML color code: #669966 | RGB color: 102 153 102 |
| HTML color code: #66CC66 | RGB color: 102 204 102 |
| HTML color code: #99CC99 | RGB color: 153 204 153 |
| HTML color code: #CCFFCC | RGB color: 204 255 204 |
| HTML color code: #006600 | RGB color: 0 102 0 |
| HTML color code: #339933 | RGB color: 51 153 51 |
| HTML color code: #00FF66 | RGB color: 0 255 102 |
| HTML color code: #33FF66 | RGB color: 51 255 102 |
| HTML color code: #66FF66 | RGB color: 102 255 102 |
| HTML color code: #99FF99 | RGB color: 153 255 153 |
| HTML color code: #009933 | RGB color: 0 153 51 |
| HTML color code: #00CC66 | RGB color: 0 204 102 |
| HTML color code: #33CC66 | RGB color: 51 204 102 |
| HTML color code: #00FF99 | RGB color: 0 255 153 |
| HTML color code: #33FF99 | RGB color: 51 255 153 |
| HTML color code: #66FF99 | RGB color: 102 255 153 |
| HTML color code: #006633 | RGB color: 0 102 51 |
| HTML color code: #009966 | RGB color: 0 153 102 |
| HTML color code: #339966 | RGB color: 51 153 102 |
| HTML color code: #00CC99 | RGB color: 0 204 153 |
| HTML color code: #33CC99 | RGB color: 51 204 153 |
| HTML color code: #66CC99 | RGB color: 102 204 153 |
| HTML color code: #009999 | RGB color: 0 153 153 |
| HTML color code: #33CCCC | RGB color: 51 204 204 |
| HTML color code: #00FFCC | RGB color: 0 255 204 |
| HTML color code: #33FFCC | RGB color: 51 255 204 |
| HTML color code: #66FFCC | RGB color: 102 255 204 |
| HTML color code: #99FFCC | RGB color: 153 255 204 |
| HTML color code: #00CCCC | RGB color: 0 204 204 |
| HTML color code: #00FFFF | RGB color: 0 255 255 |
| HTML color code: #33FFFF | RGB color: 51 255 255 |
| HTML color code: #66FFFF | RGB color: 102 255 255 |
| HTML color code: #99FFFF | RGB color: 153 255 255 |
| HTML color code: #CCFFFF | RGB color: 204 255 255 |
| HTML color code: #336666 | RGB color: 51 102 102 |
| HTML color code: #006666 | RGB color: 0 102 102 |
| HTML color code: #669999 | RGB color: 102 153 153 |
| HTML color code: #339999 | RGB color: 51 153 153 |
| HTML color code: #66CCCC | RGB color: 102 204 204 |
| HTML color code: #99CCCC | RGB color: 153 204 204 |
| HTML color code: #003333 | RGB color: 0 51 51 |
| HTML color code: #0099CC | RGB color: 0 153 204 |
| HTML color code: #3399CC | RGB color: 51 153 204 |
| HTML color code: #00CCFF | RGB color: 0 204 255 |
| HTML color code: #33CCFF | RGB color: 51 204 255 |
| HTML color code: #66CCFF | RGB color: 102 204 255 |
| HTML color code: #006699 | RGB color: 0 102 153 |
| HTML color code: #336699 | RGB color: 51 102 153 |
| HTML color code: #6699CC | RGB color: 102 153 204 |
| HTML color code: #0099FF | RGB color: 0 153 255 |
| HTML color code: #3399FF | RGB color: 51 153 255 |
| HTML color code: #99CCFF | RGB color: 153 204 255 |
| HTML color code: #003366 | RGB color: 0 51 102 |
| HTML color code: #003399 | RGB color: 0 51 153 |
| HTML color code: #0033FF | RGB color: 0 51 255 |
| HTML color code: #3366CC | RGB color: 51 102 204 |
| HTML color code: #0066CC | RGB color: 0 102 204 |
| HTML color code: #0066FF | RGB color: 0 102 255 |
| HTML color code: #000033 | RGB color: 0 0 51 |
| HTML color code: #0033CC | RGB color: 0 51 204 |
| HTML color code: #0000CC | RGB color: 0 0 204 |
| HTML color code: #0000FF | RGB color: 0 0 255 |
| HTML color code: #3366FF | RGB color: 51 102 255 |
| HTML color code: #6699FF | RGB color: 102 153 255 |
| HTML color code: #000066 | RGB color: 0 0 102 |
| HTML color code: #000099 | RGB color: 0 0 153 |
| HTML color code: #3333CC | RGB color: 51 51 204 |
| HTML color code: #3300CC | RGB color: 51 0 204 |
| HTML color code: #3300FF | RGB color: 51 0 255 |
| HTML color code: #3333FF | RGB color: 51 51 255 |
| HTML color code: #333366 | RGB color: 51 51 102 |
| HTML color code: #333399 | RGB color: 51 51 153 |
| HTML color code: #666699 | RGB color: 102 102 153 |
| HTML color code: #6666CC | RGB color: 102 102 204 |
| HTML color code: #6666FF | RGB color: 102 102 255 |
| HTML color code: #9999CC | RGB color: 153 153 204 |
| HTML color code: #330066 | RGB color: 51 0 102 |
| HTML color code: #330099 | RGB color: 51 0 153 |
| HTML color code: #6600FF | RGB color: 102 0 255 |
| HTML color code: #6633FF | RGB color: 102 51 255 |
| HTML color code: #9999FF | RGB color: 153 153 255 |
| HTML color code: #CCCCFF | RGB color: 204 204 255 |
| HTML color code: #330033 | RGB color: 51 0 51 |
| HTML color code: #663399 | RGB color: 102 51 153 |
| HTML color code: #6633CC | RGB color: 102 51 204 |
| HTML color code: #6600CC | RGB color: 102 0 204 |
| HTML color code: #9966FF | RGB color: 153 102 255 |
| HTML color code: #9966CC | RGB color: 153 102 204 |
| HTML color code: #663366 | RGB color: 102 51 102 |
| HTML color code: #660099 | RGB color: 102 0 153 |
| HTML color code: #9900FF | RGB color: 153 0 255 |
| HTML color code: #9933FF | RGB color: 153 51 255 |
| HTML color code: #9933CC | RGB color: 153 51 204 |
| HTML color code: #CC99FF | RGB color: 204 153 255 |
| HTML color code: #660066 | RGB color: 102 0 102 |
| HTML color code: #996699 | RGB color: 153 102 153 |
| HTML color code: #9900CC | RGB color: 153 0 204 |
| HTML color code: #CC00FF | RGB color: 204 0 255 |
| HTML color code: #CC33FF | RGB color: 204 51 255 |
| HTML color code: #CC66FF | RGB color: 204 102 255 |
| HTML color code: #993399 | RGB color: 153 51 153 |
| HTML color code: #990099 | RGB color: 153 0 153 |
| HTML color code: #CC33CC | RGB color: 204 51 204 |
| HTML color code: #CC00CC | RGB color: 204 0 204 |
| HTML color code: #CC66CC | RGB color: 204 102 204 |
| HTML color code: #CC99CC | RGB color: 204 153 204 |
| HTML color code: #CC3399 | RGB color: 204 51 153 |
| HTML color code: #FF00FF | RGB color: 255 0 255 |
| HTML color code: #FF33FF | RGB color: 255 51 255 |
| HTML color code: #FF66FF | RGB color: 255 102 255 |
| HTML color code: #FF99FF | RGB color: 255 153 255 |
| HTML color code: #FFCCFF | RGB color: 255 204 255 |
| HTML color code: #990066 | RGB color: 153 0 102 |
| HTML color code: #CC0099 | RGB color: 204 0 153 |
| HTML color code: #CC6699 | RGB color: 204 102 153 |
| HTML color code: #FF33CC | RGB color: 255 51 204 |
| HTML color code: #FF00CC | RGB color: 255 0 204 |
| HTML color code: #FF66CC | RGB color: 255 102 204 |
| HTML color code: #660033 | RGB color: 102 0 51 |
| HTML color code: #993366 | RGB color: 153 51 102 |
| HTML color code: #CC0066 | RGB color: 204 0 102 |
| HTML color code: #FF0099 | RGB color: 255 0 153 |
| HTML color code: #FF3399 | RGB color: 255 51 153 |
| HTML color code: #FF99CC | RGB color: 255 153 204 |
| HTML color code: #663333 | RGB color: 102 51 51 |
| HTML color code: #996666 | RGB color: 153 102 102 |
| HTML color code: #CC3366 | RGB color: 204 51 102 |
| HTML color code: #FF0066 | RGB color: 255 0 102 |
| HTML color code: #FF3366 | RGB color: 255 51 102 |
| HTML color code: #FF6699 | RGB color: 255 102 153 |
| HTML color code: #330000 | RGB color: 51 0 0 |
| HTML color code: #990033 | RGB color: 153 0 51 |
| HTML color code: #993333 | RGB color: 153 51 51 |
| HTML color code: #CC3333 | RGB color: 204 51 51 |
| HTML color code: #CC6666 | RGB color: 204 102 102 |
| HTML color code: #CC9999 | RGB color: 204 153 153 |
| HTML color code: #CC0033 | RGB color: 204 0 51 |
| HTML color code: #FF0033 | RGB color: 255 0 51 |
| HTML color code: #FF3333 | RGB color: 255 51 51 |
| HTML color code: #FF6666 | RGB color: 255 102 102 |
| HTML color code: #FF9999 | RGB color: 255 153 153 |
| HTML color code: #FFCCCC | RGB color: 255 204 204 |
| HTML color code: #990000 | RGB color: 153 0 0 |
| HTML color code:#CC0000 | RGB color: 204 0 0 |
| HTML color code: #FF0000 | RGB color: 255 0 0 |
| HTML color code: #FF3300 | RGB color: 255 51 0 |
| HTML color code: #CC3300 | RGB color: 204 51 0 |
| HTML color code: #FF6633 | RGB color: 255 102 51 |
| HTML color code: #660000 | RGB color: 102 0 0 |
| HTML color code: #993300 | RGB color: 153 51 0 |
| HTML color code: #CC6633 | RGB color: 204 102 51 |
| HTML color code: #FF6600 | RGB color: 255 102 0 |
| HTML color code: #FF9966 | RGB color: 255 153 102 |
| HTML color code: #FFCC99 | RGB color: 255 204 153 |
| HTML color code: #663300 | RGB color: 102 51 0 |
| HTML color code: #996633 | RGB color: 153 102 51 |
| HTML color code: #CC6600 | RGB color: 204 102 0 |
| HTML color code: #CC9966 | RGB color: 204 153 102 |
| HTML color code: #FF9933 | RGB color: 255 153 51 |
| HTML color code: #FF9900 | RGB color: 255 153 0 |
| HTML color code: #996600 | RGB color: 153 102 0 |
| HTML color code: #CC9933 | RGB color: 204 153 51 |
| HTML color code: #CC9900 | RGB color: 204 153 0 |
| HTML color code: #FFCC33 | RGB color: 255 204 51 |
| HTML color code: #FFCC00 | RGB color: 255 204 0 |
| HTML color code: #FFCC66 | RGB color: 255 204 102 |
| HTML color code: #CCCC00 | RGB color: 204 204 0 |
| HTML color code: #FFFF00 | RGB color: 255 255 0 |
| HTML color code: #FFFF33 | RGB color: 255 255 51 |
| HTML color code: #FFFF66 | RGB color: 255 255 102 |
| HTML color code: #FFFF99 | RGB color: 255 255 153 |
| HTML color code: #FFFFCC | RGB color: 255 255 204 |
This table includes 216 safe html color codes. Each color has a value in RGB for specifying color in graphic editors and HEX for specifying color in html pages.
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 system 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.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
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 wheel
Colors based on hexadecimal values do not have to be empirically selected. Suitable for this purpose graphic editor, able to work with different color models, for example, Adobe Photoshop. 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 in different browsers in my own way. 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.
| Color name | Color | Description | Hexadecimal value |
|---|---|---|---|
| black | Black | #000000 | |
| blue | Blue | #0000FF | |
| fuchsia | Light purple | #FF00FF | |
| gray | Dark gray | #808080 | |
| green | Green | #008000 | |
| lime | Light green | #00FF00 | |
| maroon | Dark red | #800000 | |
| navy | Dark blue | #000080 | |
| olive | Olive | #808000 | |
| purple | Dark purple | #800080 | |
| red | Red | #FF0000 | |
| silver | Light gray | #C0C0C0 | |
| teal | Blue-green | #008080 | |
| white | White | #FFFFFF | |
| yellow | Yellow | #FFFF00 |
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 value of the text attribute is set to: hexadecimal number, and bgcolor using reserved keyword teal.
