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.

In HTML, color can be specified in three ways:

Setting color in HTML by its name

Some colors can be specified by their name, using the name of the color in English as the value. 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 (W3C) standard are:

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 rest 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 ​​from 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.

Vlad Merzhevich

In HTML, the color is specified in one of two ways: using a hexadecimal code and by the name of some colors. The most commonly used method is based on the hexadecimal system, as the most universal.

Hexadecimal colors

HTML uses hexadecimal numbers 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. In table. 6.1 shows the correspondence between decimal and hexadecimal numbers.

Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one (Table 6.2). 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 pound sign #, for example #aa69cc. In this case, the case does not matter, so it is permissible to write #F0F0F0 or #f0f0f0.

A typical color used in HTML is as follows.

Here, the background color of the web page is set to #FA8E47. The pound sign # in front of a number means it is in hexadecimal. The first two digits (FA) define the red component of the color, the third to fourth digits (8E) the green component, and the last two digits (47) the blue component. The end result is this color.

Each of the three colors - red, green and blue - can take values ​​from 00 to FF, which eventually forms 256 shades. Thus, the total number of colors can be 256x256x256 = 16.777.216 combinations. The color model based on the red, green and blue components is called RGB (red, green, blue; red, green, blue). This model is additive (from add - add), in which the addition of all three components forms white.

To make it easier to navigate in hexadecimal colors, take into account some rules.

• If the values ​​of the color components are the same (for example: #D6D6D6), then a gray tint will be obtained. The higher the number, the lighter the color, and the values ​​change from #000000 (black) to #FFFFFF (white).
• A bright red color is formed if the red component is made maximum (FF), and the rest of the components are set to zero. The color with the value #FF0000 is the reddest possible red tint. The same is true for green (#00FF00) and blue (#0000FF).
• Yellow (#FFFF00) is obtained by mixing red with green. This is clearly seen on the color wheel (Fig. 6.1), which presents the primary colors (red, green, blue) and complementary or complementary. These include yellow, cyan, and violet (also called magenta). In general, any color can be obtained by mixing colors adjacent to it. So, cyan (#00FFFF) is obtained by combining blue and green.

Rice. 6.1. Color circle

Colors based on hexadecimal values ​​do not have to be empirically selected. For this purpose, a graphic editor that can work with different color models, such as Adobe Photoshop, is suitable. On fig. 6.2 shows a window for choosing a color in this program, the line circles the resulting hexadecimal value of the current color. You can copy and paste it into your code.

Rice. 6.2. Color picker in Photoshop

Web Colors

If you set the color quality of the monitor to 8 bits (256 colors), then the same color can be displayed differently in different browsers. This has to do with the way graphics are rendered when the browser works with its own palette and cannot show a color that is not in its palette. In this case, the color is replaced by a combination of pixels of other, close to it, colors that imitate the given one. In order for the color to remain the same in different browsers, a palette of so-called web colors was introduced. Web colors are such colors, for each component of which - red, green and blue - one of six values ​​\u200b\u200bis set - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). The hexadecimal value of this component is indicated in brackets. The total number of colors from all possible combinations gives 6x6x6 - 216 colors. An example web color is #33FF66.

The main feature of web color is that it is displayed the same in all browsers. At the moment, the relevance of web colors is very small due to the improvement in the quality of monitors and the expansion of their capabilities.

Colors by name

In order not to remember a collection of numbers, you can use the names of commonly used colors instead. In table. 6.3 shows the names of popular color names.

It doesn't matter how you specify the color - by its name or by using hexadecimal numbers. In their effect, these methods are equal. Example 6-1 shows how to set the background and text colors of a web page.

Example 6.1. Background and text color

Sample text

In this example, the background color is set using the bgcolor attribute of the tag , and the color of the text through the text attribute. For variety, the value of the text attribute is set to a hexadecimal number, and bgcolor is set to the reserved keyword teal .

Computer games are one of the most popular ways to spend your free time interestingly. Plunging into the world of video games, we forget about real problems and troubles, relax and enjoy. And if this is an online game or a game in multiplayer mode, then its main advantage is that here you can meet a lot of people from all over the world and find not just like-minded people, but also best friends. Do you want to know how game settings, up to the color in "MTA", can affect your communication with other players? Read on!

Features of the multiplayer mode

Have you ever wondered: how to adjust the colors in "MTA" or in some other game? No one who has ever had the opportunity to play an online game with a large number of players will deny that they want to show themselves in the best light in front of others. You can show off your character's special, expensive things, stand out in the knowledge of game terminology, or simply customize the interface of your game so that it works better than inexperienced gamers.

Colors in "MTA" - what you need to know?

If we talk about one of the versions of the multiplayer mode of the game "GTA: San Andreas", "MTA", then color plays a very important role here. The ability to customize the color for your nickname in "MTA" is one of the best skills that every novice player should acquire.

So, to customize your nickname color, go to the "MTA: SA" application and click on the Settings option, then select your name, and then enter the desired color code right in front of it. In "MTA" there is a large palette of colors for nicknames. In the article, we have inserted sample palettes from which you can choose your favorite shade.

Now you know how you can stand out and make your nickname different from the nicknames of beginners and inexperienced players. Bright, it will distinguish you from ordinary gamers and draw more attention to you. Enjoy your game!

CSS is not understood). Therefore, the future webmaster just needs to study HTML tools that allow you to change the color, for example, in order to make bright and colorful e-mail newsletters that will attract the attention of the target audience of the site.

