Color List

As a guide for applying HTML / CSS colors - Hexadecimal (hex) RGB (Red-green-blue) Value - RGB, RGBA, HSL, HSLA function notations.

Color Palette List

  • Palette - A palette is a collection of colors, namely their hues and shades. MUI provides all colors from Material Design guidelines.
  • Hue & Shade - One color in the palette consists of hues such as "Red", and shades, as "500". "red 50" is the brightest red color ( Pink! ), whereas "red 900" is the darkest. other than that, most colors come with shades "accent", start with A.

Red : #f44336

Pink : #E91E63

Purple : #9C27B0

Deep Purple : #673AB7

Indigo : #3F51B5

Blue : #2196F3

Light Blue : #03A9F4

Cyan : #00BCD4

Teal : #009688

Green : #4CAF50

Light Green : #8BC34A

Lime : #CDDC39

Yellow : #FFEB3B

Amber : #FFC107

Orange : #FF9800

Deep
Orange :
#FF5722

Brown : #795548

Grey : #9E9E9E

Blue Grey : #607D8B

50 :
#ffebee

50 :
#FCE4EC

50 :
#F3E5F5

50 :
#EDE7F6

50 :
#E8EAF6

50 :
#E3F2FD

50 :
#E1F5FE

50 :
#E0F7FA

50 :
#E0F2F1

50 :
#E8F5E9

50 :
#F1F8E9

50 :
#F9FBE7

50 :
#FFFDE7

50 :
#FFF8E1

50 :
#FFF3E0

50 :
#FBE9E7

50 :
#EFEBE9

50 :
#FAFAFA

50 :
#ECEFF1

100 :
#ffcdd2

100 : #F8BBD0

100 :
#E1BEE7

100 :
#D1C4E9

100 : #C5CAE9

100 : #BBDEFB

100 :
#B3E5FC

100 : #B2EBF2

100 : #B2DFDB

100 : #C8E6C9

100 :
#DCEDC8

100 : #F0F4C3

100 :
#FFF9C4

100 :
#FFECB3

100 :
#FFE0B2

100 : #FFCCBC

100 : #D7CCC8

100 : #F5F5F5

100 :
#CFD8DC

200 : #ef9a9a

200 : #F48FB1

200 : #CE93D8

200 :
#B39DDB

200 : #9FA8DA

200 : #90CAF9

200 :
#81D4FA

200 : #80DEEA

200 : #80CBC4

200 : #A5D6A7

200 :
#C5E1A5

200 : #E6EE9C

200 :
#FFF59D

200 :
#FFE082

200 :
#FFCC80

200 : #FFAB91

200 : #BCAAA4

200 : #EEEEEE

200 :
#B0BEC5

300 : #e57373

300 : #F06292

300 : #BA68C8

300 :
#9575CD

300 : #7986CB

300 : #64B5F6

300 :
#4FC3F7

300 : #4DD0E1

300 : #4DB6AC

300 : #81C784

300 :
#AED581

300 : #DCE775

300 :
#FFF176

300 :
#FFD54F

300 :
#FFB74D

300 :
#FF8A65

300 : #A1887F

300 : #E0E0E0

300 :
#90A4AE

400 : #ef5350

400 : #EC407A

400 : #AB47BC

400 :
#7E57C2

400 : #5C6BC0

400 : #42A5F5

400 :
#29B6F6

400 : #26C6DA

400 : #26A69A

400 : #66BB6A

400 :
#9CCC65

400 : #D4E157

400 :
#FFEE58

400 :
#FFCA28

400 :
#FFA726

400 :
#FF7043

400 : #8D6E63

400 : #BDBDBD

400 :
#78909C

500 : #f44336

500 : #E91E63

500 : #9C27B0

500 :
#673AB7

500 : #3F51B5

500 : #2196F3

500 :
#03A9F4

500 : #00BCD4

500 : #009688

500 : #4CAF50

500 :
#8BC34A

500 : #CDDC39

