Lavender color html. HTML tutorial. RGB colors. Safe palette colors. Color scheme in html
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 safest and most 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.
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 |
>>Color management
Hexadecimal RGB color values
Methods of describing and processing color differ from each other in what final representation they are intended for. Let us compare, for example, the representation of colors for printing and for computer monitors. In the first case, the basis is taken white the color of the paper on which 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 paints they give white paper. If we add black color to them, we get CMYK-a method of transmitting color when the required color is obtained by subtracting the missing colors from white.
In the second case, the basis is taken 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 screen color, and any of the required colors is given by the ratio of each of the three colors. In this case we will get RGB-method of color transmission. Primary colors can range 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, but sixteen - hence the name. Accordingly, there can only be non-repeating variants of combinations of two digits - 256 , to continue the series of numbers after 9 letters from A before F, therefore, the series 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 specified by three hexadecimal numbers, each of which consists of two digits. The first number determines the intensity red colors, medium- green, last thing- blue colors. All numbers can take values in the range 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 of color or black is given as #000000 .
In the form below you can specify any hexadecimal values for each of the three colors and see the result of mixing them by clicking in the output field.
Examples of some hexadecimal RGB color values: gradations of red, blue and green.
view | code | view | code | view | code | view | code | view | code | view | 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 Color Using String Literals
For ease of use, some colors and their combinations were assigned 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 | ||||
Aliceblue | Antiquewhite | Aqua | Aquamarine | ||||
Azure | Beige | Bisque | Blanchedalmond | ||||
Blueviolet | Brown | Burlywood | Cadetblue | ||||
Chartreuse | Chocolate | Coral | Cornflowerblue | ||||
Cornsilk | Crimson | Cyan | Darkblue | ||||
Darkcyan | Darkgoldenrod | Darkgray | Darkgreen | ||||
Darkkhaki | Darkmagenta | darkolivegreen | Darkorange | ||||
Darkorchid | Darkred | Darksalmon | Darkseagreen | ||||
Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
Firebrick | Floralwhite | Forestgreen | Fuschia | ||||
Gainsboro | Ghostwhite | Gold | Goldenrod | ||||
Gray | Greenyellow | Honeydew | Hotpink | ||||
Indianred | Indigo | Ivory | Khaki | ||||
Lavender | Lavenderblush | Lemonchiffon | Lightblue | ||||
Lightcoral | Lightcyan | Lightcoldenrodyellow | Lightgreen | ||||
Lightgray | Lightpink | Lightsalmon | Lightseagreen | ||||
Lightskyblue | Lightslategray | Lightsteelblue | Lightyellow | ||||
Lime | Limegreen | Linen | Magenta | ||||
Maroon | Mediumaquamarine | Mediumblue | Mediumorchid | ||||
Mediumpurple | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
Mediumturquoise | Mediumvioletred | Midnightblue | Mintcream | ||||
Mistyrose | Navajowhite | Navy | Oldlace | ||||
Olive | Oliverab | Orangered | Orchid | ||||
Palegoldenrod | Palegreen | Paletteurquoise | Palevioletred | ||||
Papayawhip | Peachpuff | Peru | Pink | ||||
Plum | Powderblue | Rosybrown | Royalblue | ||||
Saddlebrown | Seagreen | Seashell | Sienna | ||||
Silver | Skyblue | Slateblue | Slategray | ||||
Snow | Springgreen | Steelblue | Tan | ||||
Teal | Thistle | Tomato | Turquoise | ||||
Violet | Wheat | Whitesmoke | Yellowgreen |
Using a safe color palette
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 to the system settings and monitor capabilities, by independently mixing colors and replacing them. As a result, sometimes the user does not see exactly what the webmaster wanted to show him. A way out of this situation was found in the use of a palette, each color of which is guaranteed to be rendered equally by all browsers on different platforms. This is the so-called guaranteed palette, also called safe palette. This palette includes colors whose color components take the following values: 00 ,33 ,66 ,99 , CC,FF, in all possible ways 216 their combinations.
view | code | view | code | view | code | view | code | view | code | view | 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 |
In HTML, color can be specified in three ways:
Setting a color in HTML by its name
Some colors can be specified by their name, using the color name in English as the value. The most common keywords: black, white, red, green, blue, etc.:
Text color – red
The most popular colors of the World Wide Web Consortium (W3C) standard:
Color | Name | Color | Name | Color | Name | Color | Name |
---|---|---|---|---|---|---|---|
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Example of using different color names:
Example: specifying a color by its name
- Try it yourself "
Header on red background
Header on orange background
Heading on lime background
White text on blue background
Header on red background
Header on orange background
Heading on lime background
White text on blue background
Specifying Color Using RGB
When displaying different colors on a monitor, the RGB palette is used as a basis. Any color is obtained by mixing three basic ones: R - red, G - green, B - blue. The brightness of each color is given by one byte and can therefore take values from 0 to 255. For example, RGB(255,0,0) is displayed as red since 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 parameter indicates the brightness level of the corresponding color. For example: the values rgb(127, 255, 127) and rgb(50%, 100%, 50%) will set the same medium green color:
Example: Specifying Color Using 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 the 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 represented by combining two characters into one value. For example, the highest number 255 in decimal corresponds to the highest FF value in hexadecimal. Unlike the decimal system, a hexadecimal number is preceded by a hash symbol. # , for example, #FF0000 is shown as red because red is set to its highest value (FF) and the rest of the colors are set to their minimum value (00). Signs after the hash symbol # You can type in both uppercase and lowercase. The hexadecimal system allows you to use the abbreviated form #rgb, where each character is equivalent to double. Thus, the entry #f7O should be regarded as #ff7700.
Example: HEX Color
- 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 common colors (name, HEX and RGB):
English name | Russian name | Sample | HEX | RGB | ||
---|---|---|---|---|---|---|
Amaranth | Amaranth | #E52B50 | 229 | 43 | 80 | |
Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
Aqua | Blue-green | #00FFFF | 0 | 255 | 255 | |
Azure | Azure | #007FFF | 0 | 127 | 255 | |
Black | Black | #000000 | 0 | 0 | 0 | |
Blue | Blue | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Bondi beach water | #0095B6 | 0 | 149 | 182 | |
Brass | Brass | #B5A642 | 181 | 166 | 66 | |
Brown | Brown | #964B00 | 150 | 75 | 0 | |
Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
Dark spring green | Dark spring green | #177245 | 23 | 114 | 69 | |
Emerald | Emerald | #50C878 | 80 | 200 | 120 | |
Eggplant | Eggplant | #990066 | 153 | 0 | 102 | |
Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
Gold | Gold | #FFD700 | 250 | 215 | 0 | |
Gray | Grey | #808080 | 128 | 128 | 128 | |
Green | Green | #00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
Jade | Jade | #00A86B | 0 | 168 | 107 | |
Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
Navy | Dark blue | #000080 | 0 | 0 | 128 | |
Ochre | Ocher | #CC7722 | 204 | 119 | 34 | |
Olive | Olive | #808000 | 128 | 128 | 0 | |
Orange | Orange | #FFA500 | 255 | 165 | 0 | |
Peach | Peach | #FFE5B4 | 255 | 229 | 180 | |
Pumpkin | Pumpkin | #FF7518 | 255 | 117 | 24 | |
Purple | Violet | #800080 | 128 | 0 | 128 | |
Red | Red | #FF0000 | 255 | 0 | 0 | |
Saffron | Saffron | #F4C430 | 244 | 196 | 48 | |
Sea Green | Green sea | #2E8B57 | 46 | 139 | 87 | |
Swamp green | Bolotny | #ACB78E | 172 | 183 | 142 | |
Teal | Blue-green | #008080 | 0 | 128 | 128 | |
Ultramarine | Ultramarine | #120A8F | 18 | 10 | 143 | |
Violet | Violet | #8B00FF | 139 | 0 | 255 | |
Yellow | Yellow | #FFFF00 | 255 | 255 | 0 |
Color codes (background) by saturation and hue.
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
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) |
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.
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 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.
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 | 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 text attribute is set to a hexadecimal number, and the bgcolor attribute is set to the reserved keyword teal .