Skip to content

Instantly share code, notes, and snippets.

@fran-diaz
Last active August 29, 2015 14:09
Show Gist options
  • Select an option

  • Save fran-diaz/a55a38c53f98c92cfd0c to your computer and use it in GitHub Desktop.

Select an option

Save fran-diaz/a55a38c53f98c92cfd0c to your computer and use it in GitHub Desktop.
Material Design Color Classes for CSS, usefull to play with material design color scheme in your projects.
/**
* Material Design Color Classes for CSS, usefull to play with material design color scheme in your projects.
*
* @author Fran Díaz <fran.diaz.gonzalez@gmail.com>
* @github https://github.com/fran-diaz
*/
/* Text colors: */
.red {color:#f44336}
.red50 {color:#ffebee}
.red100 {color:#ffcdd2}
.red200 {color:#ef9a9a}
.red300 {color:#e57373}
.red400 {color:#ef5350}
.red500 {color:#f44336}
.red600 {color:#e53935}
.red700 {color:#d32f2f}
.red800 {color:#c62828}
.red900 {color:#b71c1c}
.redA100 {color:#ff8a80}
.redA200 {color:#ff5252}
.redA400 {color:#ff1744}
.redA700 {color:#d50000}
.pink {color:#e91e63}
.pink50 {color:#fce4ec}
.pink100 {color:#f8bbd0}
.pink200 {color:#f48fb1}
.pink300 {color:#f06292}
.pink400 {color:#ec407a}
.pink500 {color:#e91e63}
.pink600 {color:#d81b60}
.pink700 {color:#c2185b}
.pink800 {color:#ad1457}
.pink900 {color:#880e4f}
.pinkA100 {color:#ff80ab}
.pinkA200 {color:#ff4081}
.pinkA400 {color:#f50057}
.pinkA700 {color:#c51162}
.purple {color:#9c27b0}
.purple50 {color:#f3e5f5}
.purple100 {color:#e1bee7}
.purple200 {color:#ce93d8}
.purple300 {color:#ba68c8}
.purple400 {color:#ab47bc}
.purple500 {color:#9c27b0}
.purple600 {color:#8e24aa}
.purple700 {color:#7b1fa2}
.purple800 {color:#6a1b9a}
.purple900 {color:#4a148c}
.purpleA100 {color:#ea80fc}
.purpleA200 {color:#e040fb}
.purpleA400 {color:#d500f9}
.purpleA700 {color:#aa00ff}
.deep-purple {color:#673ab7}
.deep-purple50 {color:#ede7f6}
.deep-purple100 {color:#d1c4e9}
.deep-purple200 {color:#b39ddb}
.deep-purple300 {color:#9575cd}
.deep-purple400 {color:#7e57c2}
.deep-purple500 {color:#673ab7}
.deep-purple600 {color:#5e35b1}
.deep-purple700 {color:#512da8}
.deep-purple800 {color:#4527a0}
.deep-purple900 {color:#311b92}
.deep-purpleA100 {color:#b388ff}
.deep-purpleA200 {color:#7c4dff}
.deep-purpleA400 {color:#651fff}
.deep-purpleA700 {color:#6200ea}
.indigo {color:#3f51b5}
.indigo50 {color:#e8eaf6}
.indigo100 {color:#c5cae9}
.indigo200 {color:#9fa8da}
.indigo300 {color:#7986cb}
.indigo400 {color:#5c6bc0}
.indigo500 {color:#3f51b5}
.indigo600 {color:#3949ab}
.indigo700 {color:#303f9f}
.indigo800 {color:#283593}
.indigo900 {color:#1a237e}
.indigoA100 {color:#8c9eff}
.indigoA200 {color:#536dfe}
.indigoA400 {color:#3d5afe}
.indigoA700 {color:#304ffe}
.blue {color:#2196f3}
.blue50 {color:#e3f2fd}
.blue100 {color:#bbdefb}
.blue200 {color:#90caf9}
.blue300 {color:#64b5f6}
.blue400 {color:#42a5f5}
.blue500 {color:#2196f3}
.blue600 {color:#1e88e5}
.blue700 {color:#1976d2}
.blue800 {color:#1565c0}
.blue900 {color:#0d47a1}
.blueA100 {color:#82b1ff}
.blueA200 {color:#448aff}
.blueA400 {color:#2979ff}
.blueA700 {color:#2962ff}
.light-blue {color:#03a9f4}
.light-blue50 {color:#e1f5fe}
.light-blue100 {color:#b3e5fc}
.light-blue200 {color:#81d4fa}
.light-blue300 {color:#4fc3f7}
.light-blue400 {color:#29b6f6}
.light-blue500 {color:#03a9f4}
.light-blue600 {color:#039be5}
.light-blue700 {color:#0288d1}
.light-blue800 {color:#0277bd}
.light-blue900 {color:#01579b}
.light-blueA100 {color:#80d8ff}
.light-blueA200 {color:#40c4ff}
.light-blueA400 {color:#00b0ff}
.light-blueA700 {color:#0091ea}
.cyan {color:#00bcd4}
.cyan50 {color:#e0f7fa}
.cyan100 {color:#b2ebf2}
.cyan200 {color:#80deea}
.cyan300 {color:#4dd0e1}
.cyan400 {color:#26c6da}
.cyan500 {color:#00bcd4}
.cyan600 {color:#00acc1}
.cyan700 {color:#0097a7}
.cyan800 {color:#00838f}
.cyan900 {color:#006064}
.cyanA100 {color:#84ffff}
.cyanA200 {color:#18ffff}
.cyanA400 {color:#00e5ff}
.cyanA700 {color:#00b8d4}
.teal {color:#009688}
.teal50 {color:#e0f2f1}
.teal100 {color:#b2dfdb}
.teal200 {color:#80cbc4}
.teal300 {color:#4db6ac}
.teal400 {color:#26a69a}
.teal500 {color:#009688}
.teal600 {color:#00897b}
.teal700 {color:#00796b}
.teal800 {color:#00695c}
.teal900 {color:#004d40}
.tealA100 {color:#a7ffeb}
.tealA200 {color:#64ffda}
.tealA400 {color:#1de9b6}
.tealA700 {color:#00bfa5}
.green {color:#4caf50}
.green50 {color:#e8f5e9}
.green100 {color:#c8e6c9}
.green200 {color:#a5d6a7}
.green300 {color:#81c784}
.green400 {color:#66bb6a}
.green500 {color:#4caf50}
.green600 {color:#43a047}
.green700 {color:#388e3c}
.green800 {color:#2e7d32}
.green900 {color:#1b5e20}
.greenA100 {color:#b9f6ca}
.greenA200 {color:#69f0ae}
.greenA400 {color:#00e676}
.greenA700 {color:#00c853}
.light-green {color:#8bc34a}
.light-green50 {color:#f1f8e9}
.light-green100 {color:#dcedc8}
.light-green200 {color:#c5e1a5}
.light-green300 {color:#aed581}
.light-green400 {color:#9ccc65}
.light-green500 {color:#8bc34a}
.light-green600 {color:#7cb342}
.light-green700 {color:#689f38}
.light-green800 {color:#558b2f}
.light-green900 {color:#33691e}
.light-greenA100 {color:#ccff90}
.light-greenA200 {color:#b2ff59}
.light-greenA400 {color:#76ff03}
.light-greenA700 {color:#64dd17}
.lime {color:#cddc39}
.lime50 {color:#f9fbe7}
.lime100 {color:#f0f4c3}
.lime200 {color:#e6ee9c}
.lime300 {color:#dce775}
.lime400 {color:#d4e157}
.lime500 {color:#cddc39}
.lime600 {color:#c0ca33}
.lime700 {color:#afb42b}
.lime800 {color:#9e9d24}
.lime900 {color:#827717}
.limeA100 {color:#f4ff81}
.limeA200 {color:#eeff41}
.limeA400 {color:#c6ff00}
.limeA700 {color:#aeea00}
.yellow {color:#ffeb3b}
.yellow50 {color:#fffde7}
.yellow100 {color:#fff9c4}
.yellow200 {color:#fff59d}
.yellow300 {color:#fff176}
.yellow400 {color:#ffee58}
.yellow500 {color:#ffeb3b}
.yellow600 {color:#fdd835}
.yellow700 {color:#fbc02d}
.yellow800 {color:#f9a825}
.yellow900 {color:#f57f17}
.yellowA100 {color:#ffff8d}
.yellowA200 {color:#ffff00}
.yellowA400 {color:#ffea00}
.yellowA700 {color:#ffd600}
.amber {color:#ffc107}
.amber50 {color:#fff8e1}
.amber100 {color:#ffecb3}
.amber200 {color:#ffe082}
.amber300 {color:#ffd54f}
.amber400 {color:#ffca28}
.amber500 {color:#ffc107}
.amber600 {color:#ffb300}
.amber700 {color:#ffa000}
.amber800 {color:#ff8f00}
.amber900 {color:#ff6f00}
.amberA100 {color:#ffe57f}
.amberA200 {color:#ffd740}
.amberA400 {color:#ffc400}
.amberA700 {color:#ffab00}
.orange {color:#ff9800}
.orange50 {color:#fff3e0}
.orange100 {color:#ffe0b2}
.orange200 {color:#ffcc80}
.orange300 {color:#ffb74d}
.orange400 {color:#ffa726}
.orange500 {color:#ff9800}
.orange600 {color:#fb8c00}
.orange700 {color:#f57c00}
.orange800 {color:#ef6c00}
.orange900 {color:#e65100}
.orangeA100 {color:#ffd180}
.orangeA200 {color:#ffab40}
.orangeA400 {color:#ff9100}
.orangeA700 {color:#ff6d00}
.deep-orange {color:#ff5722}
.deep-orange50 {color:#fbe9e7}
.deep-orange100 {color:#ffccbc}
.deep-orange200 {color:#ffab91}
.deep-orange300 {color:#ff8a65}
.deep-orange400 {color:#ff7043}
.deep-orange500 {color:#ff5722}
.deep-orange600 {color:#f4511e}
.deep-orange700 {color:#e64a19}
.deep-orange800 {color:#d84315}
.deep-orange900 {color:#bf360c}
.deep-orangeA100 {color:#ff9e80}
.deep-orangeA200 {color:#ff6e40}
.deep-orangeA400 {color:#ff3d00}
.deep-orangeA700 {color:#dd2c00}
.brown {color:#795548}
.brown50 {color:#efebe9}
.brown100 {color:#d7ccc8}
.brown200 {color:#bcaaa4}
.brown300 {color:#a1887f}
.brown400 {color:#8d6e63}
.brown500 {color:#795548}
.brown600 {color:#6d4c41}
.brown700 {color:#5d4037}
.brown800 {color:#4e342e}
.brown900 {color:#3e2723}
.grey {color:#9e9e9e}
.grey50 {color:#fafafa}
.grey100 {color:#f5f5f5}
.grey200 {color:#eeeeee}
.grey300 {color:#e0e0e0}
.grey400 {color:#bdbdbd}
.grey500 {color:#9e9e9e}
.grey600 {color:#757575}
.grey700 {color:#616161}
.grey800 {color:#424242}
.grey900 {color:#212121}
.blue-grey {color:#607d8b}
.blue-grey50 {color:#eceff1}
.blue-grey100 {color:#cfd8dc}
.blue-grey200 {color:#b0bec5}
.blue-grey300 {color:#90a4ae}
.blue-grey400 {color:#78909c}
.blue-grey500 {color:#607d8b}
.blue-grey600 {color:#546e7a}
.blue-grey700 {color:#455a64}
.blue-grey800 {color:#37474f}
.blue-grey900 {color:#263238}
.black {color:#000000}
.white {color:#ffffff}
/* Background Colors: */
.red_bg {background:#f44336}
.red50_bg {background:#ffebee}
.red100_bg {background:#ffcdd2}
.red200_bg {background:#ef9a9a}
.red300_bg {background:#e57373}
.red400_bg {background:#ef5350}
.red500_bg {background:#f44336}
.red600_bg {background:#e53935}
.red700_bg {background:#d32f2f}
.red800_bg {background:#c62828}
.red900_bg {background:#b71c1c}
.redA100_bg {background:#ff8a80}
.redA200_bg {background:#ff5252}
.redA400_bg {background:#ff1744}
.redA700_bg {background:#d50000}
.pink_bg {background:#e91e63}
.pink50_bg {background:#fce4ec}
.pink100_bg {background:#f8bbd0}
.pink200_bg {background:#f48fb1}
.pink300_bg {background:#f06292}
.pink400_bg {background:#ec407a}
.pink500_bg {background:#e91e63}
.pink600_bg {background:#d81b60}
.pink700_bg {background:#c2185b}
.pink800_bg {background:#ad1457}
.pink900_bg {background:#880e4f}
.pinkA100_bg {background:#ff80ab}
.pinkA200_bg {background:#ff4081}
.pinkA400_bg {background:#f50057}
.pinkA700_bg {background:#c51162}
.purple_bg {background:#9c27b0}
.purple50_bg {background:#f3e5f5}
.purple100_bg {background:#e1bee7}
.purple200_bg {background:#ce93d8}
.purple300_bg {background:#ba68c8}
.purple400_bg {background:#ab47bc}
.purple500_bg {background:#9c27b0}
.purple600_bg {background:#8e24aa}
.purple700_bg {background:#7b1fa2}
.purple800_bg {background:#6a1b9a}
.purple900_bg {background:#4a148c}
.purpleA100_bg {background:#ea80fc}
.purpleA200_bg {background:#e040fb}
.purpleA400_bg {background:#d500f9}
.purpleA700_bg {background:#aa00ff}
.deep-purple_bg {background:#673ab7}
.deep-purple50_bg {background:#ede7f6}
.deep-purple100_bg {background:#d1c4e9}
.deep-purple200_bg {background:#b39ddb}
.deep-purple300_bg {background:#9575cd}
.deep-purple400_bg {background:#7e57c2}
.deep-purple500_bg {background:#673ab7}
.deep-purple600_bg {background:#5e35b1}
.deep-purple700_bg {background:#512da8}
.deep-purple800_bg {background:#4527a0}
.deep-purple900_bg {background:#311b92}
.deep-purpleA100_bg {background:#b388ff}
.deep-purpleA200_bg {background:#7c4dff}
.deep-purpleA400_bg {background:#651fff}
.deep-purpleA700_bg {background:#6200ea}
.indigo_bg {background:#3f51b5}
.indigo50_bg {background:#e8eaf6}
.indigo100_bg {background:#c5cae9}
.indigo200_bg {background:#9fa8da}
.indigo300_bg {background:#7986cb}
.indigo400_bg {background:#5c6bc0}
.indigo500_bg {background:#3f51b5}
.indigo600_bg {background:#3949ab}
.indigo700_bg {background:#303f9f}
.indigo800_bg {background:#283593}
.indigo900_bg {background:#1a237e}
.indigoA100_bg {background:#8c9eff}
.indigoA200_bg {background:#536dfe}
.indigoA400_bg {background:#3d5afe}
.indigoA700_bg {background:#304ffe}
.blue_bg {background:#2196f3}
.blue50_bg {background:#e3f2fd}
.blue100_bg {background:#bbdefb}
.blue200_bg {background:#90caf9}
.blue300_bg {background:#64b5f6}
.blue400_bg {background:#42a5f5}
.blue500_bg {background:#2196f3}
.blue600_bg {background:#1e88e5}
.blue700_bg {background:#1976d2}
.blue800_bg {background:#1565c0}
.blue900_bg {background:#0d47a1}
.blueA100_bg {background:#82b1ff}
.blueA200_bg {background:#448aff}
.blueA400_bg {background:#2979ff}
.blueA700_bg {background:#2962ff}
.light-blue_bg {background:#03a9f4}
.light-blue50_bg {background:#e1f5fe}
.light-blue100_bg {background:#b3e5fc}
.light-blue200_bg {background:#81d4fa}
.light-blue300_bg {background:#4fc3f7}
.light-blue400_bg {background:#29b6f6}
.light-blue500_bg {background:#03a9f4}
.light-blue600_bg {background:#039be5}
.light-blue700_bg {background:#0288d1}
.light-blue800_bg {background:#0277bd}
.light-blue900_bg {background:#01579b}
.light-blueA100_bg {background:#80d8ff}
.light-blueA200_bg {background:#40c4ff}
.light-blueA400_bg {background:#00b0ff}
.light-blueA700_bg {background:#0091ea}
.cyan_bg {background:#00bcd4}
.cyan50_bg {background:#e0f7fa}
.cyan100_bg {background:#b2ebf2}
.cyan200_bg {background:#80deea}
.cyan300_bg {background:#4dd0e1}
.cyan400_bg {background:#26c6da}
.cyan500_bg {background:#00bcd4}
.cyan600_bg {background:#00acc1}
.cyan700_bg {background:#0097a7}
.cyan800_bg {background:#00838f}
.cyan900_bg {background:#006064}
.cyanA100_bg {background:#84ffff}
.cyanA200_bg {background:#18ffff}
.cyanA400_bg {background:#00e5ff}
.cyanA700_bg {background:#00b8d4}
.teal_bg {background:#009688}
.teal50_bg {background:#e0f2f1}
.teal100_bg {background:#b2dfdb}
.teal200_bg {background:#80cbc4}
.teal300_bg {background:#4db6ac}
.teal400_bg {background:#26a69a}
.teal500_bg {background:#009688}
.teal600_bg {background:#00897b}
.teal700_bg {background:#00796b}
.teal800_bg {background:#00695c}
.teal900_bg {background:#004d40}
.tealA100_bg {background:#a7ffeb}
.tealA200_bg {background:#64ffda}
.tealA400_bg {background:#1de9b6}
.tealA700_bg {background:#00bfa5}
.green_bg {background:#4caf50}
.green50_bg {background:#e8f5e9}
.green100_bg {background:#c8e6c9}
.green200_bg {background:#a5d6a7}
.green300_bg {background:#81c784}
.green400_bg {background:#66bb6a}
.green500_bg {background:#4caf50}
.green600_bg {background:#43a047}
.green700_bg {background:#388e3c}
.green800_bg {background:#2e7d32}
.green900_bg {background:#1b5e20}
.greenA100_bg {background:#b9f6ca}
.greenA200_bg {background:#69f0ae}
.greenA400_bg {background:#00e676}
.greenA700_bg {background:#00c853}
.light-green_bg {background:#8bc34a}
.light-green50_bg {background:#f1f8e9}
.light-green100_bg {background:#dcedc8}
.light-green200_bg {background:#c5e1a5}
.light-green300_bg {background:#aed581}
.light-green400_bg {background:#9ccc65}
.light-green500_bg {background:#8bc34a}
.light-green600_bg {background:#7cb342}
.light-green700_bg {background:#689f38}
.light-green800_bg {background:#558b2f}
.light-green900_bg {background:#33691e}
.light-greenA100_bg {background:#ccff90}
.light-greenA200_bg {background:#b2ff59}
.light-greenA400_bg {background:#76ff03}
.light-greenA700_bg {background:#64dd17}
.lime_bg {background:#cddc39}
.lime50_bg {background:#f9fbe7}
.lime100_bg {background:#f0f4c3}
.lime200_bg {background:#e6ee9c}
.lime300_bg {background:#dce775}
.lime400_bg {background:#d4e157}
.lime500_bg {background:#cddc39}
.lime600_bg {background:#c0ca33}
.lime700_bg {background:#afb42b}
.lime800_bg {background:#9e9d24}
.lime900_bg {background:#827717}
.limeA100_bg {background:#f4ff81}
.limeA200_bg {background:#eeff41}
.limeA400_bg {background:#c6ff00}
.limeA700_bg {background:#aeea00}
.yellow_bg {background:#ffeb3b}
.yellow50_bg {background:#fffde7}
.yellow100_bg {background:#fff9c4}
.yellow200_bg {background:#fff59d}
.yellow300_bg {background:#fff176}
.yellow400_bg {background:#ffee58}
.yellow500_bg {background:#ffeb3b}
.yellow600_bg {background:#fdd835}
.yellow700_bg {background:#fbc02d}
.yellow800_bg {background:#f9a825}
.yellow900_bg {background:#f57f17}
.yellowA100_bg {background:#ffff8d}
.yellowA200_bg {background:#ffff00}
.yellowA400_bg {background:#ffea00}
.yellowA700_bg {background:#ffd600}
.amber_bg {background:#ffc107}
.amber50_bg {background:#fff8e1}
.amber100_bg {background:#ffecb3}
.amber200_bg {background:#ffe082}
.amber300_bg {background:#ffd54f}
.amber400_bg {background:#ffca28}
.amber500_bg {background:#ffc107}
.amber600_bg {background:#ffb300}
.amber700_bg {background:#ffa000}
.amber800_bg {background:#ff8f00}
.amber900_bg {background:#ff6f00}
.amberA100_bg {background:#ffe57f}
.amberA200_bg {background:#ffd740}
.amberA400_bg {background:#ffc400}
.amberA700_bg {background:#ffab00}
.orange_bg {background:#ff9800}
.orange50_bg {background:#fff3e0}
.orange100_bg {background:#ffe0b2}
.orange200_bg {background:#ffcc80}
.orange300_bg {background:#ffb74d}
.orange400_bg {background:#ffa726}
.orange500_bg {background:#ff9800}
.orange600_bg {background:#fb8c00}
.orange700_bg {background:#f57c00}
.orange800_bg {background:#ef6c00}
.orange900_bg {background:#e65100}
.orangeA100_bg {background:#ffd180}
.orangeA200_bg {background:#ffab40}
.orangeA400_bg {background:#ff9100}
.orangeA700_bg {background:#ff6d00}
.deep-orange_bg {background:#ff5722}
.deep-orange50_bg {background:#fbe9e7}
.deep-orange100_bg {background:#ffccbc}
.deep-orange200_bg {background:#ffab91}
.deep-orange300_bg {background:#ff8a65}
.deep-orange400_bg {background:#ff7043}
.deep-orange500_bg {background:#ff5722}
.deep-orange600_bg {background:#f4511e}
.deep-orange700_bg {background:#e64a19}
.deep-orange800_bg {background:#d84315}
.deep-orange900_bg {background:#bf360c}
.deep-orangeA100_bg {background:#ff9e80}
.deep-orangeA200_bg {background:#ff6e40}
.deep-orangeA400_bg {background:#ff3d00}
.deep-orangeA700_bg {background:#dd2c00}
.brown_bg {background:#795548}
.brown50_bg {background:#efebe9}
.brown100_bg {background:#d7ccc8}
.brown200_bg {background:#bcaaa4}
.brown300_bg {background:#a1887f}
.brown400_bg {background:#8d6e63}
.brown500_bg {background:#795548}
.brown600_bg {background:#6d4c41}
.brown700_bg {background:#5d4037}
.brown800_bg {background:#4e342e}
.brown900_bg {background:#3e2723}
.grey_bg {background:#9e9e9e}
.grey50_bg {background:#fafafa}
.grey100_bg {background:#f5f5f5}
.grey200_bg {background:#eeeeee}
.grey300_bg {background:#e0e0e0}
.grey400_bg {background:#bdbdbd}
.grey500_bg {background:#9e9e9e}
.grey600_bg {background:#757575}
.grey700_bg {background:#616161}
.grey800_bg {background:#424242}
.grey900_bg {background:#212121}
.blue-grey_bg {background:#607d8b}
.blue-grey50_bg {background:#eceff1}
.blue-grey100_bg {background:#cfd8dc}
.blue-grey200_bg {background:#b0bec5}
.blue-grey300_bg {background:#90a4ae}
.blue-grey400_bg {background:#78909c}
.blue-grey500_bg {background:#607d8b}
.blue-grey600_bg {background:#546e7a}
.blue-grey700_bg {background:#455a64}
.blue-grey800_bg {background:#37474f}
.blue-grey900_bg {background:#263238}
.black_bg {background:#000000}
.white_bg {background:#ffffff}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment