Set text font, size and color

Set text font, size and color

The CSS color module details the values ​​that allow authors to specify 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 sets the font color using various systems color reproduction. The property describes the color of the element's text content. It is also 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 values:

Color names are not case sensitive.

Syntax

Color: teal;

2.2. Numeric Color Values

2.2.1. RGB Model Colors

The format of an RGB value in hexadecimal is a # sign immediately followed by three or six hexadecimal characters. The three-digit RGB notation #rgb is converted to the six-digit form #rrggbb by copying the digits, not by adding zeros. For example, #fb0 expands to #ffbb00 . This ensures that the white #ffffff can be specified in the #fff shorthand, and removes any dependencies on the display's 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 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 the first part of the book, in some examples we have already demonstrated 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 the hexadecimal color code. If you are already familiar with the hexadecimal number system, you can skip reading the next paragraph. We'll also talk about other ways to represent colors on the web later, 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 the 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). A color in hexadecimal format is written as three two-digit numbers from 00 to FF (they must be preceded by a pound sign #), which corresponds to three components: Red, Green, Blue (RGB color model). In other words, the 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 blue level. 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 entry into #RGB . This can be done when there are three pairs of identical characters in the hex number.

The abbreviated form of the notation is quite common, and for your reference we will give 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:

RGB color model

The second way to specify colors 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 brackets 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 more 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 shade has the following meaning:

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

The black color value is written as (0, 0, 0) , and the white color value is written as (255, 255, 255) . You can also specify these values ​​as a percentage. 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 values ​​from? There are many graphic editors and online services with which you can match colors and build color schemes. One of the most popular programs in which you can select the appropriate color and get its RGB value, hex and more - Adobe Photoshop. Alternatively, there are special sites where you can easily pick up not only a color, but an entire color scheme. A great example is the Adobe Color CC service.

RGB color model

Set color to RGB format A can be 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. Specifies transparency using a number between 0 and 1, where 0 is fully transparent and 1 is fully opaque. Intermediate values ​​like 0.5 allow you to set a translucent look (abbreviated notation is allowed, without zero, but with a dot - .5). For example, to make the text colored and slightly transparent, you need to write the keyword rgba 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 version 8 and earlier. Specifically 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 display 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 color in CSS using the coordinates of the HSL color model (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 (the range of numbers is 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 (saturation) and lightness (lightness), respectively. Their values ​​are set as 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 value of hue is. Using the value lightness (lightness) you can specify the brightness of the color. Low values ​​result in dark tones of the color, high values ​​result in light tones. A value of 100% for lightness means white, 0% means black.

The HSLA color model works almost the same as HSL, but, similarly to RGBA, it has an alpha channel with which you can set the color transparency by 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 keywords, with which you can specify a color for the 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 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 a 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) form, in RGB or HSL format, or by specifying a keyword. In order to avoid incorrect display of the color specified using the keyword, it is better to specify its hex value.

It is also possible to set transparency to an element 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 HTML color can be set in three ways:

Setting color in HTML by its name

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

Text Color - Red

The most popular colors of the World Wide Web Consortium (eng. World wide web Consortium, W3C):

An example of using different color names:

Example: setting a color by its name

• Try it yourself "

Header on red background

Header on orange background

Header on lime background

White text on a blue background

Header on red background

Header on orange background

Header on lime background

White text on a blue background

Specifying color with RGB

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

Example: Specifying a color with 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 00 to FF (same as decimal 0-255). The hexadecimal system, unlike the decimal system, is based, as its name implies, 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 the hexadecimal system are the union of two characters into one value. For example, the highest number 255 in decimal corresponds to the highest FF in hexadecimal. Unlike the decimal system, the hexadecimal number is preceded by a pound sign. # , for example, #FF0000 is displayed as red because red is set to its highest value (FF) and the other colors are set to their minimum value (00). Characters after the hash symbol # can be typed in both uppercase and lowercase. The hexadecimal system allows you to use the abbreviated form #rgb, where each character is equal to twice. Thus, 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 commonly used colors (name, HEX and RGB):

Color codes (background) by saturation and hue.

In this article, we will get to know HTML capabilities and CSS to change the color of the text on the pages of the site. Several options will be considered. For each individual case, a 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 site contains a complete palette and names of html colors for the site, where you can choose the right color.

Method 1. Through the html tag