What does the number next to the color mean?

Question

I am reading this article on material design. There is a row in the color list next to each color that seems to darken the color as its value increases.

What does this number mean, more precisely?

Edit:. Since all answers relate to hexadecimal values, I am adding this change to clarify the question. My question is about the numbers on the left, such as 700, 500, ... not hexadecimal numbers (# 3f51b5, ...)

Edit 2: In the RGB model, each of the red, green, or blue can have a value in a scale from 0 to 255. 0 means no color and 255 means that the color exists fully power. Is there a numerical value for left side numbers? Is it possible to calculate “700” colors, assuming “500” is # 3F51B5? Or are these numbers just a name for different shades of color in the palette?

Answer 1

These values ​​are the relative lightness / darkness or “shade” of the color, where 50 is the lightest and 900 is the darkest. The Material Design Guide suggests using 500 shades as the primary color and 700 shades as the darker color of the status bar.

Annn values ​​are if you use color as the color of your accent.

See https://www.google.com/design/spec/style/color.html#color-ui-color-application

Answer 2

The other answers are correct, but I think you are asking about the numbers on the left. You can use them to indicate the colors of your theme in Angular Material.

$mdThemingProvider.theme('default') .primaryPalette('purple', { 'default': '700', // by default use shade from the palette for primary intentions 'hue-1': 'A400', // use shade for the <code>md-hue-1</code> class 'hue-2': '600', // use shade for the <code>md-hue-2</code> class 'hue-3': 'A100' // use shade for the <code>md-hue-3</code> class }) // If you specify less than all of the keys, it will inherit from the default shades .accentPalette('deep-purple', { 'default': '200' // use shade 200 for default, and keep all other shades the same }) 

The numbers you see correspond to the numbers on the left side to adjust the colors. My site uses variations of the purple theme in this example, and I can set a hue different from what was in the Google settings.

Answer 3

It doesn't have much to do with Android or material design, it's just a way to encode colors as red, green, and blue values ​​using hexadecimal notation. #RRGGBB where RR is a two-digit hexadecimal number (from 0 to 255) for the red component, GG for the green component and BB for blue.

So, for example, if you want to encode white (255, 255, 255 in RGB), you write: #FFFFFF , because FF in hexadecimal format 255 in decimal notation. Yellow can be #FFFF00 because you have 255 for red and 255 for green (and 0 for blue). And so on.

You can find more information here .

Answer 4

The number of codes assigned to each and all colors supported by the system. Each color code contains a "#" and 6 letters or numbers. These numbers are represented in hexadecimal digits. For example, "FF" in hexadecimal represents the number 255 in decimal format.

Meaning of the characters: The first two characters in the HTML color code represent the intensity of red. 00 is the smallest, and FF is the most intense. The third and fourth - the intensity of green, fifth and sixth - the intensity of blue. Thus, combining the intensity of red, green and blue, we can mix almost any color that our heart desires.

Examples:

FF0000. With this HTML, we tell the browser to display a maximum of red, not green and blue. The result, of course, is pure red.

00FF00 - The result is a clear green color.

Answer 5

The number you see is the HEX (hexadecimal) value for hue and color. You can use it in CSS files instead of writing, i.e. Black, white or blue.

From WIKI: “A hexadecimal triplet is a six-digit three-byte hexadecimal number used in HTML, CSS, SVG and other computing applications to represent colors. Bytes are red, green, and blue color components. One byte is a number in the range from 00 to FF ( in hexadecimal notation) or from 0 to 255 in decimal notation "

More about this here https://en.wikipedia.org/wiki/Web_colors

Answer 6

Color difference

The perception of color, of course, is subjective, but between people there is significant agreement. For example, we can all agree that red, green, and blue are very different, and even people with foresight agree that black and white are very different.

RGB

The most common color representation in computer systems is the vector (r, g, b), which offers a simple distance function, for example,

Allows you to set the range for r, g and b to [0, 1] and see how it works:

• Red (1, 0, 0) and red (1, 0, 0) have a distance of 0 , which should be obvious
• Red (1, 0, 0) and yellow (1, 0, 0) have a distance of 1 , which is less than the distance
• Red (1, 0, 0) and blue (0, 0, 1), which sqrt (2) , which is plausible

So far so good. However, the problem is that blue and red have the same distance 1 from black (0, 0, 0), but when viewing the image this does not look like this:

Also yellow (1, 1, 0) and purple (1, 0, 1) have the same distance 1 from white (1, 1, 1), which does not seem to make sense:

HSL and HSV

I think it is safe to assume that similar numbers for HSL and HSV color schemes have the same problems. These color schemes are not intended for color comparison.

CIEDE2000

Fortunately, there are scientists who are already trying to find a good way to compare colors. They came up with some sophisticated methods, the last of which is CIEDE2000

(the full formula described in the article is huge)

This metric takes into account human perception, as the fact that we seem to be unable to distinguish between blue shades of blue. Therefore, I would say that we use this as our color separation function.

Color picker

Naive decision

Some answers suggest the following algorithm

 colors = [] for n in range(n): success=False while not success: new_color = random_color() for color in colors: if distance(color, new_color)>far_enough: colors.append(new_color) success = True break 

This algorithm has some problems:

• The interval between colors is not optimal. If we assume that the colors will look like numbers on a line, the three numbers will be optimally distributed as follows:

  | ----- ----- b with |

  Packing an extra single number there without moving a, b, and c is clearly worse than rearranging all the colors.

• The algorithm does not guarantee completion . What if there is no color that is far enough from the existing colors in the list? The cycle will go on forever