Color grid. Color in styles can be specified in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA 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 in Latin letters. Numbers greater than 15 in 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 determine a color using the red, green, and blue component values in decimal. 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 intermediate value like 0.5 - translucency.
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+ |
Name HSL format formed from a combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the value of a color color wheel(Fig. 1) and is specified 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 are 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
Minecraft Codes flowers, or Minecraft codes formatting, allow any player to add flowers and format text in every possible way directly in Minecraft. Color codes from &0-9 - to &a-f. Add them before your text. Messages from players can contain color codes that allow you to add color to your sentences.
Colors and formatting codes
The ampersand sign (&) followed by a hexadecimal number in messages signals the client to switch colors when displaying text. Additionally, text can be formatted with an & followed by a letter. You can add different colors to books, command blocks, server name, server description (motd), world names, signs, and even player names.
It's very easy to format your text in configs or in game using the color chart below. &r is used to reset all codes, i.e. &mAAA&rBBB will be displayed as AAA BBB.
We present a table of existing color codes in Minecraft for your convenience:
Code | Name | Technical Name | Symbol color | Symbol shadow color | ||||||
---|---|---|---|---|---|---|---|---|---|---|
R | G | B | Hex | R | G | B | Hex | |||
&0 | Black | black | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
&1 | Dark blue | dark_blue | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
&2 | Dark green | dark_green | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
&3 | Dark blue-green | dark_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
&4 | Dark red | dark_red | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
&5 | Dark purple | dark_purple | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
&6 | Gold | gold | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
&7 | Grey | gray | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
&8 | Dark gray | dark_gray | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
&9 | Blue | blue | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
&a | Green | green | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
&b | Blue-green | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
&c | Red | red | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
&d | Light purple | light_purple | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
&e | Yellow | yellow | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
&f | White | white | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Sometimes it is necessary underline, cross out, highlight any text. This is done using text formatting. It is used in exactly the same way as colors (we put before the text code, for example &lMinecraft = Minecraft.
For your convenience, below is a table of formatting codes:
Code | Name |
---|---|
&k | Magic text |
&l | Bold text |
&m | Strikethrough text |
&n | Underlined text |
&o | Italic text |
&r | Text without formatting |
Unfortunately, it is not yet possible to display taste sensations on the website. But this can be fully compensated for with color range. 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 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, code white in html it 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.
Gray color is indicated 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. In it to 147 key names color shades are given 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 everyone is equipped with such a tool. graphic editors. 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 only display without distortion a certain amount eight bit shades.
Then a great table was drawn safe colors. 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.
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 set 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.
Hexadecimal value can be taken from any graphic 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 |