Gray color hex. Standard HTML Colors
In the first part of the book, we already demonstrated in some examples how to set the text color in CSS. There is nothing complicated here: you will need the color property and the value of the color you want to color the text with.
P ( color: #211C18; )
In our example, the value #211C18 means hexadecimal code colors. If you are already familiar with the hexadecimal number system, you can skip reading the next paragraph. We will also talk further about other ways to represent colors on the web - using color models (RGB, HSL) and keywords. This information will be useful for beginners and is recommended reading.
Hexadecimal colors (hex)
Hexadecimal number system ( hexadecimal, hex) is based on the number 16. To write a hexadecimal value, 16 characters are used: Arabic numerals from 0 to 9 and the first letters of the Latin alphabet (A, B, C, D, E, F). Color in hexadecimal format is written as three two-digit numbers from 00 to FF (they must be preceded by a hash symbol #), which corresponds to three components: Red, Green, Blue (color RGB model). In other words, a color entry can be represented as #RRGGBB, where the first pair of characters determines the red level, the second - the green level, the third - the level blue. The resulting color is a combination of these three colors.
Shorthand notation for hex colors
Some hexadecimal color values can be written in abbreviations. To do this, turn the entry like #RRGGBB into #RGB. This can be done when the hex number contains three pairs of identical characters.
The abbreviated form of notation is quite common, and for your reference we will provide several examples of abbreviations. By the way, color hex values are not case sensitive - you can use both uppercase and lowercase letters, it all depends on your desire and taste.
Examples of abbreviated notation for hex colors:
| HEX code | Shorthand notation |
|---|---|
| #FFDD66 | #FD6 |
| #8833FF | #83F |
| #333333 | #333 |
| #cccccc | #ccc |
RGB color model
The second way to specify colors in CSS is to use decimal RGB values (Red, Blue, Green). To do this, you need to write the keyword rgb after the color property, and then in parentheses and separated by commas - three numbers in the range from 0 to 255, each of which means the intensity of red, green and blue colors(r, g, b). How larger number, the more intense the color. For example, to get a bright green color, you need to write:
P ( color: rgb(0, 255, 0); )
But the yellowish-mustard tint has the following meaning:
Color: rgb(94, 81, 3); /* below is the same color, written in hexadecimal: */ color: #5E5103;
The value for black is written as (0, 0, 0) and for white as (255, 255, 255) . It is also possible to indicate these values as percentages. So, the number 255 corresponds to 100%, therefore, white can be set as follows:
Color: rgb(100%, 100%, 100%);
Where to look for color meanings
Perhaps you have a question: where do you get all these color meanings? There are many graphic editors and online services with which you can select colors and build color schemes. One of the most popular programs, in which you can select the appropriate color and get its RGB, hex value and more - Adobe Photoshop. As an alternative, there are special sites where you can easily choose not only the color, but also the whole color scheme. A great example is the Adobe Color CC service.
RGBA color model
Set color to RGB format A is possible almost the same as in RGB. The difference between RGBA and RGB is the presence of an alpha channel, which is responsible for the transparency of the color. Transparency is set using a number in the range from 0 to 1, where 0 means full transparency, and 1, on the contrary, means completely opaque. Intermediate values like 0.5 allow you to set a translucent appearance (shorthand notation is allowed, without a zero, but with a dot – .5). For example, to make the text colored and slightly transparent, you need to write the rgba keyword and the color value after the color property:
P ( color: rgba(94, 81, 3, .9); )
The disadvantage of RGBA is that it does not support Internet browser Explorer versions 8 and earlier. Especially for IE8, you can apply the following solution:
P ( color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); )
The first property in the example is for the IE8 browser, which will display text in the right color, but without transparency. And those browsers that understand RGBA will apply the second property to the element, with transparency.
HSL (HSLA) color models
You can also set color in CSS using coordinates color model HSL (Hue, Saturation, Lightness - tone, saturation, lightness). It is written like this:
P ( color: hsl(165, 100%, 50%); )
The first number in brackets means hue and is given in degrees (number range from 0 to 359). It will be easy to understand why degrees are used if you remember what the color wheel looks like:
The second and third numbers in brackets mean saturation and lightness, respectively. Their values are set in percentages from 0 to 100. The lower the saturation value, the more muted the color becomes. saturation value, equal to zero, will lead to gray color, it does not matter what value hue has. The lightness value allows you to specify the brightness of the color. Low values result in dark shades of color, high values result in light shades. A value of 100% for lightness means white, 0% means black.
Color model HSLA works almost the same as HSL, but, similar to RGBA, it has an alpha channel with which you can set the transparency of the color by specifying the required value in the range from 0 to 1:
P ( color: hsla(165, 100%, 50%, .6); )
HSL and HSLA are supported by all browsers except Internet Explorer versions 8 and earlier.
Standard HTML Colors
Another way to represent colors on the web is through keywords, which can be used to specify a color for an element. Example:
P(color:black;)
There are 16 standard colors that can be written in the value of the color property:
| Color Keyword | HEX code | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| maroon | #800000 | 128, 0, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| green | #008000 | 0, 128, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| teal | #008080 | 0, 128, 128 |
| blue | #0000FF | 0, 0, 255 |
| navy | #000080 | 0, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| white | #FFFFFF | 255, 255, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| black | #000000 | 0, 0, 0 |
These colors are supported by all browsers. In addition to these, there are about 130 additional keywords for different shades of colors. Full table these colors can be seen in the W3C reference book.
The use of such keywords is acceptable, but there is a risk that some word will not be accepted by the browser. Therefore, it is recommended to write down the hexadecimal color code instead of keywords.
Results
IN CSS color text is specified using the color property, and its value can be written in several ways - in hexadecimal (hex) format, in RGB or HSL format, or by specifying a keyword. To avoid incorrect display color specified using a keyword, it is better to specify its hex value.
It is also possible to set the element's transparency using an alpha channel ( RGBA formats and HSLA). It is worth considering that the IE8 browser and its earlier versions do not support RGBA, HSL and HSLA formats.
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, before hexadecimal number put the hash symbol #, 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 a color using the red, green, and blue 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 element's transparency. 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 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
I express my indirect gratitude to Google for the idea and offer the baton to my colleagues: it is necessary to share with readers foreign resources on web development from my RSS feed, which write in a substantive and interesting way on this issue. To reduce idle talk, you need to follow a number of simple provisions:
- On your blog, publish a translation (you can freely, with comments and additions) of an article from the presented resource.
- Translations, like their sources, should not be repeated to ensure coverage and diversity of information.
- It is important to mention the blogger from whom the good news was received and, if possible, pass the baton further.
- The timing of the relay is not set; There will definitely be someone who will stop this bacchanalia.
The original source of this post was one of Drew McLellan’s posts on the collective calendar blog 24ways. Let's go!
What is RGBA color?
I won’t reveal a secret if I say that the required color shade is created in CSS way mixing red green and blue in the required proportions. There is, however, one nuance - no matter what color we choose, it will always be solid and opaque.
CSS3 offers a couple of new ways to specify color, one of which is using the RGBA color model. The "A" in the acronym stands for "Alpha"; its value is responsible for the transparency of the color. With this model we can install not only necessary combination red, green and blue, but also determine how much the color “shines through.” Something similar can be observed when working with layers in Photoshop.
What is the opacity property for then?
The thing is that the definition of transparency for a color is different from the transparency setting for an element, set using the opacity CSS property. Let's look at an example.
We have a header h1 c certain colors for text and background, located on the page with the background image.
H1 ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); )
By setting the opacity property, you can apply transparency to the entire element:
H1 ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; )
The RGBA model provides us with a more flexible opportunity - to control only the color transparency, and not the entire element. For example, you can set transparency for just the background color:
H1 ( color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); )
Or leave the background unchanged and assign transparency only to the text:
H1 ( color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); )
It's probably less common to use rgb() syntax to specify a color than hexadecimal notation (like #fff), however, in in this case This is an absolute necessity because it is impossible to write an RGBA value in hexadecimal notation. Therefore, we set rgba() exactly like this:
Color: rgba(255, 255, 255, 0.5);
Just like in rgb(), the first three values are responsible for the combination of red, green and blue. They can take both integer values in the range of 0–255 and percentages in the range from 0 to 100%. The fourth value determines the degree of transparency, ranging from 0 (completely transparent) to 1 (completely opaque).
You can safely use this method anywhere you normally set colors in CSS: background and text colors, borders, outlines, etc.
Browser support
Most modern browsers (Firefox, Safari, Opera, Google Chrome) support RGBA colors, but not Internet Explorer.
There is nothing left to do but specify RGBA colors for browsers that support them, and come up with your own “crutches” for the rest.
CSS parsing works in browsers in such a way that if any unknown value is encountered when parsing the rules, it will be ignored. Let’s use this knowledge to render a normal opaque color for “non-understanding” browsers. To do this, just specify the color in the first ad in the format RGB, and the second set the color shade in the format RGBA— for browsers that support this color model.
H1 ( color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); )
In cases where you want to apply transparency to the background-color property, you can resort to using a PNG image with an alpha channel to achieve the exact same effect. Of course, this is a more expensive method, in contrast to “pure” CSS, since you will have to create your own PNG for each transparency level, but no fish, no fish.
We use the same principle as in the previous example: first we set the background for all browsers, and then we rewrite the line taking into account RGBA.
H1 ( background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; )
It should be noted that this design works because we use the shorthand form of background , which allows us to simultaneously set and background color And background image. Browsers encountering an unknown rgba() value will ignore the second line entirely and process the first declaration.
Something else
The main advantage of RGBA is the ability to create various design solutions without using drawings. The benefit here is not only lighter (and therefore faster) pages, but also time savings: sites using the mentioned technology are easier to create and maintain. Under the influence of Javascript or in response to user actions, values in CSS can easily change. In our case, drawings can make such transformations difficult.
Div ( color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); ) div:hover ( color: rgba(255, 255, 255, 1); background- color: rgba(142, 213, 87, 0.6 )
Smart use of transparency for border colors will help some elements on the page look more organic:
Div ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); )
In conclusion
As often happens, cutting-edge innovations in CSS areas support advanced browsers. Let's hope that the guys from Redmond realize something in life and join the majority.
Computer monitors, as well as screens mobile phones, smartphones and tablets, consist of thousands of small squares called pixels (if you look closely at the monitor, you can see them). When the screen is turned off, it is black because it does not emit light; when it is on, each pixel takes on a different color, which creates the image we see when looking at the screen.
When we set a color for the frame of an element, background or text, we set the color specifically for the pixels of which they are composed. There are two general approaches for specifying colors in CSS: by name or by value. The simplest is to specify a name: red is red, blue is blue, and so on, but CSS doesn't provide many color names from which to choose. On the other hand, specifying a color value implies a much larger selection of shades. There are several ways to specify a color value, the two most common being RGB and hexadecimal values. They have been part of CSS since the very first version and every web browser supports them. CSS3 introduced several more options for defining color: RGBA, HSL and HSLA, they are less cross-browser friendly, but the most latest versions browsers already support them.
Flower names
The simplest and most obvious way specifying a color in CSS means selecting the name of a predefined color from a set of keywords. A total of 147 keywords with color names are available: 17 names are standard colors that were introduced in the early HTML versions(white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive and teal), and 130 additional ones that were added in CSS2. You can see the entire list of available color names in the HTML section of our color table.
RGB and RGBA
The RGB system uses three numbers that describe the relative amounts of red, green, and blue that are mixed together to produce any hue. The numbers can range from 0 to 255. Consider the RGB code for the color dark purple: rgb(204, 51, 255), which can for example be applied to CSS property responsible for the font color:
Color: rgb(205, 51, 255);
The RGBA system adds another number that describes the transparency of the color, the value can range from 0 (fully transparent) to 1 (completely opaque). A value of 0.5 makes the color semi-transparent, consider a semi-transparent version of dark purple, defined using the RGBA system:
Color: rgba(204, 51, 255, 0.5);
You can see that the red, green and blue color values are similar to the RGB system. The fourth number - 0.5 is the degree of transparency. The letter "A" in RGBA stands for alpha channel, which is a term from graphic design meaning transparency.
RGBA colors convenient to use to create translucent elements that provide visibility to the elements located underneath them.
HSL and HSLA
The HSL (hue, saturation, lightness) system describes colors based on hue, saturation and lightness. Here is the same dark purple color specified in HSL format:
Color: hsl(285, 100%, 60%);
The first number is the hue, expressed in degrees from 0 to 360, which determines the color's position on the color wheel. The second number, saturation, defined as a percentage from 0% to 100%, indicates how saturated (bright) the color will be. The third number is lightness, it is defined as a percentage just like saturation, lightness indicates how light or dark the color will be.
The HSLA system, like RGBA, adds a fourth number ranging from 0 to 1 that determines how transparent the color should be. A value of 0.5 makes the color semi-transparent, consider the semi-transparent version of dark purple, defined using the HSLA system:
Color: hsla(285, 100%, 60%, 0.5);
Hexadecimal color values
The hexadecimal color code is the six characters following the # symbol:
Each set of two characters represents a number from 0 to 255. So the first two characters represent the color red, the next two represent the color green, and the last two represent the color blue. In this way, hexadecimal code is very similar to RGB, with the difference that here each color is specified in hexadecimal number system instead of decimal.
If each pair of digits consists of the same symbols, then the color value can be shortened. However, if the hexadecimal code looks like this, for example, #bbff10, then such an entry cannot be shortened.
Color: #f00; color: #ff0000;
Note: Browsers that do not support these color values (rgba, hsl and hsla) do not associate any color with the background or font, ignoring the declaration entirely. In this case, the element's background uses the default value (it becomes completely transparent), and the text uses either the default value (black color) or a color inherited from the parent element.
For older versions of browsers, you should add an additional rule that defines the color in RGB format, hexadecimal value or by name. This rule must appear before a rule specifying a color in RGBA, HSL, or HSLA format. This will provide a safety net for color because in CSS, if there are two rules that set a value for the same property, the rule set below in the code always takes precedence. This means that if the browser supports RGBA, HSL or HSLA formats, then it will use the second rule, and if it does not, it will use the first.