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 | |
Dark Blue | #00008B | |
MediumBlue | #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 | |
Cadet Blue | #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 | |
SkyBlue | #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 | |
Light Blue | #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 |
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 keywords were specified, with the help of which colors were set 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.
|
|
>>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 have values ranging from 0
to 255
, or from 0%
to 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 to 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- blue colors. All numbers can take values in the range from 00 to 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 specify 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 suit system settings and the capabilities of the monitor, 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 |
Color in CSS can be set in different ways:
- by name,
- by hexadecimal value,
- in RGB and RGBA formats,
- in HSL and HSLA formats.
Set color by name
Browsers support specifying some colors for elements by name. This table contains some keywords (English color names) used to specify color properties, RGB code, hexadecimal code (HEX) and HSL code.
Name | Color | RGB | HEX | HSL | Description |
---|---|---|---|---|---|
white | rgb(255, 255, 255) | #ffffff or #fff | hsl(0, 0%, 100%) | White | |
silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Grey | |
gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Dark gray | |
black | rgb(0, 0, 0) | #000000 or #000 | hsl(0, 0%, 0%) | Black | |
maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Dark red | |
red | rgb(255, 0, 0) | #ff0000 or #f00 | hsl(0, 100%, 50%) | Red | |
orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Orange | |
yellow | rgb(255, 255, 0) | #ffff00 or #ff0 | hsl(60, 100%, 50%) | Yellow | |
olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Olive | |
lime | rgb(0, 255, 0) | #00ff00 or #0f0 | hsl(120, 100%, 50%) | Light green | |
green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Green | |
aqua | rgb(0, 255, 255) | #00ffff or #0ff | hsl(180, 100%, 50%) | Blue | |
blue | rgb(0, 0, 255) | #0000ff or #00f | hsl(240, 100%, 50%) | Blue | |
navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Dark blue | |
teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Blue-green | |
fuchsia | rgb(255, 0, 255) | #ff00ff or #f0f | hsl(300, 100%, 50%) | Pink | |
purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
This is an example of the use of color names, the color names are taken from the extended table.
Here's how this code works:
Setting color using RGB
RGB is an additive color model. In English addition- addition. RGB is an abbreviation of the English words: Red, Green, Blue - red, green, blue). From this it is clear that in the RGB model, colors are synthesized by adding three colors (red, green, blue) in different quantities.
By mixing red, green and blue colors you can get several million shades. All possible combinations are stored in computer memory.
Get to the point.
To set properties in this format, use the notation rgb(r, g, b) , where r, g, b are the three channels for each color (red, green, blue). Values for each channel are set in the range from 0 to 255.
Example code.
To make everything clear, here is a code example:
This is how this example should work:
Fig.1. Colors in RGB.Explanations for example.
At the beginning of the page we create the div.rgb class, it is needed for blocks created by the tag
Next, in the code we set the background color of the block
Try editing this example and specifying your own values, for example rgb(100, 100, 100) .
Setting color using RGBA
CSS3 has a new tool for working with color - the RGBA format. It can be called an evolution of the RGB model, but with the addition of one new channel - the A or alpha channel. This channel sets the transparency of the color. Its values are set in the range from 0 to 1. A value of 0 corresponds to full transparency, 1 - full opacity (the color will be the same as it was specified in the first three RGB channels), and intermediate values like 0.4 or 0.6 - translucency to varying degrees.
Example code.
Here's how it will work:
This code is visually similar to the following, which uses the RGB model to specify a color value:
Here is his result:
An alpha channel value equal to zero makes any color invisible - absolutely transparent; a value equal to one translates the color in the RGB code without changes. The rgba(255,0,0,1.0) property shows the color red rgb(255, 0, 0) .
By hexadecimal value (HEX code)
In everyday life, we use the decimal counting system. Its origins are very simple - we have ten fingers on our hands, and counting on our fingers has been convenient in life. If the decimal system has ten digits: from 0 to 9, and the number 10 is the next digit, then the hexadecimal number system has 16 digits, and the next digit is the number 16.
To indicate color codes, ordinary decimal digits from 0 to 9 are used as hexadecimal digits, and Latin letters from A to F are used to indicate numbers from 10 to 15, that is, (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). For clarity, let's put this in a table:
To write hexadecimal numbers greater than F (15 in the decimal system), as in the decimal system, they also use the combination of two digits, but already hexadecimal, which is obvious. Thus, to write the decimal number 255 in hexadecimal notation, use FF notation.
The hexadecimal system is more understandable to the computer, and it processes values set by hexadecimal value faster.
To specify a color in hexadecimal, precede the numeric value with a “#” sign, example: #FFC0CB. The value #FFC0CB itself consists of three hexadecimal digits FF, C0 and CB. The meaning of this entry is the same as setting the color in the RGB format (rgb(r, g, b)) - each hexadecimal digit in the HEX code indicates the color saturation in its channel of the RGB model.
This code will display the following elements:
And here is a picture with the result from the section "Setting colors using RGB" on this page above.
Fig.1. Colors in RGB.We see that the colors are identical.
A shortened notation of the HEX color code is allowed: a 6-digit number can be written as a 3-digit number. This is only valid when two digits in the color value of one channel are repeated.
That is, the following abbreviation is acceptable:
For example, the color #ff22aa can be written as #f2a, or the color #44aa22 can be written as #4a2.
Setting Color Using HSL
Appeared in CSS3 new format to indicate color.
The HSL format is an abbreviation for the English words: Hue (hue), Saturate (saturation) and Lightness (lightness).
Hue in HSL is the value of a color on a special color wheel (Figure 2) and is specified in degrees. If we draw analogies with the RGB model, then 0° corresponds to red, 120° corresponds to green, and 240° corresponds to blue.
The hue value will change in the range from 0 to 359.
Figure 2. HSL color wheel.
The second value - saturation (Saturate) is set as a percentage. At 100% saturation, the color is as “juicy” as possible; as the saturation indicator moves towards 0%, the color becomes duller and fades into gray.
The third value, Lightness, is also set as a percentage. The higher the percentage, the brighter the color will be. The extreme values of 0% and 100% will indicate black (no light) and white (overexposed) colors, respectively, and it does not matter which color from the color wheel was selected in the first channel. The optimal color brightness value is 50%.
Setting Color Using HSLA
The HSLA format is related to HSL, just as RGB is to RGBA. In the HSLA format, as in RGBA, an alpha channel is added, which is responsible for color transparency.
Color specified in HSL format is easier to read. We can say that it is intuitive. For example, the code hsl(120,60%,50%) can represent the final color if there is a picture of the HSL color wheel in memory. The same cannot be said about the RGB and HEX formats; the color code specified in these formats becomes clear only after it is visualized on the monitor.
New formats in CSS3 (HSL, HSLA and RGBA) work in browsers starting from versions: IE 9.0, Opera 10.0 Firefox 3.0. How can I make styles work on older browsers?
Somebloсk ( background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) )
When using this code in older browsers, the background color for the .somebloсk class, although it will not use an alpha channel, will be displayed in RGB format.
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 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, RGB, HSL values 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 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 element's transparency. 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% is the maximum value for 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!
The result of this example is shown in Fig. 2.
Rice. 2. Colors on the web page