Colors

Color Definitions

Every material design color is available as a sass variable in the form of $md-COLOR-HUE and $md-COLOR-a-HUE to get a base color and accent color respectively. If you waned to style something with a background of blue and a text color of a green accent, you can use the variables as follows:

.some-class {
  background: $md-blue-500;
  color: $md-green-a-100;
}

All colors will have primary colors with suffixes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and all colors except for brown, grey and blue-grey will have accent suffixes of 100, 200, 400, 700. In addition, the $md-black-base and $md-white-base variables are available.

To help with getting specific colors, there is a Sass Map of every color and a mixin that will create two class names for each material design color.

$md-color-map

This map contains every material design color so that you can quickly access them and optionally use the Sass Map functions to programmatically get colors. This is really just used for the react-md-color-class-names mixin.

mixin react-md-color-class-names

This mixin will create two class names for every material design color: one for styling color (--color) and the other for styling background (--background).

For example, if you want to display a warning by styling the background orange, you could apply .md-orange--background to your component.

By default, these utility class names will not be included with the react-md-everything mixin. They can be included by either manually using the react-md-color-class-names mixin or by setting the $md-colors-include-class-names variable to true before include the react-md-everything mixin;

View the SassDoc tab for more information.

Available Colors

  • red

    md-red-500
  • md-red-50
  • md-red-100
  • md-red-200
  • md-red-300
  • md-red-400
  • md-red-500
  • md-red-600
  • md-red-700
  • md-red-800
  • md-red-900
  • md-red-a-100
  • md-red-a-200
  • md-red-a-400
  • md-red-a-700
  • pink

    md-pink-500
  • md-pink-50
  • md-pink-100
  • md-pink-200
  • md-pink-300
  • md-pink-400
  • md-pink-500
  • md-pink-600
  • md-pink-700
  • md-pink-800
  • md-pink-900
  • md-pink-a-100
  • md-pink-a-200
  • md-pink-a-400
  • md-pink-a-700
  • purple

    md-purple-500
  • md-purple-50
  • md-purple-100
  • md-purple-200
  • md-purple-300
  • md-purple-400
  • md-purple-500
  • md-purple-600
  • md-purple-700
  • md-purple-800
  • md-purple-900
  • md-purple-a-100
  • md-purple-a-200
  • md-purple-a-400
  • md-purple-a-700
  • deep purple

    md-deep-purple-500
  • md-deep-purple-50
  • md-deep-purple-100
  • md-deep-purple-200
  • md-deep-purple-300
  • md-deep-purple-400
  • md-deep-purple-500
  • md-deep-purple-600
  • md-deep-purple-700
  • md-deep-purple-800
  • md-deep-purple-900
  • md-deep-purple-a-100
  • md-deep-purple-a-200
  • md-deep-purple-a-400
  • md-deep-purple-a-700
  • indigo

    md-indigo-500
  • md-indigo-50
  • md-indigo-100
  • md-indigo-200
  • md-indigo-300
  • md-indigo-400
  • md-indigo-500
  • md-indigo-600
  • md-indigo-700
  • md-indigo-800
  • md-indigo-900
  • md-indigo-a-100
  • md-indigo-a-200
  • md-indigo-a-400
  • md-indigo-a-700
  • blue

    md-blue-500
  • md-blue-50
  • md-blue-100
  • md-blue-200
  • md-blue-300
  • md-blue-400
  • md-blue-500
  • md-blue-600
  • md-blue-700
  • md-blue-800
  • md-blue-900
  • md-blue-a-100
  • md-blue-a-200
  • md-blue-a-400
  • md-blue-a-700
  • light blue

    md-light-blue-500
  • md-light-blue-50
  • md-light-blue-100
  • md-light-blue-200
  • md-light-blue-300
  • md-light-blue-400
  • md-light-blue-500
  • md-light-blue-600
  • md-light-blue-700
  • md-light-blue-800
  • md-light-blue-900
  • md-light-blue-a-100
  • md-light-blue-a-200
  • md-light-blue-a-400
  • md-light-blue-a-700
  • cyan

    md-cyan-500
  • md-cyan-50
  • md-cyan-100
  • md-cyan-200
  • md-cyan-300
  • md-cyan-400
  • md-cyan-500
  • md-cyan-600
  • md-cyan-700
  • md-cyan-800
  • md-cyan-900
  • md-cyan-a-100
  • md-cyan-a-200
  • md-cyan-a-400
  • md-cyan-a-700
  • teal

    md-teal-500
  • md-teal-50
  • md-teal-100
  • md-teal-200
  • md-teal-300
  • md-teal-400
  • md-teal-500
  • md-teal-600
  • md-teal-700
  • md-teal-800
  • md-teal-900
  • md-teal-a-100
  • md-teal-a-200
  • md-teal-a-400
  • md-teal-a-700
  • green

    md-green-500
  • md-green-50
  • md-green-100
  • md-green-200
  • md-green-300
  • md-green-400
  • md-green-500
  • md-green-600
  • md-green-700
  • md-green-800
  • md-green-900
  • md-green-a-100
  • md-green-a-200
  • md-green-a-400
  • md-green-a-700
  • light green

    md-light-green-500
  • md-light-green-50
  • md-light-green-100
  • md-light-green-200
  • md-light-green-300
  • md-light-green-400
  • md-light-green-500
  • md-light-green-600
  • md-light-green-700
  • md-light-green-800
  • md-light-green-900
  • md-light-green-a-100
  • md-light-green-a-200
  • md-light-green-a-400
  • md-light-green-a-700
  • lime

    md-lime-500
  • md-lime-50
  • md-lime-100
  • md-lime-200
  • md-lime-300
  • md-lime-400
  • md-lime-500
  • md-lime-600
  • md-lime-700
  • md-lime-800
  • md-lime-900
  • md-lime-a-100
  • md-lime-a-200
  • md-lime-a-400
  • md-lime-a-700
  • yellow

    md-yellow-500
  • md-yellow-50
  • md-yellow-100
  • md-yellow-200
  • md-yellow-300
  • md-yellow-400
  • md-yellow-500
  • md-yellow-600
  • md-yellow-700
  • md-yellow-800
  • md-yellow-900
  • md-yellow-a-100
  • md-yellow-a-200
  • md-yellow-a-400
  • md-yellow-a-700
  • amber

    md-amber-500
  • md-amber-50
  • md-amber-100
  • md-amber-200
  • md-amber-300
  • md-amber-400
  • md-amber-500
  • md-amber-600
  • md-amber-700
  • md-amber-800
  • md-amber-900
  • md-amber-a-100
  • md-amber-a-200
  • md-amber-a-400
  • md-amber-a-700
  • orange

    md-orange-500
  • md-orange-50
  • md-orange-100
  • md-orange-200
  • md-orange-300
  • md-orange-400
  • md-orange-500
  • md-orange-600
  • md-orange-700
  • md-orange-800
  • md-orange-900
  • md-orange-a-100
  • md-orange-a-200
  • md-orange-a-400
  • md-orange-a-700
  • deep orange

    md-deep-orange-500
  • md-deep-orange-50
  • md-deep-orange-100
  • md-deep-orange-200
  • md-deep-orange-300
  • md-deep-orange-400
  • md-deep-orange-500
  • md-deep-orange-600
  • md-deep-orange-700
  • md-deep-orange-800
  • md-deep-orange-900
  • md-deep-orange-a-100
  • md-deep-orange-a-200
  • md-deep-orange-a-400
  • md-deep-orange-a-700
  • brown

    md-brown-500
  • md-brown-50
  • md-brown-100
  • md-brown-200
  • md-brown-300
  • md-brown-400
  • md-brown-500
  • md-brown-600
  • md-brown-700
  • md-brown-800
  • md-brown-900
  • grey

    md-grey-500
  • md-grey-50
  • md-grey-100
  • md-grey-200
  • md-grey-300
  • md-grey-400
  • md-grey-500
  • md-grey-600
  • md-grey-700
  • md-grey-800
  • md-grey-900
  • blue grey

    md-blue-grey-500
  • md-blue-grey-50
  • md-blue-grey-100
  • md-blue-grey-200
  • md-blue-grey-300
  • md-blue-grey-400
  • md-blue-grey-500
  • md-blue-grey-600
  • md-blue-grey-700
  • md-blue-grey-800
  • md-blue-grey-900