500 :
#FFEB3B

500 :
#FFC107

500 :
#FF9800

500 : #FF5722

500 :
#795548

500 : #9E9E9E

500 :
#607D8B

600 : #e53935

600 : #D81B60

600 : #8E24AA

600 :
#5E35B1

600 : #3949AB

600 : #1E88E5

600 :
#039BE5

600 : #00ACC1

600 : #00897B

600 : #43A047

600 :
#7CB342

600 : #C0CA33

600 :
#FDD835

600 :
#FFB300

600 :
#FB8C00

600 :
#F4511E

600 : #6D4C41

600 : #757575

600 :
#546E7A

700 :
#d32f2f

700 : #C2185B

700 :
#7B1FA2

700 :
#512DA8

700 :
#303F9F

700 : #1976D2

700 :
#0288D1

700 : #0097A7

700 : #00796B

700 : #388E3C

700 :
#689F38

700 : #AFB42B

700 : #FBC02D

700 :
#FFA000

700 :
#F57C00

700 :
#E64A19

700 : #5D4037

700 : #616161

700 :
#455A64

800 : #c62828

800 : #AD1457

800 : #6A1B9A

800 :
#4527A0

800 :
#283593

800 : #1565C0

800 :
#0277BD

800 : #00838F

800 : #00695C

800 : #2E7D32

800 :
#558B2F

800 : #9E9D24

800 :
#F9A825

800 :
#FF8F00

800 :
#EF6C00

800 :
#D84315

800 :
#4E342E

800 : #424242

800 :
#37474F

900 : #b71c1c

900 : #880E4F

900 : #4A148C

900 :
#311B92

900 : #1A237E

900 : #0D47A1

900 :
#01579B

900 : #006064

900 : #004D40

900 : #1B5E20

900 :
#33691E

900 : #827717

900 :
#F57F17

900 :
#FF6F00

900 :
#E65100

900 : #BF360C

900 :
#3E2723

900 : #212121

900 :
#263238

A100 : #ff8a80

A100 : #FF80AB

A100 : #EA80FC

A100 :
#B388FF

A100 : #8C9EFF

A100 : #82B1FF

A100 :
#80D8FF

A100 : #84FFFF

A100 : #A7FFEB

A100 : #B9F6CA

A100 :
#CCFF90

A100 : #F4FF81

A100 : #FFFF8D

A100 : #FFE57F

A100 : #FFD180

A100 : #FF9E80

A200 : #ff5252

A200 : #FF4081

A200 : #E040FB

A200 :
#7C4DFF

A200 : #536DFE

A200 : #448AFF

A200 :
#40C4FF

A200 : #18FFFF

A200 : #64FFDA

A200 : #69F0AE

A200 :
#B2FF59

A200 : #EEFF41

A200 : #FFFF00

A200 : #FFD740

A200 : #FFAB40

A200 : #FF6E40

A400 : #ff1744

A400 : #F50057

A400 : #D500F9

A400 :
#651FFF

A400 : #3D5AFE

A400 : #2979FF

A400 :
#00B0FF

A400 : #00E5FF

A400 : #1DE9B6

A400 : #00E676

A400 :
#76FF03

A400 : #C6FF00

A400 : #FFEA00

A400 : #FFC400

A400 : #FF9100

A400 : #FF3D00

A700 : #d50000

A700 : #C51162

A700 : #AA00FF

A700 :
#6200EA

A700 : #304FFE

A700 : #2962FF

A700 :
#0091EA

A700 : #00B8D4

A700 : #00BFA5

A700 : #00C853

A700 :
#64DD17

A700 : #AEEA00

A700 : #FFD600

A700 : #FFAB00

A700 : #FF6D00

A700 : #DD2C00

Detailed Classification For Pallets

The palette below is broken down in card form per color category. Fractions of these colors are described in detail below. 

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

We use technical and analytical cookies to ensure that we provide you with the best experience on our website. Read our cookie policy.