This entry turned out to be quite voluminous, but from it you will learn about all the technical features of working with color using HTML. We will start the recording by dealing with the question: why do we need to highlight certain elements of the HTML page with color. Then we'll talk about the RGB model, which allows you to specify colors in HTML using special codes (in passing, we will look at decimal color codes and hexadecimal HTML color values). Also from this post you will learn about the color palette, and also understand why there is no palette in HTML. And the end of this publication will be examples of changing background, text and link colors.

Using Colors in HTML

Site pages would be boring and uninteresting without images, which we talked about earlier and in great detail. But images have one significant disadvantage: each image is an additional one and, accordingly, an additional load on the hosting.

I note that for the design of my WordPress blog, I did not use a single image, the layout is completely decorated with color. Just the same about colors in HTML, we will talk with you today. Colors in HTML are used for different purposes, for example, we can design website layouts by highlighting one or another in one color or another.

With the help of color, we can focus the attention of our visitors on a particular text or site block. Note that it is also determined using color in such a way that the user can understand: which link he has already clicked on, which one he has not visited yet, and which HTML page he is currently on.

Be careful using colors to style HTML documents, not all colors go well with each other and not every color will be pleasing to your site visitors. But you better ask web designers about these subtleties, this article will help you deal with the technical features that allow you to control the color of HTML page elements.

But you should not forget that the design should be separated from the content, so it is better to use CSS for color manipulation in HTML pages, but we will talk about this in another post. Now we'll see what tools are there in HTML to control the color on the pages of the site.

There are many color models in the IT industry for color manipulation. The most widely used color representation model is the RGB model. We will talk about some features of this model here, and for a more detailed acquaintance with RGB there will be a separate publication. Below you will find a list of color models used in IT (not just HTML and CSS):

1. RGB model. This model has become very widespread and, perhaps, is one of the most convenient and common ways to manipulate the color of HTML elements.
2. RGB model. This model is very similar to the RGB model, but includes an alpha channel for the color. The peculiarity of the RGBA model is that it allows you to adjust not only the color of the HTML element, but also its transparency due to the presence of an alpha channel. The RGBA model was added in CSS3 and is not supported by older browsers.
3. HSL model. The peculiarity of the HSL model is that we set the color using its parameters: hue, pomposity and lightness. This model is somewhat more difficult to understand than the RGB model.
4. HSLA model. This model is very similar to the HSL model, but just like the RGBA model, it allows you to work with the alpha channel of the color, so using HSLA we can set not only the color of the HTML element on the page, but also its transparency.
5. Model HSV (HSB). This model should not be confused with the HSL model. Note that the first four models can be used in HTML or CSS to style web pages, but the HSV model cannot. The HSV model was developed by one of the founders of the Pixar studio in 1978 and is very similar to the HSL.
6. Model CMY or CMYK. This model is used in all color printers for printing. The CMYK model is based on the rule that printing takes place on white sheets of paper. Any color in the CMYK model is obtained by mixing Cyan (pale cyan, cyan), Magenta (magenta) and yellow. Each color in the CMY model has an opacity characteristic (amount of ink), measured as a percentage. But in addition to the three colors listed, the CMYK model also uses black.

All of the above color models are device dependent, that is, if you set the color of an HTML element using the RGB or HSL model, then it is impossible to say with accuracy what kind of color a visitor to your site will see, since the monitors of all users are different and they transmit colors in different ways. Also note that all of the above models are based on the RGB model and any color specified in any of the models (except HSLA and RGBA due to the presence of an alpha channel) can be converted to RGB.

