Color in styles can be set in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA format. Color in styles can be set in different ways: by hexadecimal value, by name, in RGB, RGBA, HSL, HSLA format

Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in the definition of the number system, the hexadecimal number is preceded by the hash symbol #, for example #666999. Each of the three colors - red, green and blue - can take values ​​from 00 to FF. Thus, the designation of the color is divided into three components #rrggbb, where the first two characters mark the red component of the color, the two middle ones mark green, and the last two mark 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

Browsers support some colors by name. In table. 1 shows the names, hex code, values ​​in RGB, HSL format and description.

With RGB

You can define a color using the red, green, and blue values ​​in decimal terms. Each of the three color components takes a value from 0 to 255. It is also acceptable to set the color as a percentage, while 100% will correspond to the number 255. First, the rgb keyword is specified, and then the color components are specified in brackets, separated by commas, for example rgb(255 , 128, 128) or rgb(100%, 50%, 50%).

RGBA

The RGBA format is similar in syntax to RGB, but includes an alpha channel that sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

RGBA is added to CSS3, so validation of CSS code should be carried out according to this version. It should be noted that the CSS3 standard is still under development and some of its features may change. For example, an RGB color added to the background-color property passes validation, but one added to the background property does not. At the same time, browsers quite correctly understand the color for both properties.

HSL

The name of the HSL format is formed from a combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the color value on the color wheel (Fig. 1) and is specified in degrees. 0° is red, 120° is green, and 240° is blue. Hue value can vary from 0 to 359.

Rice. 1. Color wheel

Saturation is the intensity of a color, measured as a percentage from 0% to 100%. A value of 0% indicates no color and a shade of gray, 100% is the maximum saturation value.

Lightness sets how bright the color is and is specified as a percentage from 0% to 100%. Small values ​​make the color darker, while high values ​​make it lighter, extreme values ​​of 0% and 100% correspond to black and white.

HSLA

The HSLA format is similar in syntax to HSL, but includes an alpha channel that sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

Color values ​​in RGBA, HSL and HSLA formats are added to CSS3, so when using these formats, check the code for validity against the version.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Warning

All methods of catching a lion 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 result. Remember, the lion is a predator and a dangerous animal!

The result of this example is shown in Fig. 2.

Rice. 2. Colors on the web page

HTML colors are indicated by six characters after the slash - for example, #000000. These six characters represent the proportions of the various colors (Red, Green, and Blue) in the final color. The image on your computer monitor is made up of a huge number of dots called pixels. Each pixel is a small light source, let's call it a "flashlight", which in turn consists of three flashlights - red, green and blue. By reducing or increasing the intensity of the glow of individual colored lanterns, we get the desired color.

html color codes

Colors in HTML are denoted by the hexadecimal (HEX) notation for the combination of red, blue, and green (RGB).

The smallest color value is 0 (hexadecimal 00). The highest color value is 255 (hexadecimal FF).

The hexadecimal color value is three digits starting with #.

Color codes (values)

16 million shades

Combining red, blue and green with values ​​ranging from 0 to 255 for each color adds up to over 16 million shades (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16,384 different shades (LCD monitors are generally capable of displaying 262,16 million (updated October 2013) colors, while CRT monitors can display an almost unlimited number of colors).

The color table below shows the change in the proportion of red from 0 to 255 with zero values ​​for blue and green:

shades of gray

To obtain shades of gray, equal proportions of all colors are used. To facilitate the selection of the desired color, we provide you with codes for shades of gray.

Cross-browser (for all browsers) html color names

A collection of 150 html color names supported in all browsers.

Standardized color names

The W3C lists 16 valid color names for HTML and CSS: aqua (aquamarine), black (black), blue (blue), fuchsia (magenta), gray (gray), green (green), lime (lime or light green), maroon (chestnut), navy (ultramarine), olive (olive), purple (purple), red (red), silver (silver), teal (gray), white (white) and yellow (yellow).

When using colors that are not included in this list, it will be more correct to use their hexadecimal code (HEX) or RGB code.

Safe colors

A few years ago, when computers could support a maximum of 256 different colors, a list of 216 "Web Safe Colors" was proposed, with 40 colors reserved for the system.

This 216-color palette was created in order to correctly display colors in the 256-color palette mode.

It doesn't matter now because most computers around the world support millions of shades of color. In any case, here is a list of those colors:

Table (palette) of html colors gives you the opportunity to independently choose the tone you need. The color value is displayed in three formats: Hex, RGB, and HSV.

• Hex consists of three two character values ​​in hexadecimal notation. For example: #ff00b3, where the first pair of numbers is red, the second is green, and the third is blue.
• RGB (RedGreenBlue) has the form "200,100,255" indicating the amount of the corresponding tone (red, green, blue) in the resulting color.
• HSV (Hue, Saturation, Value - tone, saturation, value) - a color model in which the coordinates are:
  • Hue - color tone, can vary from 0° to 360°.
  • Saturation - saturation, varies between 0-100 or 0-1. The larger this setting, the "purer" the color is, which is why this setting is sometimes referred to as color purity. And the closer this parameter is to zero, the closer the color is to neutral gray.
  • Value (color value) - sets the brightness, the value can also vary between 0-100 or 0-1.

Enter color code: GO

List of colors with names

The table lists the English color names (which can be used as values) supported by all browsers and their hexadecimal values. All colors listed are "safe", meaning they will display the same in all browsers.

Color codes in CSS are used to specify colors. Typically, color codes or color values ​​are used to set a color for either the foreground of an element (eg, text, link color) or the element's background (background, block color). They can also be used to change button color, borders, marker, hover and other decorative effects.

You can set your color values ​​in various formats. The following table lists all possible formats:

These formats are described in more detail below.

CSS Colors - Hex Codes

Hexadecimal color code is a six-digit color representation. The first two digits (RR) are the red value, the next two are the green value (GG) and the last two are the blue value (BB).

CSS Colors - Short Hex Codes

Short hexadecimal color code is a shorter form of six-character notation. In this format, each digit is repeated to produce the equivalent six-digit color value. For example: #0F0 becomes #00FF00.

The hexadecimal value can be taken from any graphics software such as Adobe Photoshop, Core Draw, etc.

Each hexadecimal color code in CSS will be preceded by a "#" hash sign. The following are examples of the use of hexadecimal notation.

CSS Colors - RGB Values

RGB value is a color code that is set using the rgb() property. This property takes three values: one each for red, green, and blue. The value can be an integer, from 0 to 255, or a percentage.

Note: Not all browsers support the rgb() color property, so it's not recommended to use it.

Below is an example showing multiple colors using RGB values.

Color code generator

You can create millions of color codes with our service.

Safe Browser Colors

Below is a table of 216 colors that are the most secure and computer independent. These colors in CSS range from 000000 to FFFFFF hex code. They are safe to use as they ensure that all computers will display color correctly when working with the 256 color palette.

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: color property

The property sets the font color using various rendering systems. 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.