Blue rgb color. Color in styles can be specified in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA format
As you know, color can affect a person’s state: both mental and physical. Every day, while browsing websites on the Internet, the eyes evaluate millions of colors and shades. A web designer who is familiar with the psychology of color can manipulate the visitor's mood to achieve certain goals.
This is due to the fact that some shades calm, and some, on the contrary, excite. Next we will talk about how color is synthesized and displayed using computer technology.
RGB is a color model that represents a method of obtaining all colors and their shades by mixing in various proportions three main components, which are:
- Red color ( Red);
- green color ( Green);
- Blue colour ( Blue).
This is where the abbreviated name RGB comes from. These colors were chosen as the main ones for a reason: the reason is the physiology of the retina of the human eye, and how it perceives them:
The RGB model remains the most popular today and is used to reproduce colors on TV screens and computer monitors. Since manufacturers endow their products with different characteristics, in 1996 a unified RGB-based color synthesis system called sRGB was created, on which Microsoft and HP worked together.
Numerical representation of color
As mentioned earlier, RGB colors are formed by mixing primary colors. To describe the intensity of each of them, a scheme was adopted in which color is represented by the range 0-255 (8 bits), which in hexadecimal notation corresponds to 00-FF.
That is, the primary colors will look like this:
- Red – RGB (255,0,0);
- Green – RGB (0,255,0);
- Blue – RGB (0,0,255);
If the color intensity takes values less than 255, then different shades of red, green and blue are obtained. The following is a table of their gradations, as well as the hexadecimal values of each of the shades:
RGB color tables
Naturally, in addition to gradations of primary colors, there are mixed ones, and their number is quite large. Therefore, a table of RGB colors was created, which presents all existing shades, as well as their names and numerical representations ( in decimal and hexadecimal form).
You can view it here. This table makes life a lot easier for web designers, since in a few seconds you can find the required shade and find out its numerical representation.
Safe RGB color palette
However, at some point there was a problem with displaying colors in different browsers, and to solve it, the so-called “safe” palette of RGB colors was compiled, which were derived by mathematical calculations.
When the browser can't display a color correctly, it will try to get something close to what it needs by mixing adjacent colors, and most likely the result will be completely unacceptable:
By using RGB color codes from this palette, a web developer can have peace of mind regarding the display of colors on the pages of their website when viewed using different browsers, platforms and monitors. Although at the moment the table of safe colors is losing its relevance ( technological progress still does not stand still), when using it you can, as they say, sleep peacefully.
Gold color in RGB model
The word “gold” was first used at the beginning of the 14th century to describe the color of a chemical element called Aurum - gold. In the RGB model, the color gold is represented by the following numerical values:
- RGB (255, 215, 0) – decimal system;
- HEX #FFD700 – hexadecimal system.
Beige color in RGB model
Beige color occupies a rather significant place in history, even if it is not the most expressive. Many cultural monuments, especially ancient sculptures, were made of soapstone and soapstone, which have a beige tint. In the RGB model, the color beige has the following numeric representations.
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.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML colors
HTML colors and ways to specify them
In HTML, there are two ways to specify a color:
1. Using the color name,
2. Using the RGB system, where colors are specified in hexadecimal format.
Color name
Name colors in HTML indicated by English words, such as red or green. The color name acts as the value of the HTML tag attribute. There are a lot of flower names, in this article we will consider only the main ones.
Typically, two attributes are used in HTML to set a color:
1. Attribute color="color_name" - text color,
2. Attribute bgcolor="color_name" - background color.
Examples of using color attributes:
color="red" - assign a red color to the text,
bgcolor="green" - assign a green color to the background.
Table of basic HTML color names:
| Color name | His appearance | Translation |
|---|---|---|
| white | White | |
| ivory | Ivory | |
| silver | Silver | |
| gray | Grey | |
| black | Black | |
| maroon | Maroon | |
| red | Red | |
| orange | Orange | |
| gold | Gold | |
| yellow | Yellow | |
| olive | Olive | |
| lime | Lime | |
| green | Green | |
| aqua | Sea wave | |
| blue | Blue | |
| navy | Navi | |
| teal | Turquoise | |
| fuchsia | Magenta | |
| purple | Purple |
Hexadecimal number system
In everyday life, we use the decimal number system from 0 to 9. Programmers and designers often use the hexadecimal number system from 0 to 15, where:
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F
Almost every color and shade visible to our vision can be written in the hexadecimal system, for example, the red color red in the hexadecimal system will be equal to ff0000
color="red" - red color, by name,
color="#ff0000" — red color, in hexadecimal number system.
In HTML, a hexadecimal number is preceded by a hash sign # in the attribute value.
RGB
Before you start specifying colors in HTML using the hexadecimal number system, you first need to learn about such a thing as R G B
RGB is an abbreviation for the words R ed G reen B lue (Red Green Blue).
A color in HTML, written in hexadecimal, consists of three blocks of numbers 00 00 00, where each block is responsible for one of the RGB colors, the first block for red, the second for green, and the third for blue. Numbers can range from 00 to ff.
Where, ff is 255 in decimal notation.
RGB scheme:
Red - from 00 to ff
Green - from 00 to ff
Blue - from 00 to ff
As a result, we get a six-digit number 000000, where the first two numbers are responsible for the red color, the second two numbers are responsible for the green color, and the third two numbers are responsible for the blue color.
If we want to get a red color, then we write ff0000, green color 00ff00, blue color 0000ff. For example, if we want to get a dark red color, then we need to reduce the first block of numbers and instead of ff (which is equal to 255 in decimal number system), write for example 96 (which is equal to 150 in decimal notation).
For clarity, we give examples of colors and their hexadecimal code:
Mixing colors in HTML
If you didn’t miss drawing classes at school, you probably remember that by evenly mixing red and green, you can get yellow,
when you add a little green to red you can get orange, etc.
Hexadecimal and RGB colors can also be mixed:
By experimenting with the hexadecimal number system and RGB, you will eventually get the hang of it and be able to choose the color you want.
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 specifies the font color using various color rendering systems. 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 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.
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.
