What does the number next to a color mean?

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

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.

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');}