If we talk about device-independent color models, then it is worth noting the LAB model. So, we digressed a little from working with color in HTML, getting acquainted with some color models. Note that browsers "understand" only the first four models: HSL, RGB, HSLA, and RGBA. Therefore, we can control the color of HTML elements only with the help of these models.

How the color of an HTML element is formed: some features of the RGB model

Let's figure it out how the color of an HTML element is formed and with some features of the RGB model. Note that we will talk about the RGB model, as well as about other models that are used to design web pages a little later in separate entries.

So, the RGB model stands for Red, Green, Blue. The RGB model is based on the principle of additivity. This principle is that in order to obtain any color, the color is added to black. For a better understanding, imagine that your screen is a black wall and you have three spotlights: the first is red, the second is green, and the third is blue. You can adjust the brightness of each spotlight using a ruler with numbers from 0 to 255. Accordingly, if you set the spotlight to zero, it turns off and does not shine, if the value is 255, then the spotlight gives the brightest color.

Thus, it turns out that if you shine on the same point with a red and green spotlight, then you will notice a yellow spot on a black wall. If you combine red and blue, you get magenta, and if you combine green and blue, then the light spot on the black wall will be Cyan, but if you point all three spotlights at the same point, then the light spot will be white.

The principle described above underlies the RGB model and is used to manipulate colors in HTML elements on a page in a browser.

HTML attributes for changing the color of elements: the background color of the element and the color of the text inside the element

Used to make page elements unique. With HTML attributes, we can manipulate the color of elements:

1. HTML color attribute. This attribute allows you to change the color of text inside an HTML element. The attribute can take values ​​in the form of HTML color names and RGB model codes in hexadecimal and decimal notation. The color attribute is a unique HTML attribute that allows you to change the color of text within certain HTML elements.
2. HTML text attribute. This attribute is a unique attribute of the tag. . Tag along with tags and form . If you remember, then inside the container elements are placed, which are then displayed by the browser in the viewport. The text attribute allows you to set default text color for all html page.
3. HTML attribute bgcolor. It is also a unique HTML attribute and allows you to change the background color of some HTML elements.
4. vlink HTML attribute. This attribute is unique and applies only to the tag. to change the color of a link that the user has already visited.
5. HTML alink attribute. This attribute is also unique and only applies to the tag. . The alink attribute changes the color of the active HTML link.
6. HTML link attribute. The link attribute is only used with a tag and serves to change the color of HTML page links that the user has not yet visited.

Please note that using attributes to change the color of HTML elements is not recommended, as there are cascading style sheets that allow you to separate the appearance of a web page from its content.

Using Decimal Color Codes in HTML

So, we talked about the fact that the spotlight can be set the brightness of the color using a special ruler, on which there are numbered figures from 0 to 255. Now let's see how this will help us change the color of HTML elements. The thing is that we can change the text color inside an HTML element or the background color in HTML using a decimal code as follows:

If you create an HTML document that describes the body container as in the example, you will see:

1. The background color of the HTML document is now green: bgcolor=”rgb (0,255,0)”.
2. The text color of the HTML page will turn blue: text=”rgb (0,0,255)”.
3. The HTML color of a link that the user has not visited will be white: link=”rgb (255,255,255)”.
4. The colors of the link that is currently open will be black: alink=”rgb (0,0,0)”.
5. And the color of an HTML link that has already been visited will be red: vlink=”rgb (255,0,0)”.

Please note: no one forbids you to adjust the "spotlight power" at your discretion, you can set html color, for example, in this way:

And get the color of childish surprise. This is the feature, flexibility and convenience of the RGB model. Your monitor is a black wall with spotlights shining on it, and you can adjust the power of those spotlights and create all sorts of background, text, and link colors using HTML attributes in decimal notation, or you could say: using decimal color codes.

Actually wrong to say decimal color codes in html, it would be more correct to say RGB decimal color codes, since this model is used not only for the design of web pages in HTML and CSS.

Hexadecimal values ​​of HTML colors

Setting the color of HTML elements with decimal RGB model codes is not very convenient (and at the moment not all browsers support this way of color manipulation), since the notation will not be the most compact, it is much more convenient to set the color of HTML elements using hexadecimal values. In the figure below, you can see how decimal values ​​are converted to hexadecimal.

