The RGB code for red color is written as. Setting text color in CSS

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 represents the hexadecimal color code. 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 (RGB color 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, and the third - the blue level. 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, hex color 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:

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). The higher the 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 color 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 a suitable 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 a color, but also an entire color scheme. A great example is the Adobe Color CC service.

RGBA color model

You can set a color in RGBA format in much the same way 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 intended for the IE8 browser, which will display the text in the desired 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 the coordinates of the HSL color model (Hue, 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. A saturation value of zero will result in a gray color, no matter what the hue value is. 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.

The HSLA color model 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, specifying the desired 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:

These colors are supported by all browsers. In addition to these, there are about 130 additional keywords for different shades of colors. A complete table of 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, the color of 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 of a 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 and HSLA formats). It should be borne in mind that the IE8 browser and its early versions do not support RGBA, HSL and HSLA formats.

In this article we will get acquainted with the capabilities of HTML and CSS to change the color of text on website pages. Several options will be considered. For each individual case, its own specific method is convenient.

To begin with, we note that all colors can be specified in three formats:

• Color name (red, blue, green, etc.)
• Hexadecimal format (#104A00, #0F0, etc.)
• rgba format (rgba(0,0,0,0.5), etc.)

Our website presents the full palette and names of html colors for the site, where you can choose the appropriate color.

Method 1. Via html tag