Skip to main content
react-md
Colors And Theming - Color Palette

#Color Palette

I recommend reading the color system documentation from the main material design website for a better understanding of the color system.

Material design provides a default color palette that has 256 colors for you to pick and choose from, but you are not required to use this color palette within react-md. This number might seem overwhelming at first, but you will never need all the colors at once and will primarily only use 3 to 6 colors. Every color will be exported as a Sass variable so you can easily use them within your stylesheets, but they will also be included in the scssVariables bundle at @react-md/theme/dist/scssVariables if you'd like to access them in javascript.

All the colors will be available below showing their Sass variable name as well as the hex value. When accessing the colors in javascript, you can extract all the colors with the following snippet:

import scssVariables from "@react-md/theme/dist/scssVariables";

// get all the colors from the color palette
// only the color variables in this package will not be prefixed
// with rmd-theme
const colorKeys = Object.keys(scssVariables).filter(
  name => !/^rmd-theme/.test(name)
);
  1. red
    $rmd-red-500#f44336
  2. $rmd-red-50#ffebee
  3. $rmd-red-100#ffcdd2
  4. $rmd-red-200#ef9a9a
  5. $rmd-red-300#e57373
  6. $rmd-red-400#ef5350
  7. $rmd-red-500#f44336
  8. $rmd-red-600#e53935
  9. $rmd-red-700#d32f2f
  10. $rmd-red-800#c62828
  11. $rmd-red-900#b71c1c
  12. $rmd-red-a-100#ff8a80
  13. $rmd-red-a-200#ff5252
  14. $rmd-red-a-400#ff1744
  15. $rmd-red-a-700#d50000
  1. pink
    $rmd-pink-500#e91e63
  2. $rmd-pink-50#fce4ec
  3. $rmd-pink-100#f8bbd0
  4. $rmd-pink-200#f48fb1
  5. $rmd-pink-300#f06292
  6. $rmd-pink-400#ec407a
  7. $rmd-pink-500#e91e63
  8. $rmd-pink-600#d81b60
  9. $rmd-pink-700#c2185b
  10. $rmd-pink-800#ad1457
  11. $rmd-pink-900#880e4f
  12. $rmd-pink-a-100#ff80ab
  13. $rmd-pink-a-200#ff4081
  14. $rmd-pink-a-400#f50057
  15. $rmd-pink-a-700#c51162
  1. purple
    $rmd-purple-500#9c27b0
  2. $rmd-purple-50#f3e5f5
  3. $rmd-purple-100#e1bee7
  4. $rmd-purple-200#ce93d8
  5. $rmd-purple-300#ba68c8
  6. $rmd-purple-400#ab47bc
  7. $rmd-purple-500#9c27b0
  8. $rmd-purple-600#8e24aa
  9. $rmd-purple-700#7b1fa2
  10. $rmd-purple-800#6a1b9a
  11. $rmd-purple-900#4a148c
  12. $rmd-purple-a-100#ea80fc
  13. $rmd-purple-a-200#e040fb
  14. $rmd-purple-a-400#d500f9
  15. $rmd-purple-a-700#a0fa0f
  1. deep purple
    $rmd-deep-purple-500#673ab7
  2. $rmd-deep-purple-50#ede7f6
  3. $rmd-deep-purple-100#d1c4e9
  4. $rmd-deep-purple-200#b39ddb
  5. $rmd-deep-purple-300#9575cd
  6. $rmd-deep-purple-400#7e57c2
  7. $rmd-deep-purple-500#673ab7
  8. $rmd-deep-purple-600#5e35b1
  9. $rmd-deep-purple-700#512da8
  10. $rmd-deep-purple-800#4527a0
  11. $rmd-deep-purple-900#311b92
  12. $rmd-deep-purple-a-100#b388ff
  13. $rmd-deep-purple-a-200#7c4dff
  14. $rmd-deep-purple-a-400#651fff
  15. $rmd-deep-purple-a-700#6200ea
  1. indigo
    $rmd-indigo-500#3f51b5
  2. $rmd-indigo-50#e8eaf6
  3. $rmd-indigo-100#c5cae9
  4. $rmd-indigo-200#9fa8da
  5. $rmd-indigo-300#7986cb
  6. $rmd-indigo-400#5c6bc0
  7. $rmd-indigo-500#3f51b5
  8. $rmd-indigo-600#3949ab
  9. $rmd-indigo-700#303f9f
  10. $rmd-indigo-800#283593
  11. $rmd-indigo-900#1a237e
  12. $rmd-indigo-a-100#8c9eff
  13. $rmd-indigo-a-200#536dfe
  14. $rmd-indigo-a-400#3d5afe
  15. $rmd-indigo-a-700#304ffe
  1. blue
    $rmd-blue-500#2196f3
  2. $rmd-blue-50#e3f2fd
  3. $rmd-blue-100#bbdefb
  4. $rmd-blue-200#90caf9
  5. $rmd-blue-300#64b5f6
  6. $rmd-blue-400#42a5f5
  7. $rmd-blue-500#2196f3
  8. $rmd-blue-600#1e88e5
  9. $rmd-blue-700#1976d2
  10. $rmd-blue-800#1565c0
  11. $rmd-blue-900#0d47a1
  12. $rmd-blue-a-100#82b1ff
  13. $rmd-blue-a-200#448aff
  14. $rmd-blue-a-400#2979ff
  15. $rmd-blue-a-700#2962ff
  1. light blue
    $rmd-light-blue-500#03a9f4
  2. $rmd-light-blue-50#e1f5fe
  3. $rmd-light-blue-100#b3e5fc
  4. $rmd-light-blue-200#81d4fa
  5. $rmd-light-blue-300#4fc3f7
  6. $rmd-light-blue-400#29b6f6
  7. $rmd-light-blue-500#03a9f4
  8. $rmd-light-blue-600#039be5
  9. $rmd-light-blue-700#0288d1
  10. $rmd-light-blue-800#0277bd
  11. $rmd-light-blue-900#01579b
  12. $rmd-light-blue-a-100#80d8ff
  13. $rmd-light-blue-a-200#40c4ff
  14. $rmd-light-blue-a-400#00b0ff
  15. $rmd-light-blue-a-700#0091ea
  1. cyan
    $rmd-cyan-500#00bcd4
  2. $rmd-cyan-50#e0f7fa
  3. $rmd-cyan-100#b2ebf2
  4. $rmd-cyan-200#80deea
  5. $rmd-cyan-300#4dd0e1
  6. $rmd-cyan-400#26c6da
  7. $rmd-cyan-500#00bcd4
  8. $rmd-cyan-600#00acc1
  9. $rmd-cyan-700#0097a7
  10. $rmd-cyan-800#00838f
  11. $rmd-cyan-900#006064
  12. $rmd-cyan-a-100#84ffff
  13. $rmd-cyan-a-200#18ffff
  14. $rmd-cyan-a-400#00e5ff
  15. $rmd-cyan-a-700#00b8d4
  1. teal
    $rmd-teal-500#009688
  2. $rmd-teal-50#e0f2f1
  3. $rmd-teal-100#b2dfdb
  4. $rmd-teal-200#80cbc4
  5. $rmd-teal-300#4db6ac
  6. $rmd-teal-400#26a69a
  7. $rmd-teal-500#009688
  8. $rmd-teal-600#00897b
  9. $rmd-teal-700#00796b
  10. $rmd-teal-800#00695c
  11. $rmd-teal-900#004d40
  12. $rmd-teal-a-100#a7ffeb
  13. $rmd-teal-a-200#64ffda
  14. $rmd-teal-a-400#1de9b6
  15. $rmd-teal-a-700#00bfa5
  1. green
    $rmd-green-500#4caf50
  2. $rmd-green-50#e8f5e9
  3. $rmd-green-100#c8e6c9
  4. $rmd-green-200#a5d6a7
  5. $rmd-green-300#81c784
  6. $rmd-green-400#66bb6a
  7. $rmd-green-500#4caf50
  8. $rmd-green-600#43a047
  9. $rmd-green-700#388e3c
  10. $rmd-green-800#2e7d32
  11. $rmd-green-900#1b5e20
  12. $rmd-green-a-100#b9f6ca
  13. $rmd-green-a-200#69f0ae
  14. $rmd-green-a-400#00e676
  15. $rmd-green-a-700#00c853
  1. light green
    $rmd-light-green-500#8bc34a
  2. $rmd-light-green-50#f1f8e9
  3. $rmd-light-green-100#dcedc8
  4. $rmd-light-green-200#c5e1a5
  5. $rmd-light-green-300#aed581
  6. $rmd-light-green-400#9ccc65
  7. $rmd-light-green-500#8bc34a
  8. $rmd-light-green-600#7cb342
  9. $rmd-light-green-700#689f38
  10. $rmd-light-green-800#558b2f
  11. $rmd-light-green-900#33691e
  12. $rmd-light-green-a-100#ccff90
  13. $rmd-light-green-a-200#b2ff59
  14. $rmd-light-green-a-400#76ff03
  15. $rmd-light-green-a-700#64dd17
  1. lime
    $rmd-lime-500#cddc39
  2. $rmd-lime-50#f9fbe7
  3. $rmd-lime-100#f0f4c3
  4. $rmd-lime-200#e6ee9c
  5. $rmd-lime-300#dce775
  6. $rmd-lime-400#d4e157
  7. $rmd-lime-500#cddc39
  8. $rmd-lime-600#c0ca33
  9. $rmd-lime-700#afb42b
  10. $rmd-lime-800#9e9d24
  11. $rmd-lime-900#827717
  12. $rmd-lime-a-100#f4ff81
  13. $rmd-lime-a-200#eeff41
  14. $rmd-lime-a-400#c6ff00
  15. $rmd-lime-a-700#aeea00
  1. yellow
    $rmd-yellow-500#ffeb3b
  2. $rmd-yellow-50#fffde7
  3. $rmd-yellow-100#fff9c4
  4. $rmd-yellow-200#fff59d
  5. $rmd-yellow-300#fff176
  6. $rmd-yellow-400#ffee58
  7. $rmd-yellow-500#ffeb3b
  8. $rmd-yellow-600#fdd835
  9. $rmd-yellow-700#fbc02d
  10. $rmd-yellow-800#f9a825
  11. $rmd-yellow-900#f57f17
  12. $rmd-yellow-a-100#ffff8d
  13. $rmd-yellow-a-200#ff0ff0
  14. $rmd-yellow-a-400#ffea00
  15. $rmd-yellow-a-700#ffd600
  1. amber
    $rmd-amber-500#ffc107
  2. $rmd-amber-50#fff8e1
  3. $rmd-amber-100#ffecb3
  4. $rmd-amber-200#ffe082
  5. $rmd-amber-300#ffd54f
  6. $rmd-amber-400#ffca28
  7. $rmd-amber-500#ffc107
  8. $rmd-amber-600#ffb300
  9. $rmd-amber-700#ffa000
  10. $rmd-amber-800#ff8f00
  11. $rmd-amber-900#ff6f00
  12. $rmd-amber-a-100#ffe57f
  13. $rmd-amber-a-200#ffd740
  14. $rmd-amber-a-400#ffc400
  15. $rmd-amber-a-700#ffab00
  1. orange
    $rmd-orange-500#ff9800
  2. $rmd-orange-50#fff3e0
  3. $rmd-orange-100#fff0b2
  4. $rmd-orange-200#ffcc80
  5. $rmd-orange-300#ffb74d
  6. $rmd-orange-400#ffa726
  7. $rmd-orange-500#ff9800
  8. $rmd-orange-600#fb8c00
  9. $rmd-orange-700#f57c00
  10. $rmd-orange-800#ef6c00
  11. $rmd-orange-900#e65100
  12. $rmd-orange-a-100#ffd180
  13. $rmd-orange-a-200#ffab40
  14. $rmd-orange-a-400#ff9100
  15. $rmd-orange-a-700#ff6d00
  1. deep orange
    $rmd-deep-orange-500#ff5722
  2. $rmd-deep-orange-50#fbe9e7
  3. $rmd-deep-orange-100#ffccbc
  4. $rmd-deep-orange-200#ffab91
  5. $rmd-deep-orange-300#ff8a65
  6. $rmd-deep-orange-400#ff7043
  7. $rmd-deep-orange-500#ff5722
  8. $rmd-deep-orange-600#f4511e
  9. $rmd-deep-orange-700#e64a19
  10. $rmd-deep-orange-800#d84315
  11. $rmd-deep-orange-900#bf360c
  12. $rmd-deep-orange-a-100#ff9e80
  13. $rmd-deep-orange-a-200#ff6e40
  14. $rmd-deep-orange-a-400#ff3d00
  15. $rmd-deep-orange-a-700#dd2c00
  1. brown
    $rmd-brown-500#795548
  2. $rmd-brown-50#efebe9
  3. $rmd-brown-100#d7ccc8
  4. $rmd-brown-200#bcaaa4
  5. $rmd-brown-300#a1887f
  6. $rmd-brown-400#8d6e63
  7. $rmd-brown-500#795548
  8. $rmd-brown-600#6d4c41
  9. $rmd-brown-700#5d4037
  10. $rmd-brown-800#4e342e
  11. $rmd-brown-900#3e2723
  1. grey
    $rmd-grey-500#9e9e9e
  2. $rmd-grey-50#fafafa
  3. $rmd-grey-100#f5f5f5
  4. $rmd-grey-200#eeeeee
  5. $rmd-grey-300#e0e0e0
  6. $rmd-grey-400#bdbdbd
  7. $rmd-grey-500#9e9e9e
  8. $rmd-grey-600#757575
  9. $rmd-grey-700#616161
  10. $rmd-grey-800#424242
  11. $rmd-grey-900#212121
  1. blue grey
    $rmd-blue-grey-500#607d8b
  2. $rmd-blue-grey-50#eceff1
  3. $rmd-blue-grey-100#cfd8dc
  4. $rmd-blue-grey-200#b0bec5
  5. $rmd-blue-grey-300#90a4ae
  6. $rmd-blue-grey-400#78909c
  7. $rmd-blue-grey-500#607d8b
  8. $rmd-blue-grey-600#546e7a
  9. $rmd-blue-grey-700#455a64
  10. $rmd-blue-grey-800#37474f
  11. $rmd-blue-grey-900#263238
  • black
    $rmd-black-base#000000
  • white
    $rmd-white-base#ffffff