For those who are not familiar with the hexadecimal number system, a little explanation should be given so that you can easily manipulate the color of HTML elements using hex RGB model codes. Firstly, the decimal number system is so named because any number can be obtained by a combination of ten digits (terminology is important: there is a difference between a number and a digit): 0, 1, 2, 3, 5, 6, 7, 8, 9.

In the hexadecimal number system, any number can be written using a combination of sixteen digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. For ease of understanding, you can consider that a is ten and f is fifteen. For example, the number sixteen would be written in hexadecimal as follows: 10. And the number 255 would be written as ff.

Now let's see how we can set the color of HTML elements using hexadecimal values, we repeat our previous example, replacing the decimal color codes with their hexadecimal counterparts:

Note: writing color in HTML in hexadecimal format is somewhat more compact than in decimal is the first. Second: the power of each spotlight is set by numbers from 0 to 255. Writing the number 255 requires two digits in hexadecimal format (ff = 250), so the brightness of each color channel (our spotlights correctly call the color channel, color channel) is set by two digits from 0 to f.

Please note: the brightness of each color channel is set separately, but if we imagine that this is a single number, then the maximum possible number in the hexadecimal system of the RGB model is ffffff, it will give us white color, and in the decimal system it is: 16 777 215. Such a number of colors and shades allows you to set / use the RGB model. This number comes from the fact that each color channel has 256 brightness values ​​(from 0 to 255), respectively: 256*256*256 = 16,777,215.

HTML color hexadecimal values ​​are more compact and descriptive, most web designers and layout designers use hexadecimal values ​​for color manipulation in HTML, so we recommend that you do not get used to the decimal notation of color, but immediately use hexadecimal.

It is clear that at first it will be difficult for a novice designer or layout designer to navigate in the hexadecimal form of color notation, therefore, almost any graphic editor has a so-called color palette that allows you to select the desired color and get its code for different color models in different number systems.

Some text editors, such as , have palette extensions that come in handy when you want to quickly select a color and change it. In this regard, I can not say anything.

Color names in HTML

HTML attributes can take as a value not only decimal codes and hex values, but also special color names. Changing the color of an HTML element using its name is not a good idea. Firstly, the RGB model code is hidden behind the color name in HTML, and secondly, each browser displays the color of the HTML element specified using the name differently, it depends only on the desire of the browser developers.

So using a color name in HTML is deprecated. The RGB model is hardware dependent, and the color specified using the name depends on the browser and even its version. Let's try to color the elements of an HTML page using a name:

As you can imagine, there are a lot of colors and shades. It is worth noting here that HTML attributes do not allow you to set a gradient, this is possible in CSS, but we will talk about this in another post. And there are names for many colors in HTML. You can find a table with the names of colors in HTML and their RGB codes on my website.

The table above shows what color will an HTML element get if you give it a name. This table collects 16 colors and their names that are approved by the W3C and should display the same in any browser. But in fact, in HTML, you can use about 200 color names that are supported by major browsers, such as: Opera, Chrome, Firefox, Safari, Internet Explorer (this statement is very controversial about the latter).

Color palette in HTML

Actually there is no color picker in html. Let's remember the definition of the word palette. A palette is a small thin rectangular or oval board on which the artist mixes paints and gets all kinds of colors. Sometimes a thumb hole is made in the palette to make it comfortable to hold. An image of the palette can be found below. Therefore, there is no palette in HTML.

But in various text editors there are color palette plugins that help quickly pick the color of an HTML element. There is also a color palette in graphic editors, because it is not very convenient and fun for a designer to sit and calculate: what color will be obtained with a particular brightness of a particular channel. In the figure below you can see the simplest palette of the Paint editor.

Note that many modules and plug-ins of the color palette allow you to get a color code not only in RGB / RGBA format, but also in the format of other models. Remember that there is no palette in HTML, well, except that you are an artist to the core and name the color palette of the HTML page those colors, which were used to decorate it (after all, sometimes the palette is called the colors that this or that artist uses, or the colors that were used to create this or that picture).

Learning to Change Text Color in HTML

We got a lot of theory about colors in HTML let's get down to practice and try work with HTML element colors. The first thing we will learn to do - change text color in html document using special attributes and tags. Open any editor and write the following code in it:

Learning to work with color in HTML

Change text color

To change the text color, we can use the BODY text element's unique attribute, and we can also use the FONT element and its color attribute. This text will be gray.

I will save this file as color.html and advise you not to forget about . Decimal color notation is not supported by Chrome, Firefox and Opera, but IE understands this color notation and highlights the HTML header in green:

It is correct to say not changing the text color in HTML, but changing the font color in HTML. Pro