23

I'm reading this article about material design. In the list of colors, there is a number next to each color that seems to darken the color as its value goes up.

enter image description here

What does this number means, more precisely?

Edit: As all the answers are about the hex values, I'm adding this edit to clarify the question. My question is about the left hand side numbers like 700, 500, ... not the hex numbers (#3f51b5, ...)

Edit 2: In RGB model, each of the Red, Green or Blue can have a value in scale of 0 - 255. 0 means lack of the color and 255 means the color exists in full power. Is there a numerical meaning for the left hand side numbers? Can I calculate the '700' of a color, assuming '500' of it is #3F51B5? Or these numbers are just name for different shades of color in a palette?

Ashkan Sarlak
  • 7,124
  • 6
  • 39
  • 51
  • 1
    This number is a representation for the color in the RGB scale. – Machado Aug 18 '15 at 11:15
  • 3
    I know about hexadecimal value of a color. My question is about the left hand side numbers (eg. 500, 700, A200, etc.) I'll edit my question to clarify it. – Ashkan Sarlak Aug 18 '15 at 12:23
  • Look at this article about Material Design, [Material design resources and tools](http://androidgifts.com/android-material-design-resources-and-tools/) – Fareed Aug 18 '15 at 13:24

6 Answers6

8

Those values are the relative lightness/darkness or "tint" of the color, where 50 is lightest and 900 is darkest. The Material Design guidelines suggest using the 500 tint as your primary color and the 700 tint as the darker status bar color.

The Annn values are if you're using the color as your accent color.

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

Kiliman
  • 18,460
  • 3
  • 39
  • 38
  • What is "tint"? I feel what it is qualitatively, but can you explain it in a quantitative sense? What is its scale? I'll add another edit. – Ashkan Sarlak Aug 19 '15 at 06:45
  • Tint is basically the shade of the color. I'm pretty sure that Google is using some sort of algorithm to generate these values. I don't think they've published it though. – Kiliman Aug 19 '15 at 12:16
3

The other answers are correct as well, but I think you are asking about the left hand side numbers. You can use these to specify your theme colors 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 in use, correspond the left hand side numbers to set up colors. My site is using variations of the purple theme in this example, and I can set the hue's different from what the Google settings were.

Steven Scott
  • 10,234
  • 9
  • 69
  • 117
  • Thanks for the input. Are you saying that you can define an arbitrary color for each value? The numbers are just a name for different shades in a palette or there is a meaning for them in a numerical sense? – Ashkan Sarlak Aug 19 '15 at 06:49
  • @AshkanSarlak As others have said, they do have meaning in the contrast of the color as well. I found references to using the numbers with themes, which is where I started using the numbers and changing my default Google colors. – Steven Scott Aug 19 '15 at 14:36
  • @AshkanSarlak The colors are the names in the Material CSS as well, for reference. When you select a color by the number (700 or A100 in my example), the CSS from Google knows what colors you are refering to, and will have the color hexadecimal values for displaying. – Steven Scott Aug 25 '15 at 14:32
1

The numbers refer to the darkness of a shade variant (inverse of HSL lightness). The numbers use a scale of 0 to 1000, where 0 is white and 1000 is black.

From the Android documentation for R.color:

system_accent1_0

Lightest shade of the accent color used by the system. White.

system_accent1_10

Shade of the accent system color at 99% lightness.

system_accent1_100

Shade of the accent system color at 90% lightness.

And so on.

The general formula is shadeVariant = 1000 - (lightness * 1000).

(The one curious exception is that the 500 shade variant uses 49% lightness instead of 50%, but this is probably an implementation detail that could be ignored when re-implementing.)

Knowing the formula should additionally make it easy to calculate these values directly. For example, using Polished, you would be able to setLightness(accent, 0.9) to calculate the 100 shade variant of an accent colour yourself in a Node.js app. From there it would be easy to build a utility function that can generate any variant of any colour.

Aaron Adams
  • 1,657
  • 16
  • 23
0

I found some information in this angular.io guide to theming:

In Material Design, each hues in a palette has an identifier number. These identifier numbers include 50, and then each 100 value between 100 and 900. The numbers order hues within a palette from lightest to darkest.

There you have it, the answer to your question: Those numbers are just static identifiers.

As an example of how they can be used, this guide to "Reading hues from palettes" states:

You can use the get-color-from-palette function to get specific hues from a palette by their number identifier.

@use '~@angular/material' as mat;

$my-palette: mat.define-palette(mat.$indigo-palette);

.my-custom-style {
 background: mat.get-color-from-palette($my-palette, '500');
 color: mat.get-color-from-palette($my-palette, '500-contrast');
}
Kerry Randolph
  • 591
  • 6
  • 15
-3

The number which you are seeing is the HEX (hexadecimal) values for the color tone and the color. You can use it in CSS files instead of writing i.e. black, white or blue.

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

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

LionBass
  • 25
  • 1
  • 4
-4

The number is codes given to each and all colorssupported by the system. Eachh color code contains symbol "#" and 6 letters or numbers. These numbers are in hexadecimal numeral system. For example "FF" in hexadecimal represents number 255 in Decimal.

Meaning of symbols: The first two symbols in HTML color code represents the intensity of red color. 00 is the least and FF is the most intense. The third and fourth represents intensity of green and fifth and sixth represents the intensity of blue. So with combining the intensity of red, green and blue we can mix almost any color that our heart desire.

Examples:

  • #FF0000: With this HTML code we tell browser to show maximum of red and no green and no blue. The result is of course pure red color.
  • #00FF00 - This results in pure green.
Eino Gourdin
  • 4,169
  • 3
  • 39
  • 67
Prashant_M
  • 2,868
  • 1
  • 31
  • 24