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 on 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) |
Table (palette) 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 English color names (which can be used as values) supported by all browsers and their hexadecimal values. All colors listed are “safe”, meaning they will 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 | |
| Royal Blue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| Cadet Blue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| Slate Blue | #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 |
Hexadecimal numbers are used 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. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal system corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue. It is allowed to use the abbreviated form #rgb, where each character should be doubled. Thus, the entry #fe0 should be regarded as #ffee00.
By name
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browsers support some colors by their name. In table 1 shows the names, hexadecimal code, values in RGB format, HSL and description.
| Name | Color | Code | RGB | HSL | Description |
|---|---|---|---|---|---|
| white | #ffffff or #fff | rgb(255,255,255) | hsl(0.0%,100%) | White | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | Grey | |
| gray | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Dark gray | |
| black | #000000 or #000 | rgb(0,0,0) | hsl(0.0%,0%) | Black | |
| maroon | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | Dark red | |
| red | #ff0000 or #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Red | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Orange | |
| yellow | #ffff00 or #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Yellow | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Olive | |
| lime | #00ff00 or #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Light green | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Green | |
| aqua | #00ffff or #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blue | |
| blue | #0000ff or #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blue | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Dark blue | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blue-green | |
| fuchsia | #ff00ff or #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Using RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
You can define a color using the red, green, and blue values in decimal terms. Each of the three color components takes a value from 0 to 255. It is also permissible to specify the color as a percentage, with 100% corresponding to the number 255. First, specify the rgb keyword, and then specify the color components in parentheses, separated by commas, for example rgb(255 , 128, 128) or rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The RGBA format is similar in syntax to RGB, but includes an alpha channel that specifies the transparency of the element. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is semi-transparent.
RGBA was added to CSS3, so CSS code must be validated against this version. It should be noted that the CSS3 standard is still under development and some features may change. For example, a color in RGB format added to the background-color property is validated, but one added to the background property is no longer valid. At the same time, browsers quite correctly understand the color for both properties.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The name of the HSL format is derived from the combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the color value on the color wheel (Fig. 1) and is given in degrees. 0° corresponds to red, 120° to green, and 240° to blue. The hue value can vary from 0 to 359.
Rice. 1. Color wheel
Saturation is the intensity of a color and is measured as a percentage from 0% to 100%. A value of 0% indicates no color and a shade of gray, 100% maximum value saturation.
Lightness specifies how bright the color is and is specified as a percentage from 0% to 100%. Low values make the color darker, and high values make the color lighter; extreme values of 0% and 100% correspond to black and white.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The HSLA format is similar in syntax to HSL, but includes an alpha channel to specify the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is semi-transparent.
RGBA, HSL, and HSLA color values have been added to CSS3, so please check your code for version validity when using these formats.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Warning
All lion catching methods listed on the site are theoretical and based on computational methods. The authors do not guarantee your safety when using them and disclaim any responsibility for the results. Remember, a lion is a predator and a dangerous animal!
Result this example shown in Fig. 2.
Rice. 2. Colors on the web page
This page contains a table with keywords that can be used to denote colors in such Web developer languages as: HTML, CSS, JavaScript, Flash, etc.
In the old specifications for the WC3 concern, only 16 were specified keywords, which were used to set colors in HTML and CSS. In further, more modern specifications, another 130 keywords were added to indicate color names. The following table contains the color names and the hex and RGB codes they correspond to.
According to CSS rules, color names are not case sensitive. The color entries IndianRed and indianred are equivalent.
It is also worth noting that of the 146 keywords in the table, there are actually fewer colors in it. This is because some keywords refer to the same color. So the names Gray and Gray denote a 50 percent gray color with code #808080, and the word Magenta is a synonym HTML colors Fuchsia, corresponding to hexadecimal code #FF00FF. Also synonymous are the words Aqua and Cyan, they correspond to the code #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The CSS color module details values that allow authors to define the colors and opacity of html elements, as well as the values of the color property.
color property
1. Priority colors: color property
The property sets the font color using various systems color rendition. The property describes the color of the element's text content. Additionally, it is used to provide a potential indirect value (currentColor) for any other properties that take color values.
The property is inherited.
2. Color values
2.1. Main Keywords
The list of main keywords includes the following meanings:
| Name | HEX | RGB | Color |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
Color names are not case sensitive.
Syntax
Color: teal;
2.2. Numeric color values
2.2.1. RGB model colors
The hexadecimal format of an RGB value is a # sign followed immediately by three or six hexadecimal characters. The three-digit RGB notation #rgb is converted to the six-digit form #rrggbb by copying the digits rather than adding zeros. For example, #fb0 expands to #ffbb00 . This ensures that white #ffffff can be specified in the short #fff entry, and removes any dependencies on display color depth.
The format of an RGB value in functional notation is rgb(, followed by a comma-separated list of three numeric values (either three integer values or three percentage values), followed by a symbol). The integer value 255 corresponds to 100% and F or FF in hexadecimal notation:
Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF
Space characters are allowed around numeric values.
