Color of the main pages of Yandex. Automatic color detection - the experience of the Yandex team. What did you really want?

Hello, dear readers of the blog site. I continue to publish articles in the “” section. Today I want to talk about colors in HTML and CSS code, explain for those who are not yet aware how you can set them, how they are formed, how to use programs specially designed for this to search for or capture the desired color, and much more.

The issue of specifying the desired shade can be especially relevant for novice webmasters, when the codes given in the web document (for example, #f3af6c) are not entirely clear and it is not clear how and where this information can be obtained (where to find the Html and CSS color tables), and how to use them to design a text or any other block of a web document.

Let me remind you that we have already become familiar with the fundamental principles used in . We have also already looked at tags and learned, learned a lot and how.

Codes and table of basic RGB colors

It is quite logical that hypertext markup language and cascading style sheets have the ability to colorize documents, because otherwise the sites would be very boring and monotonous. To do this, they usually use a model called RGB (an acronym derived from three English words for red, green and blue).

In RGB model only three colors are used (it is clear that these are red, green and blue), each of which can be represented with a different level of brightness of the glow. For each channel (red, green and blue), you can select one of 256 possible brightness levels. The number 256 is taken because so many shade values can be encoded in one byte of information.

Accordingly, for our web document we can choose any shade from a huge number of possible ones (256*256*256). For example, to obtain black, all three channels of the color scheme must have a brightness value of zero, and to obtain white, red, green, and blue must have maximum brightness.

Let's now try to figure out how to set the brightness in each channel and how many possibilities do we have for this?

In fact, there is two main ways:

setting by recording the brightness for each channel (red, green and blue) in hexadecimal notation
task by entering the color name in the web document code

Let's start with the complex ones and try to figure out how to write colors in hexadecimal code. If we wanted, for example, to write down the code for white in the decimal system, we would get the code 256 256 256, and for black - 0 0 0. Here, probably, everything is clear.

But in the hexadecimal number system, in addition to Arabic numerals, the first six letters of the Latin alphabet are also used, and there is its own specificity in the formation of numbers. I don’t think it’s worth going deeper into this, but as an example I’ll say that white for Html can be set like this: #ffffff, and black like this: #000000. Those. 00 corresponds to 0 in decimal notation, and ff corresponds to 256.

Those. Each RGB color channel in the CSS code is allocated two hexadecimal digits, so color value entries consist of six digits (or letters that are equivalent to digits in the hexadecimal system), preceded by a hash sign “#”. It's quite simple.

For example, in the table below for the simplest shades, their hexadecimal entries will look like this:

Naturally, you are not obliged to come up with and compare hexadecimal shade codes with those that you want to see on your Internet project. You can select colors for the site in any graphic editor (even in ), where they will definitely show you a record of this shade in RGB format, or find a table of Html colors and copy the code you need from there.

Yandex Colors - selection of RGB shade palette in Yandex search results

Don’t want to use a graphic editor for this purpose or look for a table with codes? No problem. Scroll down this page a little and you will find a lot of programs that are specific and tailored specifically for working with color in Html or CSS code.

If this doesn’t suit you, then simply open it and enter it in the search bar request with the name of that shade, which you are interested in (although you can simply enter: grey-brown-raspberry).

As a result, at the very top of the search results, you will see a very convenient Yandex.Colors palette-table for selecting colors for your site. In the lower right corner of this palette you can copy the hexadecimal code of the shade you need (there is a hash mark in front of it), which then you just need to paste into the right place in your web document.

All this is realized thanks to the so-called, which is designed to help layout designers and designers.

You can set color in Yandex search bar, both in the form of its name and in the form of a code - as a result, you will see how it will look on the screen and, if necessary, you can get its hexadecimal notation.

In fact, this tool can also be useful to ordinary Internet users, for example, in order to understand what furniture in the shade of silver-brown-raspberry-speckled will look like. You can also watch a video about using this Yandex sorcerer:

Some colors in hypertext markup language can be specified using words, for example, “black” means black, “white” means white, etc. But there is one caveat. Setting the color, therefore, is possible only for a limited number of them.

Well, firstly, it’s probably clear that you won’t be able to represent all 16 million shades possible in the RGB scheme using words in any table (you’ll get tired of scrolling through it).

Secondly, in the W3C validator for the Hypertext Markup Language 4.01 specification (it is fully supported by all possible browsers at the moment), only 16 colors are defined, which can be specified in Html or CSS code with the words:

You can also find much more detailed shade tables that can be specified in words in code, but there is a possibility that in some browser this color will not be displayed correctly.

Therefore, except for the table of 16 basic shades given just above, all other colors should be specified in the code of web documents only using hexadecimal notation, in order to avoid unnecessary excesses.

Using color codes and names in webmastering

At the moment, all external design of web pages is left to CSS (cascading style sheets) and specifying a color code directly in Html is extremely rare, but it does occur. In addition, there are situations when it is impossible to use external CSS style sheets for one reason or another (for example, in the case of creating a release).

Therefore, I will still give an example of setting colors in Html, although in this case they will already be used tags not recommended by the W3C validator. For example, previously the color for the background was set in the “BODY” tag through the “bgcolor” attribute, and the text was colored immediately on the entire web page using the “text” attribute.

Setting the required shades in this case could look, for example, like this:

Document Contents

The result is a web page with a beige background and dark blue font. Before CSS came into use, to change the font color of any individual section of text, the “FONT” tag, no longer recommended by the W3C validator, was widely used, in which the “color” attribute of the same name was included to set the color:

section of text that needed to be colored blue

In order to see the result of the written code on the screen, you need to save this file with the html extension, and then open it in any browser convenient for you.

Now, in order for the layout of your site to be considered valid, it is recommended set the colors of elements in the cascading style sheet through appropriate rules and properties. The rules for such insertion in CSS are no different from those described above.

As you can see, sometimes to shorten the hue notation, not six characters are used, but only three, if they match for each channel - “#6с0” instead of “#66с00”.

Select a color from the palette of a special program or capture it from the screen

As I wrote just above, the RGB (red, green, blue) color scheme is used everywhere. For each of the three main colors, there are 256 gradations - from 0 to 255 (if we convert these values to the hexadecimal number system, we get - from 00 to FF).

Because we have three main colors, from the combination of which all other shades are formed, then the hexadecimal notation will look something like this: 99FF66 (shade of green). By adding # in front of it, we get the code #99FF66, which can be used both in Html and in style files. It goes without saying that you don’t have to figure out and remember all this nonsense yourself.

To do this, you can use a special program that allows you to select the desired shade on the palette (or capture it from the screen tool like a pipette) and immediately get its code. You don’t have to have a program, but just go to Yandex and type the name of any color in the query bar (I wrote about this just above).

Here is a list of programs that allow you to fully implement all this:

Good luck to you! See you soon on the pages of the blog site

Is it possible to set something “of our own” to the background?

Yandex developers, of course, cannot please every user with the images they offer for changing the background. If you look through the full list of available designs and do not find anything suitable, do not despair.

Such cases are provided for by the creators of Yandex Browser: you can download personal pictures available on your computer. This gives full rein to imagination. How pleasant would it be, for example, if every time you get into the Express Panel, you see a bright fragment of your life or a photo of a small child?

In order to set a picture from your device as the background, you need:

enable Yandex;
open a new subwindow;
find the “Change background” function and click on it;
Behind the last image there is a “+” icon, you need to click on it;
select the photo you want to see in the browser and press enter (“Enter”).

Now you can set absolutely any image, which is saved until the next change.

New algorithm for selecting colors for application promo cards in Yandex Launcher.

Various Yandex services work with color to solve interface problems: highlighting information blocks and object responses, managing attention and creating a visual hierarchy.

Examples of using color selection algorithms in search and Yandex.Music

Depending on the task, color selection may require complex calculations. But it happens that it is much easier to get the desired result.

We have application promo cards in Yandex Launcher: rating, description and “Install” button. These are contextual recommendations - they open on top of the application list or in a folder on the desktop.

Initial implementation

The color for the background of the card was selected automatically based on the icon; the button was translucent white. The algorithm tried to determine the main color of the icon by sorting the pixels by color tone. This approach did not always give a beautiful result; it had disadvantages:

incorrect color determination;
“dirty” colors due to averaging;
dull buttons, boring cards.

Examples of problem cards

What did you really want?

The card should have become a real continuation of the icon, and the colors should have been rich and bright. I wanted to create the feeling that the card was carefully made by hand, and not slipped into something carelessly generated automatically.

You always want to make it more beautiful, but resources are not limitless. There were no plans to allocate a team to write a miracle library for determining colors. So the task is to improve the algorithm for determining colors with minimal effort, to figure out how to color the card beautifully without inventing a spaceship.

On Saturday I blew the dust off the code editor, pulled out HTML5 and Canvas and started to come up with ideas. On Monday I came to the team with a proposal.

New color detection algorithm

Step 1. Take the icon. We throw out white, black and transparent pixels.

Original icon → Square of filtered pixels

Step 2. We reduce the resulting image to 2 × 2 pixels (with antialiasing disabled). As a result, we get four icon colors. If the original picture is homogeneous, they may repeat themselves - no big deal.

Result after the second step. Source Icon → Colors

We have anti-aliasing disabled so that the colors do not mix and become “dirty.”

In fact, it turns out like this: the square is divided into four parts, we take the middle pixel from the top row of each quarter. The implementation is simple: we don’t even need a real downsample of the image or work with graphics in general. We take pixels with the desired position from the one-dimensional array obtained after the first step.

Step 3. Almost everything is ready. There is just a little bit left: we take out the resulting colors, convert them to HSL, and sort them by lightness (L). We paint the card.

Light scheme:

background - the lightest color;
button - closest to light;
the text is the darkest.

Dark scheme (if two or more colors are dark):

background - the darkest color;
button - closest to dark;
the text is the lightest.

Applying colors, we check the contrast: the Lightness difference between the background and the button ≥ 20; between background and text ≥ 60. If it does not match, correct it.

The resulting cards. Source Icon → Colors → Card

And a few more example cards:

Result

We got colorful cards, made from real icon colors, without any “dirty” impurities. By using multiple colors, the card looks much more vibrant. It’s especially nice that with a uniform background of the icon, the card becomes its direct continuation: the border between them is not noticeable at all.

And most importantly: two days after the proposal of the new algorithm, the first implementation was already available in the dev build. We tested it within the team, set the thresholds for the filter in the first step, and provided for special cases:

an icon of one color - make the background a little darker so that it does not merge;
icon with a background - look at the pixels around the edges; if they are all the same, we put the same card background.

The revised algorithm will be included in the next release. Special thanks to the head of the Yandex Launcher development team, Dima Ovcharov, for his interest, desire and patience. Finally - more examples.

www.livemaster.ru

Codes and table of basic RGB colors

Let's now try to figure out how to set the brightness in each channel and how many possibilities do we have for this?

In fact, there is two main ways:

setting by recording the brightness for each channel (red, green and blue) in hexadecimal notation
task by entering the color name in the web document code

For example, in the table below for the simplest shades, their hexadecimal entries will look like this:

Naturally, you are not obliged to come up with and compare hexadecimal shade codes with those that you want to see on your Internet project. You can select colors for your site in any graphic editor (even in the free online editor Pixlr Editor), where you will definitely be shown a record of this shade in RGB format, or find a table of Html colors and copy the code you need from there.

Yandex Colors - selection of RGB shade palette in Yandex search results

If this doesn’t suit you, then simply open Yandex and enter in the search bar request with the name of that shade, which you are interested in (although you can simply enter: grey-brown-raspberry).

All this is realized thanks to the so-called “sorcerer” of Yandex, which is designed to help layout designers and designers.

Well, firstly, it’s probably clear that you won’t be able to represent all 16 million shades possible in the RGB scheme using words in any table (you’ll get tired of scrolling through it).

You can also find much more detailed shade tables that can be specified in words in code, but there is a possibility that in some browser this color will not be displayed correctly.

Using color codes and names in webmastering

At the moment, all external design of web pages is left to CSS (cascading style sheets) and specifying a color code directly in Html is extremely rare, but it does occur. In addition, there are situations when, for one reason or another, it is impossible to use external CSS style sheets (for example, in the case of creating an issue of the subscribe mailing list).

Setting the required shades in this case could look, for example, like this:

Document Contents

section of text that needed to be colored blue

In order to see the result of the written code on the screen, you need to save this file with the html extension, and then open it in any browser convenient for you.

As you can see, sometimes to shorten the hue notation, not six characters are used, but only three, if they match for each channel - “#6с0” instead of “#66с00”.

ktonanovenkogo.ru

RGB color palette, how to correctly set colors in CSS and Html.

As is known, to solve problems with the color design of text, the generally accepted construction is used RGB(that is, Red- Red, Green– Green, and accordingly Blue- Blue)

Color palette RGB involves the use of only three colors, each of which may well be represented with a different level of brightness. In the CSS and Html code, for each color in the palette, you can define one of 256 possible color gradations.

Thus, to design a document you can use a fairly large number of colors - 256-256-256. For example, to get black as a result, all three colors RGB it is necessary to set the brightness value to zero, and vice versa, if white color is required, then accordingly for all colors you need to set the maximum brightness.

Let's take a closer look at how to set color brightness in Html. You can adjust the brightness in two ways:

By setting the palette color code for the page in Html code, determining the brightness of RGB colors using the hexadecimal number system
By setting colors in CSS using hexadecimal notation.

Let's look at writing code in hexadecimal and hypertext markup. First, let's remember the decimal number system - for example, if we need white color, then its code will look like: 256 256 256, in the case of black color: 0 0 0.

Unlike the decimal code, which contains only numbers, the hexadecimal palette also contains letters of the Latin alphabet. That is, in this case there is a specific system for representing numbers. For example, the white color in HTML is specified as: #ffffff, and black: #000000. It is easy to see that here 00 corresponds to 0, and ff corresponds to 256 (if converted to decimal).

Thus, the RGB color palette of Html, CSS is divided into channels, each of which is allocated two hexadecimal characters. That is why all the colors in the Html code are built from six letters (equated to numbers) and the numbers themselves. It should be noted that the code is preceded by a “#” symbol.

Of course, there is no need to manually select a color code - you just need to launch any graphic editor, find a suitable color, and see the color code in the RGB system in the detailed information. There is another, simpler option - an Html color palette with codes. Find and copy it for yourself.

Yandex Colors – selecting an Html color code in the RGB palette in Yandex output.

Among other things, you can choose a color scheme for your website using Yandex. To do this, just enter the word “color” or the name of the color you need into the search bar. As a result of the request, the palette will be displayed in the output Yandex.Colors. with which you can select colors. In the right corner you can see the color code in RGB and hexadecimal, which is used when constructing a web document.

This option from Yandex greatly simplifies the work process. It's very simple - enter the name of the color and get the required code.

It should be noted that some of the colors in hypertext markup can be specified using a word, for example: “gray” - gray, “white” - white, “black” - black, etc. Of course, setting a color in HTML in this way is only possible for a not very large variety of colors. Indeed, 16 million RGB colors cannot be found in any reference book or table using words.

The W3C 4.01 validator (hypertext markup) presents a palette of 16 basic shades, with the help of which a table of CSS and Html colors is compiled and from which it is clear which colors can be specified in words.

Other colors must be specified using hexadecimal code.

The name of the colors of the RGB palette in web pages, as well as replacing the color of the text itself using the color attribute, examples and methods of using color codes in CSS and Html.

Nowadays, the external design of pages is done using CSS (cascading style sheets), but, nevertheless, quite often you can find cases where the color is specified in HTML.

Therefore, below is an example of specifying color in HTML.

your website page

The end result will be a page with purple font on a gold background.

Previously, in CSS, to specify the color of text in a particular area, it was necessary to enter the “FONT” tag (not recommended by the W3C), and in order to set the color, the “color” attribute was included in it:

text that needed to be colored red

In order to color some text element in the color you need, you need to use the “FONT” tag to write HTML code that will look like this:

Text whose font color you want to replace

At the moment, in order to get a valid website layout, I recommend using CSS when setting the color code. By and large, the rules for inserting color codes into CSS are no different from those discussed above.