The rgb code is purple. We set the color of the text. The color attribute of the font tag. Priority colors: the color property

In the first part of the book, in some examples, we have already demonstrated how to set the color of text in CSS. Nothing complicated here: you need a color property and a value for the color you want to color the text with.

P (color: # 211C18;)

In our example, # 211C18 means the hexadecimal color code. If you are already familiar with the hexadecimal number system, you can skip reading next paragraph... Also, below we will talk about other ways of representing colors on the web - using color models (RGB, HSL) and keywords... This information will be useful for beginners and is recommended for 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 numbers 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 (preceded by a hash # symbol), which corresponds to three components: Red, Green, Blue (RGB color model). In other words, the color notation can be represented as #RRGGBB, where the first pair of characters defines the level of red, the second is the level of green, and the third is the level of blue. The resulting color is a combination of these three colors.

Abbreviated notation for hex colors

Some hexadecimal color values ​​can be abbreviated. To do this, turn the #RRGGBB notation into #RGB. This can be done when there are three pairs of identical characters in the hex number.

The abbreviated form is quite common, and for your reference, we will give 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 shorthand hex colors:

RGB color model

The second way to specify color in CSS is to use decimal RGB values ​​(Red, Blue, Green). To do this, write the rgb keyword after the color property, and then, in parentheses and comma-separated, 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 would write:

P (color: rgb (0, 255, 0);)

But the yellowish-mustard hue has the following meaning:

Color: rgb (94, 81, 3); / * below - the same color, written in hexadecimal: * / color: # 5E5103;

Black is written as (0, 0, 0) and white is (255, 255, 255). It is also allowed to indicate these values ​​as a percentage. 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 values? 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 choose a suitable color and get its value RGB, hex and more - Adobe photoshop... Alternatively, there are special sites where you can easily pick up not only a color, but also a whole color scheme. A great example is the Adobe Color CC service.

RGBA color model

You can set a color in RGBA in much the same way as in RGB. The difference between RGBA and RGB is in the presence of an alpha channel, which is responsible for the transparency of the color. Specifies transparency using a number in the range 0 to 1, where 0 is fully transparent and 1 is fully opaque. Intermediate values ​​like 0.5 allow you to set a semi-transparent view (abbreviated notation is allowed, without zero, but with a dot - .5). For example, to make the text colored and slightly transparent, add the rgba keyword and the color value after the color property:

P (color: rgba (94, 81, 3, .9);)

The downside of RGBA is that it doesn't support it. Internet browser Explorer version 8 and earlier. Especially for IE8, the following solution can be applied:

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 render the text in the desired color, but without transparency. And those browsers that understand RGBA will apply a second property to the element, with transparency.

HSL color models (HSLA)

You can also set the color in CSS using the coordinates of the HSL color model (Hue, Saturation, Lightness - hue, saturation, lightness). It is written like this:

P (color: hsl (165, 100%, 50%);)

The first number in brackets denotes hue and is given in degrees (the range of numbers is from 0 to 359). It will be easy for you to understand why degrees are used if you remember what a color wheel looks like:

The second and third numbers in parentheses represent 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 is. The lightness value lets you specify the brightness of the color. Low values ​​result in darker 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 in much the same way as HSL, but, similarly to RGBA, it has an alpha channel, with which you can set the transparency of the color, 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 version 8 and earlier.

Standard HTML colors

Another way of representing colors on the web is with 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:

All browsers support these colors. In addition to them, there are about 130 additional keywords for various shades of colors. A complete table of these colors can be seen in the W3C reference.

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.

Outcomes

V CSS color text is set using the color property, and its value can be written in several ways - in hexadecimal (hex) form, in RGB or HSL format, or by specifying a keyword. To avoid incorrect display of the color specified by the keyword, it is better to specify its hex value.

It is also possible to set transparency to the element using the alpha channel (RGBA and HSLA formats). It should be borne in mind that IE8 and its earlier versions do not support RGBA, HSL and HSLA formats.

In HTML, color can be set in three ways:

Setting a color in HTML by its name

Some colors can be specified by their name, using the color name on English language... The most common keywords are black, white, red, green, blue, etc.

Text color - red

The most popular colors of the World Wide Web Consortium (W3C) standard are:

An example of using different color names:

Example: setting a color by its name

• Try it yourself "

Heading on a red background

Heading on an orange background

Headline on lime background

White text on blue background

Heading on a red background

Heading on an orange background

Headline on lime background

White text on blue background

Specifying color using RGB

When displaying different colors on the monitor, the RGB palette is taken as a basis. Any color is obtained by mixing three main ones: R - red (red), G - green (green), B - blue... The brightness of each color is specified by one byte and therefore can take values ​​from 0 to 255. For example, RGB (255,0,0) is displayed as red because 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 of the parameters indicates the brightness level of the corresponding color. For example: rgb (127, 255, 127) and rgb (50%, 100%, 50%) values ​​will set the same medium saturation green:

Example: Specifying a Color Using RGB

• Try it yourself "

rgb (127, 255, 127)

rgb (50%, 100%, 50%)

rgb (127, 255, 127)

rgb (50%, 100%, 50%)

Hexadecimal color setting

The 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) ... Hexadecimal system, in contrast decimal system, is based, as its name suggests, on the number 16. The hexadecimal system uses the following characters: 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 hexadecimal represent the combination of two characters into one value. For example, the highest number 255 in decimal is the highest FF in hex. Unlike the decimal system, a hash symbol is placed in front of the hexadecimal number # for example, # FF0000 is displayed as red because red is set to its highest value (FF) and the rest of the colors are set to their minimum value (00). Characters after the hash symbol # you can type in both uppercase and lowercase. The hexadecimal system allows you to use an abbreviated form like #rgb, where each character is equivalent to a doubled. So, the entry # f7O should be regarded as # ff7700.

Example: Color HEX

• 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):

Color codes (background) by saturation and hue.

The CSS color module details the 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: the color property

The property sets the font color using different systems color rendering. The property describes the color of the text content of the element. In addition, 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:

Color names are not case sensitive.

Syntax

Color: teal;

2.2. Numerical color values

2.2.1. RGB colors

The RGB hexadecimal value format is the # sign immediately followed by three or six hexadecimal characters. Three-digit RGB #rgb is converted to six-digit #rrggbb by copying digits rather than adding zeros. For example, # fb0 expands to # ffbb00. This ensures that white #ffffff can be specified in the short #fff, and removes any color depth dependencies from the display.

The RGB value format in functional notation is rgb (followed by a comma-separated list of three numeric values ​​(either three integer values ​​or three percent values) followed by a character). 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 this article, we will get acquainted with the possibilities of HTML and CSS for changing the color of text on site 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.)

On our site there is a complete palette and names of html colors for the site, where you can choose the appropriate color.

Method 1. Via html tag