Setting text color in CSS. Ways to represent colors

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 short note#fff , 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 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, color hex values ​​are not case sensitive - you can use both uppercase and lower case, 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, the 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 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 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 the browser does not support it Internet 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 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.

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 version 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 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 of the color specified using 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 is worth considering that the IE8 browser and its earlier versions do not support RGBA, HSL and HSLA formats.