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 programatically 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