Color in styles can be specified in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA format. Color in styles can be specified in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA Color format
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. Thus, the names Gray and Gray represent the 50% gray color code #808080, and the word Magenta is a synonym for the HTML color Fuchsia, corresponding to the hexadecimal code #FF00FF. Also synonymous are the words Aqua and Cyan, they correspond to the code #00FFFF.
|
|
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 on the English language. The most common keywords: black, white, red, green, blue, etc.:
Text color – red
The most popular colors of the Consortium standard World Wide Web(English World Wide Web Consortium, W3C):
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.
HTML colors are indicated by six characters after the slash character - for example, #000000. These six symbols represent the proportions of the different colors (Red, Green, Blue) in the final color. On your computer monitor, the image is formed from huge amount points called pixels. Each pixel is a small light source, let's call it a "flashlight", which in turn consists of three flashlights - red, green and blue. By decreasing or increasing the intensity of the glow of individual colored flashlights, we obtain the desired color.
HTML color codes
Colors in HTML are represented by a hexadecimal (HEX) notation of red, blue, and green (RGB).
The smallest color value is 0 (hexadecimal 00). The highest color value is 255 (hex FF).
The hexadecimal color value is three digits starting with the # sign.
Color codes (meanings)
Color | HEX code | RGB code |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
16 million shades
Combining red, blue, and green with values ranging from 0 to 255 for the percentage of each color results in a total of over 16 million shades (256 x 256 x 256).
Majority modern monitors capable of displaying at least 16,384 different shades (LCD monitors are generally capable of displaying 262 thousand 16 million (updated October 2013) colors, and CRT monitors can display a virtually unlimited number of colors).
The color table below shows the change in the proportion of red from 0 to 255 with zero values for blue and green:
Red | HEX code | RGB code |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Shades of Gray
To obtain shades of gray, equal shares of all colors are used. To make it easier for you to choose the right color, we provide you with gray shade codes
Shades of Gray | HEX code | RGB code |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128,128,128) | |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
#C0C0C0 | rgb(192,192,192) | |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
#D8D8D8 | rgb(216,216,216) | |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
#F8F8F8 | rgb(248,248,248) | |
#FFFFFF | rgb(255,255,255) |
Cross-browser (all browsers) html color names
A collection of 150 color names in html, supported in all browsers.
Standardized color names
The W3C lists 16 valid color names for HTML and CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon (chestnut), navy (ultramarine), olive (olive), purple (purple), red (red), silver (silver), teal (gray), white (white) and yellow (yellow).
When using colors not included in this list, it is more correct to use their hexadecimal (HEX) code or RGB code.
Safe colors
Several years ago, when computers could support a maximum of 256 different colors, a list of 216 "Web Safe Colors" was proposed, with 40 colors reserved for the system.
This 216-color palette was created to properly display colors in the 256-color palette mode.
Now this doesn't matter because most computers around the world support millions of shades of color. In any case, here is a list of these colors:
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 |
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 accept 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 the 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.