Materialize supports a rich set of color classes. These color classes are inspired and developed considering the
colors used in marketing, road signs, and sticky notes. Here is a color palette based on the material design
base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.
Red Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
red lighten-5
#ffebee
rgb(255, 235, 238)
hsl(351, 100%, 96%)
red lighten-4
#ffcdd2
rgb(255, 205, 210)
hsl(354, 100%, 90%)
red lighten-3
#ef9a9a
rgb(239, 154, 154)
hsl(0, 73%, 77%)
red lighten-2
#e57373
rgb(229, 115, 115)
hsl(0, 69%, 67%)
red lighten-1
#ef5350
rgb(239, 83, 80)
hsl(1, 83%, 63%)
red
#f44336
rgb(244, 67, 54)
hsl(4, 90%, 58%)
red darken-1
#e53935
rgb(229, 57, 53)
hsl(1, 77%, 55%)
red darken-2
#d32f2f
rgb(211, 47, 47)
hsl(0, 65%, 51%)
red darken-3
#c62828
rgb(198, 40, 40)
hsl(0, 66%, 47%)
red darken-4
#b71c1c
rgb(183, 28, 28)
hsl(0, 73%, 41%)
red accent-1
#ff8a80
rgb(255, 138, 128)
hsl(5, 100%, 75%)
red accent-2
#ff5252
rgb(255, 82, 82)
hsl(0, 100%, 66%)
red accent-3
#ff1744
rgb(255, 23, 68)
hsl(348, 100%, 55%)
red accent-4
#d50000
rgb(213, 0, 0)
hsl(0, 100%, 42%)
Pink Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
pink lighten-5
#fce4ec
rgb(252, 228, 236)
hsl(340, 80%, 94%)
pink lighten-4
#f8bbd0
rgb(248, 187, 208)
hsl(339, 81%, 85%)
pink lighten-3
#f48fb1
rgb(244, 143, 177)
hsl(340, 82%, 76%)
pink lighten-2
#f06292
rgb(240, 98, 146)
hsl(340, 83%, 66%)
pink lighten-1
#ec407a
rgb(236, 64, 122)
hsl(340, 82%, 59%)
pink
#e91e63
rgb(233, 30, 99)
hsl(340, 82%, 52%)
pink darken-1
#d81b60
rgb(216, 27, 96)
hsl(338, 78%, 48%)
pink darken-2
#c2185b
rgb(194, 24, 91)
hsl(336, 78%, 43%)
pink darken-3
#ad1457
rgb(173, 20, 87)
hsl(334, 79%, 38%)
pink darken-4
#880e4f
rgb(136, 14, 79)
hsl(328, 81%, 29%)
pink accent-1
#ff80ab
rgb(255, 128, 171)
hsl(340, 100%, 75%)
pink accent-2
#ff4081
rgb(255, 64, 129)
hsl(340, 100%, 63%)
pink accent-3
#f50057
rgb(245, 0, 87)
hsl(339, 100%, 48%)
pink accent-4
#c51162
rgb(197, 17, 98)
hsl(333, 84%, 42%)
Purple Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
purple lighten-5
#f3e5f5
rgb(243, 229, 245)
hsl(292, 44%, 93%)
purple lighten-4
#e1bee7
rgb(225, 190, 231)
hsl(291, 46%, 83%)
purple lighten-3
#ce93d8
rgb(206, 147, 216)
hsl(291, 47%, 71%)
purple lighten-2
#ba68c8
rgb(186, 104, 200)
hsl(291, 47%, 60%)
purple lighten-1
#ab47bc
rgb(171, 71, 188)
hsl(291, 47%, 51%)
purple
#9c27b0
rgb(156, 39, 176)
hsl(291, 64%, 42%)
purple darken-1
#8e24aa
rgb(142, 36, 170)
hsl(287, 65%, 40%)
purple darken-2
#7b1fa2
rgb(123, 31, 162)
hsl(282, 68%, 38%)
purple darken-3
#6a1b9a
rgb(106, 27, 154)
hsl(277, 70%, 35%)
purple darken-4
#4a148c
rgb(74, 20, 140)
hsl(267, 75%, 31%)
purple accent-1
#ea80fc
rgb(234, 128, 252)
hsl(291, 95%, 75%)
purple accent-2
#e040fb
rgb(224, 64, 251)
hsl(291, 96%, 62%)
purple accent-3
#d500f9
rgb(213, 0, 249)
hsl(291, 100%, 49%)
purple accent-4
#aa00ff
rgb(170, 0, 255)
hsl(280, 100%, 50%)
Deep Purple Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
deep-purple lighten-5
#ede7f6
rgb(237, 231, 246)
hsl(264, 45%, 94%)
deep-purple lighten-4
#d1c4e9
rgb(209, 196, 233)
hsl(261, 46%, 84%)
deep-purple lighten-3
#b39ddb
rgb(179, 157, 219)
hsl(261, 46%, 74%)
deep-purple lighten-2
#9575cd
rgb(149, 117, 205)
hsl(262, 47%, 63%)
deep-purple lighten-1
#7e57c2
rgb(126, 87, 194)
hsl(262, 47%, 55%)
deep-purple
#673ab7
rgb(103, 58, 183)
hsl(262, 52%, 47%)
deep-purple darken-1
#5e35b1
rgb(94, 53, 177)
hsl(260, 54%, 45%)
deep-purple darken-2
#512da8
rgb(81, 45, 168)
hsl(258, 58%, 42%)
deep-purple darken-3
#4527a0
rgb(69, 39, 160)
hsl(255, 61%, 39%)
deep-purple darken-4
#311b92
rgb(49, 27, 146)
hsl(251, 69%, 34%)
deep-purple accent-1
#b388ff
rgb(179, 136, 255)
hsl(262, 100%, 77%)
deep-purple accent-2
#7c4dff
rgb(124, 77, 255)
hsl(256, 100%, 65%)
deep-purple accent-3
#651fff
rgb(101, 31, 255)
hsl(259, 100%, 56%)
deep-purple accent-4
#6200ea
rgb(98, 0, 234)
hsl(265, 100%, 46%)
Indigo Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
indigo lighten-5
#e8eaf6
rgb(232, 234, 246)
hsl(231, 44%, 94%)
indigo lighten-4
#c5cae9
rgb(197, 202, 233)
hsl(232, 45%, 84%)
indigo lighten-3
#9fa8da
rgb(159, 168, 218)
hsl(231, 44%, 74%)
indigo lighten-2
#7986cb
rgb(121, 134, 203)
hsl(230, 44%, 64%)
indigo lighten-1
#5c6bc0
rgb(92, 107, 192)
hsl(231, 44%, 56%)
indigo
#3f51b5
rgb(63, 81, 181)
hsl(231, 48%, 48%)
indigo darken-1
#3949ab
rgb(57, 73, 171)
hsl(232, 50%, 45%)
indigo darken-2
#303f9f
rgb(48, 63, 159)
hsl(232, 54%, 41%)
indigo darken-3
#283593
rgb(40, 53, 147)
hsl(233, 57%, 37%)
indigo darken-4
#1a237e
rgb(26, 35, 126)
hsl(235, 66%, 30%)
indigo accent-1
#8c9eff
rgb(140, 158, 255)
hsl(231, 100%, 77%)
indigo accent-2
#536dfe
rgb(83, 109, 254)
hsl(231, 99%, 66%)
indigo accent-3
#3d5afe
rgb(61, 90, 254)
hsl(231, 99%, 62%)
indigo accent-4
#304ffe
rgb(48, 79, 254)
hsl(231, 99%, 59%)
Blue Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
blue lighten-5
#e3f2fd
rgb(227, 242, 253)
hsl(205, 87%, 94%)
blue lighten-4
#bbdefb
rgb(187, 222, 251)
hsl(207, 89%, 86%)
blue lighten-3
#90caf9
rgb(144, 202, 249)
hsl(207, 90%, 77%)
blue lighten-2
#64b5f6
rgb(100, 181, 246)
hsl(207, 89%, 68%)
blue lighten-1
#42a5f5
rgb(66, 165, 245)
hsl(207, 90%, 61%)
blue
#2196f3
rgb(33, 150, 243)
hsl(207, 90%, 54%)
blue darken-1
#1e88e5
rgb(30, 136, 229)
hsl(208, 79%, 51%)
blue darken-2
#1976d2
rgb(25, 118, 210)
hsl(210, 79%, 46%)
blue darken-3
#1565c0
rgb(21, 101, 192)
hsl(212, 80%, 42%)
blue darken-4
#0d47a1
rgb(13, 71, 161)
hsl(216, 85%, 34%)
blue accent-1
#82b1ff
rgb(130, 177, 255)
hsl(217, 100%, 75%)
blue accent-2
#448aff
rgb(68, 138, 255)
hsl(218, 100%, 63%)
blue accent-3
#2979ff
rgb(41, 121, 255)
hsl(218, 100%, 58%)
blue accent-4
#2962ff
rgb(41, 98, 255)
hsl(224, 100%, 58%)
Light Blue Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
light-blue lighten-5
#e1f5fe
rgb(225, 245, 254)
hsl(199, 94%, 94%)
light-blue lighten-4
#b3e5fc
rgb(179, 229, 252)
hsl(199, 92%, 85%)
light-blue lighten-3
#81d4fa
rgb(129, 212, 250)
hsl(199, 92%, 74%)
light-blue lighten-2
#4fc3f7
rgb(79, 195, 247)
hsl(199, 91%, 64%)
light-blue lighten-1
#29b6f6
rgb(41, 182, 246)
hsl(199, 92%, 56%)
light-blue
#03a9f4
rgb(3, 169, 244)
hsl(199, 98%, 48%)
light-blue darken-1
#039be5
rgb(3, 155, 229)
hsl(200, 97%, 45%)
light-blue darken-2
#0288d1
rgb(2, 136, 209)
hsl(201, 98%, 41%)
light-blue darken-3
#0277bd
rgb(2, 119, 189)
hsl(202, 98%, 37%)
light-blue darken-4
#01579b
rgb(1, 87, 155)
hsl(206, 99%, 31%)
light-blue accent-1
#80d8ff
rgb(128, 216, 255)
hsl(198, 100%, 75%)
light-blue accent-2
#40c4ff
rgb(64, 196, 255)
hsl(199, 100%, 63%)
light-blue accent-3
#00b0ff
rgb(0, 176, 255)
hsl(199, 100%, 50%)
light-blue accent-4
#0091ea
rgb(0, 145, 234)
hsl(203, 100%, 46%)
Cyan Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
cyan lighten-5
#e0f7fa
rgb(224, 247, 250)
hsl(187, 72%, 93%)
cyan lighten-4
#b2ebf2
rgb(178, 235, 242)
hsl(187, 71%, 82%)
cyan lighten-3
#80deea
rgb(128, 222, 234)
hsl(187, 72%, 71%)
cyan lighten-2
#4dd0e1
rgb(77, 208, 225)
hsl(187, 71%, 59%)
cyan lighten-1
#26c6da
rgb(38, 198, 218)
hsl(187, 71%, 50%)
cyan
#00bcd4
rgb(0, 188, 212)
hsl(187, 100%, 42%)
cyan darken-1
#00acc1
rgb(0, 172, 193)
hsl(187, 100%, 38%)
cyan darken-2
#0097a7
rgb(0, 151, 167)
hsl(186, 100%, 33%)
cyan darken-3
#00838f
rgb(0, 131, 143)
hsl(185, 100%, 28%)
cyan darken-4
#006064
rgb(0, 96, 100)
hsl(182, 100%, 20%)
cyan accent-1
#84ffff
rgb(132, 255, 255)
hsl(180, 100%, 76%)
cyan accent-2
#18ffff
rgb(24, 255, 255)
hsl(180, 100%, 55%)
cyan accent-3
#00e5ff
rgb(0, 229, 255)
hsl(186, 100%, 50%)
cyan accent-4
#00b8d4
rgb(0, 184, 212)
hsl(188, 100%, 42%)
Teal Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
teal lighten-5
#e0f2f1
rgb(224, 242, 241)
hsl(177, 41%, 91%)
teal lighten-4
#b2dfdb
rgb(178, 223, 219)
hsl(175, 41%, 79%)
teal lighten-3
#80cbc4
rgb(128, 203, 196)
hsl(174, 42%, 65%)
teal lighten-2
#4db6ac
rgb(77, 182, 172)
hsl(174, 42%, 51%)
teal lighten-1
#26a69a
rgb(38, 166, 154)
hsl(174, 63%, 40%)
teal
#009688
rgb(0, 150, 136)
hsl(174, 100%, 29%)
teal darken-1
#00897b
rgb(0, 137, 123)
hsl(174, 100%, 27%)
teal darken-2
#00796b
rgb(0, 121, 107)
hsl(173, 100%, 24%)
teal darken-3
#00695c
rgb(0, 105, 92)
hsl(173, 100%, 21%)
teal darken-4
#004d40
rgb(0, 77, 64)
hsl(170, 100%, 15%)
teal accent-1
#a7ffeb
rgb(167, 255, 235)
hsl(166, 100%, 83%)
teal accent-2
#64ffda
rgb(100, 255, 218)
hsl(166, 100%, 70%)
teal accent-3
#1de9b6
rgb(29, 233, 182)
hsl(165, 82%, 51%)
teal accent-4
#00bfa5
rgb(0, 191, 165)
hsl(172, 100%, 37%)
Green Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
green lighten-5
#e8f5e9
rgb(232, 245, 233)
hsl(125, 39%, 94%)
green lighten-4
#c8e6c9
rgb(200, 230, 201)
hsl(122, 37%, 84%)
green lighten-3
#a5d6a7
rgb(165, 214, 167)
hsl(122, 37%, 74%)
green lighten-2
#81c784
rgb(129, 199, 132)
hsl(123, 38%, 64%)
green lighten-1
#66bb6a
rgb(102, 187, 106)
hsl(123, 38%, 57%)
green
#4caf50
rgb(76, 175, 80)
hsl(122, 39%, 49%)
green darken-1
#43a047
rgb(67, 160, 71)
hsl(123, 41%, 45%)
green darken-2
#388e3c
rgb(56, 142, 60)
hsl(123, 43%, 39%)
green darken-3
#2e7d32
rgb(46, 125, 50)
hsl(123, 46%, 34%)
green darken-4
#1b5e20
rgb(27, 94, 32)
hsl(124, 55%, 24%)
green accent-1
#b9f6ca
rgb(185, 246, 202)
hsl(137, 77%, 85%)
green accent-2
#69f0ae
rgb(105, 240, 174)
hsl(151, 82%, 68%)
green accent-3
#00e676
rgb(0, 230, 118)
hsl(151, 100%, 45%)
green accent-4
#00c853
rgb(0, 200, 83)
hsl(145, 100%, 39%)
Light Green Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
light-green lighten-5
#f1f8e9
rgb(241, 248, 233)
hsl(88, 52%, 94%)
light-green lighten-4
#dcedc8
rgb(220, 237, 200)
hsl(88, 51%, 86%)
light-green lighten-3
#c5e1a5
rgb(197, 225, 165)
hsl(88, 50%, 76%)
light-green lighten-2
#aed581
rgb(174, 213, 129)
hsl(88, 50%, 67%)
light-green lighten-1
#9ccc65
rgb(156, 204, 101)
hsl(88, 50%, 60%)
light-green
#8bc34a
rgb(139, 195, 74)
hsl(88, 50%, 53%)
light-green darken-1
#7cb342
rgb(124, 179, 66)
hsl(89, 46%, 48%)
light-green darken-2
#689f38
rgb(104, 159, 56)
hsl(92, 48%, 42%)
light-green darken-3
#558b2f
rgb(85, 139, 47)
hsl(95, 49%, 36%)
light-green darken-4
#33691e
rgb(51, 105, 30)
hsl(103, 56%, 26%)
light-green accent-1
#ccff90
rgb(204, 255, 144)
hsl(88, 100%, 78%)
light-green accent-2
#b2ff59
rgb(178, 255, 89)
hsl(88, 100%, 67%)
light-green accent-3
#76ff03
rgb(118, 255, 3)
hsl(93, 100%, 51%)
light-green accent-4
#64dd17
rgb(100, 221, 23)
hsl(97, 81%, 48%)
Lime Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
lime lighten-5
#f9fbe7
rgb(249, 251, 231)
hsl(66, 71%, 95%)
lime lighten-4
#f0f4c3
rgb(240, 244, 195)
hsl(65, 69%, 86%)
lime lighten-3
#e6ee9c
rgb(230, 238, 156)
hsl(66, 71%, 77%)
lime lighten-2
#dce775
rgb(220, 231, 117)
hsl(66, 70%, 68%)
lime lighten-1
#d4e157
rgb(212, 225, 87)
hsl(66, 70%, 61%)
lime
#cddc39
rgb(205, 220, 57)
hsl(66, 70%, 54%)
lime darken-1
#c0ca33
rgb(192, 202, 51)
hsl(64, 60%, 50%)
lime darken-2
#afb42b
rgb(175, 180, 43)
hsl(62, 61%, 44%)
lime darken-3
#9e9d24
rgb(158, 157, 36)
hsl(60, 63%, 38%)
lime darken-4
#827717
rgb(130, 119, 23)
hsl(54, 70%, 30%)
lime accent-1
#f4ff81
rgb(244, 255, 129)
hsl(65, 100%, 75%)
lime accent-2
#eeff41
rgb(238, 255, 65)
hsl(65, 100%, 63%)
lime accent-3
#c6ff00
rgb(198, 255, 0)
hsl(73, 100%, 50%)
lime accent-4
#aeea00
rgb(174, 234, 0)
hsl(75, 100%, 46%)
Yellow Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
yellow lighten-5
#fffde7
rgb(255, 253, 231)
hsl(55, 100%, 95%)
yellow lighten-4
#fff9c4
rgb(255, 249, 196)
hsl(54, 100%, 88%)
yellow lighten-3
#fff59d
rgb(255, 245, 157)
hsl(54, 100%, 81%)
yellow lighten-2
#fff176
rgb(255, 241, 118)
hsl(54, 100%, 73%)
yellow lighten-1
#ffee58
rgb(255, 238, 88)
hsl(54, 100%, 67%)
yellow
#ffeb3b
rgb(255, 235, 59)
hsl(54, 100%, 62%)
yellow darken-1
#fdd835
rgb(253, 216, 53)
hsl(49, 98%, 60%)
yellow darken-2
#fbc02d
rgb(251, 192, 45)
hsl(43, 96%, 58%)
yellow darken-3
#f9a825
rgb(249, 168, 37)
hsl(37, 95%, 56%)
yellow darken-4
#f57f17
rgb(245, 127, 23)
hsl(28, 92%, 53%)
yellow accent-1
#ffff8d
rgb(255, 255, 141)
hsl(60, 100%, 78%)
yellow accent-2
#ffff00
rgb(255, 255, 0)
hsl(60, 100%, 50%)
yellow accent-3
#ffea00
rgb(255, 234, 0)
hsl(55, 100%, 50%)
yellow accent-4
#ffd600
rgb(255, 214, 0)
hsl(50, 100%, 50%)
Amber Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
amber lighten-5
#fff8e1
rgb(255, 248, 225)
hsl(46, 100%, 94%)
amber lighten-4
#ffecb3
rgb(255, 236, 179)
hsl(45, 100%, 85%)
amber lighten-3
#ffe082
rgb(255, 224, 130)
hsl(45, 100%, 75%)
amber lighten-2
#ffd54f
rgb(255, 213, 79)
hsl(46, 100%, 65%)
amber lighten-1
#ffca28
rgb(255, 202, 40)
hsl(45, 100%, 58%)
amber
#ffc107
rgb(255, 193, 7)
hsl(45, 100%, 51%)
amber darken-1
#ffb300
rgb(255, 179, 0)
hsl(42, 100%, 50%)
amber darken-2
#ffa000
rgb(255, 160, 0)
hsl(38, 100%, 50%)
amber darken-3
#ff8f00
rgb(255, 143, 0)
hsl(34, 100%, 50%)
amber darken-4
#ff6f00
rgb(255, 111, 0)
hsl(26, 100%, 50%)
amber accent-1
#ffe57f
rgb(255, 229, 127)
hsl(48, 100%, 75%)
amber accent-2
#ffd740
rgb(255, 215, 64)
hsl(47, 100%, 63%)
amber accent-3
#ffc400
rgb(255, 196, 0)
hsl(46, 100%, 50%)
amber accent-4
#ffab00
rgb(255, 171, 0)
hsl(40, 100%, 50%)
Orange Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
orange lighten-5
#fff3e0
rgb(255, 243, 224)
hsl(37, 100%, 94%)
orange lighten-4
#ffe0b2
rgb(255, 224, 178)
hsl(36, 100%, 85%)
orange lighten-3
#ffcc80
rgb(255, 204, 128)
hsl(36, 100%, 75%)
orange lighten-2
#ffb74d
rgb(255, 183, 77)
hsl(36, 100%, 65%)
orange lighten-1
#ffa726
rgb(255, 167, 38)
hsl(36, 100%, 57%)
orange
#ff9800
rgb(255, 152, 0)
hsl(36, 100%, 50%)
orange darken-1
#fb8c00
rgb(251, 140, 0)
hsl(33, 100%, 49%)
orange darken-2
#f57c00
rgb(245, 124, 0)
hsl(30, 100%, 48%)
orange darken-3
#ef6c00
rgb(239, 108, 0)
hsl(27, 100%, 47%)
orange darken-4
#e65100
rgb(230, 81, 0)
hsl(21, 100%, 45%)
orange accent-1
#ffd180
rgb(255, 209, 128)
hsl(38, 100%, 75%)
orange accent-2
#ffab40
rgb(255, 171, 64)
hsl(34, 100%, 63%)
orange accent-3
#ff9100
rgb(255, 145, 0)
hsl(34, 100%, 50%)
orange accent-4
#ff6d00
rgb(255, 109, 0)
hsl(26, 100%, 50%)
Deep Orange Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
deep-orange lighten-5
#fbe9e7
rgb(251, 233, 231)
hsl(6, 71%, 95%)
deep-orange lighten-4
#ffccbc
rgb(255, 204, 188)
hsl(14, 100%, 87%)
deep-orange lighten-3
#ffab91
rgb(255, 171, 145)
hsl(14, 100%, 78%)
deep-orange lighten-2
#ff8a65
rgb(255, 138, 101)
hsl(14, 100%, 70%)
deep-orange lighten-1
#ff7043
rgb(255, 112, 67)
hsl(14, 100%, 63%)
deep-orange
#ff5722
rgb(255, 87, 34)
hsl(14, 100%, 57%)
deep-orange darken-1
#f4511e
rgb(244, 81, 30)
hsl(14, 91%, 54%)
deep-orange darken-2
#e64a19
rgb(230, 74, 25)
hsl(14, 80%, 50%)
deep-orange darken-3
#d84315
rgb(216, 67, 21)
hsl(14, 82%, 46%)
deep-orange darken-4
#bf360c
rgb(191, 54, 12)
hsl(14, 88%, 40%)
deep-orange accent-1
#ff9e80
rgb(255, 158, 128)
hsl(14, 100%, 75%)
deep-orange accent-2
#ff6e40
rgb(255, 110, 64)
hsl(14, 100%, 63%)
deep-orange accent-3
#ff3d00
rgb(255, 61, 0)
hsl(14, 100%, 50%)
deep-orange accent-4
#dd2c00
rgb(221, 44, 0)
hsl(12, 100%, 43%)
Brown Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
brown lighten-5
#efebe9
rgb(239, 235, 233)
hsl(20, 16%, 93%)
brown lighten-4
#d7ccc8
rgb(215, 204, 200)
hsl(16, 16%, 81%)
brown lighten-3
#bcaaa4
rgb(188, 170, 164)
hsl(15, 15%, 69%)
brown lighten-2
#a1887f
rgb(161, 136, 127)
hsl(16, 15%, 56%)
brown lighten-1
#8d6e63
rgb(141, 110, 99)
hsl(16, 18%, 47%)
brown
#795548
rgb(121, 85, 72)
hsl(16, 25%, 38%)
brown darken-1
#6d4c41
rgb(109, 76, 65)
hsl(15, 25%, 34%)
brown darken-2
#5d4037
rgb(93, 64, 55)
hsl(14, 26%, 29%)
brown darken-3
#4e342e
rgb(78, 52, 46)
hsl(11, 26%, 24%)
brown darken-4
#3e2723
rgb(62, 39, 35)
hsl(9, 28%, 19%)
Grey Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
grey lighten-5
#fafafa
rgb(250, 250, 250)
hsl(0, 0%, 98%)
grey lighten-4
#f5f5f5
rgb(245, 245, 245)
hsl(0, 0%, 96%)
grey lighten-3
#eeeeee
rgb(238, 238, 238)
hsl(0, 0%, 93%)
grey lighten-2
#e0e0e0
rgb(224, 224, 224)
hsl(0, 0%, 88%)
grey lighten-1
#bdbdbd
rgb(189, 189, 189)
hsl(0, 0%, 74%)
grey
#9e9e9e
rgb(158, 158, 158)
hsl(0, 0%, 62%)
grey darken-1
#757575
rgb(117, 117, 117)
hsl(0, 0%, 46%)
grey darken-2
#616161
rgb(97, 97, 97)
hsl(0, 0%, 38%)
grey darken-3
#424242
rgb(66, 66, 66)
hsl(0, 0%, 26%)
grey darken-4
#212121
rgb(33, 33, 33)
hsl(0, 0%, 13%)
Blue Grey Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
blue-grey lighten-5
#eceff1
rgb(236, 239, 241)
hsl(204, 15%, 94%)
blue-grey lighten-4
#cfd8dc
rgb(207, 216, 220)
hsl(198, 16%, 84%)
blue-grey lighten-3
#b0bec5
rgb(176, 190, 197)
hsl(200, 15%, 73%)
blue-grey lighten-2
#90a4ae
rgb(144, 164, 174)
hsl(200, 16%, 62%)
blue-grey lighten-1
#78909c
rgb(120, 144, 156)
hsl(200, 15%, 54%)
blue-grey
#607d8b
rgb(96, 125, 139)
hsl(200, 18%, 46%)
blue-grey darken-1
#546e7a
rgb(84, 110, 122)
hsl(199, 18%, 40%)
blue-grey darken-2
#455a64
rgb(69, 90, 100)
hsl(199, 18%, 33%)
blue-grey darken-3
#37474f
rgb(55, 71, 79)
hsl(200, 18%, 26%)
blue-grey darken-4
#263238
rgb(38, 50, 56)
hsl(200, 19%, 18%)
Black & White Colors
COLOR
NAME
HEXA CODE
RGB CODE
HSL CODE
black
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
white
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 100%)