Colors code

Bootstrap 5 Colors Code

Bootstrap colors code is a sensational palette of 300 delightful colors, which will aid you in creating inviting, consistent design.


Color themes

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as SCSS variables and a Sass map in Bootstrap’s scss/free/_variables.scss file.

Primary (#3B71CA)
Secondary (#9FA6B2)
Success (#14A44D)
Danger (#DC4C64)
Warning (#E4A11B)
Info (#54B4D3)
Light (#FBFBFB)
Dark (#332D2D)

All these colors are available as a Sass map, $theme-colors in scss/free/_variables.scss file.

        
            
          $theme-colors: (
            "primary":    $primary,
            "secondary":  $secondary,
            "success":    $success,
            "info":       $info,
            "warning":    $warning,
            "danger":     $danger,
            "light":      $light,
            "black":      $black,
          );
        
        
    

Background colors

Easily set the background by using .bg-* color classes

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
        
            

            <div class="bg-primary"></div>
            <div class="bg-secondary"></div>
            <div class="bg-success"></div>
            <div class="bg-danger"></div>
            <div class="bg-warning"></div>
            <div class="bg-info"></div>
            <div class="bg-light"></div>
            <div class="bg-dark"></div>
            <div class="bg-white"></div>
            <div class="bg-transparent"></div>

            
        
    

Color picker

The Advanced Color Picker can be placed anywhere on the page. You can initialize it using data-mdb-picker="color-picker".

        
            
          <div class="color-picker" data-mdb-picker="color-picker"></div>
          
        
    

Colors palette

The most common way to specify colors in CSS is to use HEX values. HEX values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers prefixed with a # symbol.

HSL stands for hue, saturation, and lightness. It’s based on the RGB color wheel. Each color has an angle and a percentage value for the saturation and lightness values.

HEX RGB HSL
#ffebee rgba(255,235,238,1.0) hsl(351, 100%, 96.1%)
#ffcdd2 rgba(255,205,210,1.0) hsl(354, 100%, 90.2%)
#ffcdd2 rgba(239,154,154,1.0) hsl(0, 72.6%, 77.1%)
#e57373 rgba(229,115,115,1.0) hsl(0, 68.7%, 67.5%)
#ef5350 rgba(239,83,80,1.0) hsl(1.1, 83.2%, 62.5%)
#f44336 rgba(244,67,54,1.0) hsl(4.1, 89.6%, 58.4%)
#e53935 rgba(229,57,53,1.0) hsl(1.4, 77.2%, 55.3%)
#d32f2f rgba(211,47,47,1.0) hsl(0, 65.1%, 50.6%)
#c62828 rgba(198,40,40,1.0) hsl(0, 66.4%, 46.7%)
#b71c1c rgba(183,28,28,1.0) hsl(0, 73.5%, 41.4%)
#ff8a80 rgba(255,138,128,1.0) hsl(4.7, 100%, 75.1%)
#ff5252 rgba(255,82,82,1.0) hsl(0, 100%, 66.1%)
#ff1744 rgba(255,23,68,1.0) hsl(348.4, 100%, 54.5%)
#d50000 rgba(213,0,0,1.0) hsl(0, 100%, 41.8%)
#fce4ec rgba(252,228,236,1.0) hsl(340, 80%, 94.1%)
#f8bbd0 rgba(248,187,208,1.0) hsl(339.3, 81.3%, 85.3%)
#f48fb1 rgba(244,143,177,1.0) hsl(339.8, 82.1%, 75.9%)
#f06292 rgba(240,98,146,1.0) hsl(339.7, 82.6%, 66.3%)
#ec407a rgba(236,64,122,1.0) hsl(339.8, 81.9%, 58.8%)
#e91e63 rgba(233,30,99,1.0) hsl(339.6, 82.2%, 51.6%)
#d81b60 rgba(216,27,96,1.0) hsl(338.1, 77.8%, 47.6%)
#c2185b rgba(194,24,91,1.0) hsl(336.4, 78%, 42.7%)
#ad1457 rgba(173,20,87,1.0) hsl(333.7, 79.3%, 37.8%)
#880e4f rgba(136,14,79,1.0) hsl(328, 81.3%, 29.4%)
#ff80ab rgba(255,128,171,1.0) hsl(339.7, 100%, 75.1%)
#ff4081 rgba(255,64,129,1.0) hsl(339.6, 100%, 62.5%)
#f50057 rgba(245,0,87,1.0) hsl(338.7, 100%, 48%)
#c51162 rgba(197,17,98,1.0) hsl(333, 84.1%, 42%)
#f3e5f5 rgba(243,229,245,1.0) hsl(292.5, 44.4%, 92.9%)
#e1bee7 rgba(225,190,231,1.0) hsl(291.2, 46.1%, 82.5%)
#ce93d8 rgba(206,147,216,1.0) hsl(291.3, 46.9%, 71.2%)
#ba68c8 rgba(186,104,200,1.0) hsl(291.3, 46.6%, 59.6%)
#ab47bc rgba(171,71,188,1.0) hsl(291.3, 46.6%, 50.8%)
#ab47bc rgba(171,71,188,1.0) hsl(291.3, 46.6%, 50.8%)
#8e24aa rgba(142,36,170,1.0) hsl(287.5, 65%, 40.4%)
#7b1fa2 rgba(123,31,162,1.0) hsl(282.1, 67.9%, 37.8%)
#6a1b9a rgba(106,27,154,1.0) hsl(277.3, 70.2%, 35.5%)
#4a148c rgba(74,20,140,1.0) hsl(267, 75%, 31.4%)
#ea80fc rgba(234,128,252,1.0) hsl(291.3, 95.4%, 74.5%)
#e040fb rgba(224,64,251,1.0) hsl(291.3, 95.9%, 61.8%)
#d500f9 rgba(213,0,249,1.0) hsl(291.3, 100%, 48.8%)
#aa00ff rgba(170,0,255,1.0) hsl(280, 100%, 50%)
#ede7f6 rgba(237,231,246,1.0) hsl(264, 45.5%, 93.5%)
#d1c4e9 rgba(209,196,233,1.0) hsl(261.1, 45.7%, 84.1%)
#b39ddb rgba(179,157,219,1.0) hsl(261.3, 46.3%, 73.7%)
#9575cd rgba(149,117,205,1.0) hsl(261.8, 46.8%, 63.1%)
#7e57c2 rgba(126,87,194,1.0) hsl(261.9, 46.7%, 55.1%)
#673ab7 rgba(103,58,183,1.0) hsl(261.6, 51.9%, 47.3%)
#5e35b1 rgba(94,53,177,1.0) hsl(259.8, 53.9%, 45.1%)
#512da8 rgba(81,45,168,1.0) hsl(257.6, 57.7%, 41.8%)
#4527a0 rgba(69,39,160,1.0) hsl(254.9, 60.8%, 39%)
#311b92 rgba(49,27,146,1.0) hsl(251.1, 68.8%, 33.9%)
#b388ff rgba(179,136,255,1.0) hsl(261.7, 100%, 76.7%)
#7c4dff rgba(124,77,255,1.0) hsl(255.8, 100%, 65.1%)
#651fff rgba(101,31,255,1.0) hsl(258.8, 100%, 56.1%)
#6200ea rgba(98,0,234,1.0) hsl(265.1, 100%, 45.9%)
#e8eaf6 rgba(232,234,246,1.0) hsl(231.4, 43.8%, 93.7%)
#c5cae9 rgba(197,202,233,1.0) hsl(231.7, 45%, 84.3%)
#9fa8da rgba(159,168,218,1.0) hsl(230.8, 44.4%, 73.9%)
#7986cb rgba(121,134,203,1.0) hsl(230.5, 44.1%, 63.5%)
#5c6bc0 rgba(92,107,192,1.0) hsl(231, 44.2%, 55.7%)
#3f51b5 rgba(63,81,181,1.0) hsl(230.8, 48.4%, 47.8%)
#3949ab rgba(57,73,171,1.0) hsl(231.6, 50%, 44.7%)
#303f9f rgba(48,63,159,1.0) hsl(231.9, 53.6%, 40.6%)
#283593 rgba(40,53,147,1.0) hsl(232.7, 57.2%, 36.7%)
#1a237e rgba(26,35,126,1.0) hsl(234.6, 65.8%, 29.8%)
#8c9eff rgba(140,158,255,1.0) hsl(230.6, 100%, 77.5%)
#536dfe rgba(83,109,254,1.0) hsl(230.9, 98.8%, 66.1%)
#3d5afe rgba(61,90,254,1.0) hsl(231, 99%, 61.8%)
#304ffe #304ffe #304ffe
#e3f2fd rgba(227,242,253,1.0) hsl(205.4, 86.7%, 94.1%)
#bbdefb rgba(187,222,251,1.0) hsl(207.2, 88.9%, 85.9%)
#90caf9 rgba(144,202,249,1.0) hsl(206.9, 89.7%, 77.1%)
#64b5f6 rgba(100,181,246,1.0) hsl(206.7, 89%, 67.8%)
#42a5f5 rgba(66,165,245,1.0) hsl(206.8, 89.9%, 61%)
#2196f3 rgba(33,150,243,1.0) hsl(206.6, 89.7%, 54.1%)
#1e88e5 rgba(30,136,229,1.0) hsl(208, 79.3%, 50.8%)
#1976d2 rgba(25,118,210,1.0) hsl(209.8, 78.7%, 46.1%)
#1565c0 rgba(21,101,192,1.0) hsl(211.9, 80.3%, 41.8%)
#0d47a1 rgba(13,71,161,1.0) hsl(216.5, 85.1%, 34.1%)
#82b1ff rgba(130,177,255,1.0) hsl(217.4, 100%, 75.5%)
#448aff rgba(68,138,255,1.0) hsl(217.5, 100%, 63.3%)
#2979ff rgba(41,121,255,1.0) hsl(217.6, 100%, 58%)
#2962ff rgba(41,98,255,1.0) hsl(224, 100%, 58%)
#e1f5fe rgba(225,245,254,1.0) hsl(198.6, 93.5%, 93.9%)
#b3e5fc rgba(179,229,252,1.0) hsl(198.9, 92.4%, 84.5%)
#81d4fa rgba(129,212,250,1.0) hsl(198.8, 92.4%, 74.3%)
#4fc3f7 rgba(79,195,247,1.0) hsl(198.6, 91.3%, 63.9%)
#29b6f6 rgba(41,182,246,1.0) hsl(198.7, 91.9%, 56.3%)
#03a9f4 rgba(3,169,244,1.0) hsl(198.7, 97.6%, 48.4%)
#039be5 rgba(3,155,229,1.0) hsl(199.6, 97.4%, 45.5%)
#0288d1 rgba(2,136,209,1.0) hsl(201.2, 98.1%, 41.4%)
#0277bd rgba(2,119,189,1.0) hsl(202.5, 97.9%, 37.5%)
#01579b rgba(1,87,155,1.0) hsl(206.5, 98.7%, 30.6%)
#80d8ff rgba(128,216,255,1.0) hsl(198.4, 100%, 75.1%)
#40c4ff rgba(64,196,255,1.0) hsl(198.5, 100%, 62.5%)
#00b0ff rgba(0,176,255,1.0) hsl(198.6, 100%, 50%)
#0091ea rgba(0,145,234,1.0) hsl(202.8, 100%, 45.9%)
#e0f7fa rgba(224,247,250,1.0) hsl(186.9, 72.2%, 92.9%)
#b2ebf2 rgba(178,235,242,1.0) hsl(186.6, 71.1%, 82.4%)
#80deea rgba(128,222,234,1.0) hsl(186.8, 71.6%, 71%)
#4dd0e1 rgba(77,208,225,1.0) hsl(186.9, 71.2%, 59.2%)
#26c6da rgba(38,198,218,1.0) hsl(186.7, 70.9%, 50.2%)
#00bcd4 rgba(0,188,212,1.0) hsl(186.8, 100%, 41.6%)
#00acc1 rgba(0,172,193,1.0) hsl(186.5, 100%, 37.8%)
#0097a7 rgba(0,151,167,1.0) hsl(185.7, 100%, 32.7%)
#00838f rgba(0,131,143,1.0) hsl(185, 100%, 28%)
#006064 rgba(0,96,100,1.0) hsl(182.4, 100%, 19.6%)
#84ffff rgba(132,255,255,1.0) hsl(180, 100%, 75.9%)
#18ffff rgba(24,255,255,1.0) hsl(180, 100%, 54.7%)
#00e5ff rgba(0,229,255,1.0) hsl(186.1, 100%, 50%)
#00b8d4 rgba(0,184,212,1.0) hsl(187.9, 100%, 41.6%)
#e0f2f1 rgba(224,242,241,1.0) hsl(176.7, 40.9%, 91.4%)
#b2dfdb rgba(178,223,219,1.0) hsl(174.7, 41.3%, 78.6%)
#80cbc4 rgba(128,203,196,1.0) hsl(174.4, 41.9%, 64.9%)
#4db6ac rgba(77,182,172,1.0) hsl(174.3, 41.8%, 50.8%)
#26a69a rgba(38,166,154,1.0) hsl(174.4, 62.7%, 40%)
#009688 rgba(0,150,136,1.0) hsl(174.4, 100%, 29.4%)
#00897b rgba(0,137,123,1.0) hsl(173.9, 100%, 26.9%)
#00796b rgba(0,121,107,1.0) hsl(173.1, 100%, 23.7%)
#00695c rgba(0,105,92,1.0) hsl(172.6, 100%, 20.6%)
#004d40 rgba(0,77,64,1.0) hsl(169.9, 100%, 15.1%)
#a7ffeb rgba(167,255,235,1.0) hsl(166.4, 100%, 82.7%)
#64ffda rgba(100,255,218,1.0) hsl(165.7, 100%, 69.6%)
#1de9b6 rgba(29,233,182,1.0) hsl(165, 82.3%, 51.4%)
#00bfa5 rgba(0,191,165,1.0) hsl(171.8, 100%, 37.5%)
#e8f5e9 rgba(232,245,233,1.0) hsl(124.6, 39.4%, 93.5%)
#c8e6c9 rgba(200,230,201,1.0) hsl(122, 37.5%, 84.3%)
#a5d6a7 rgba(165,214,167,1.0) hsl(122.4, 37.4%, 74.3%)
#81c784 rgba(129,199,132,1.0) hsl(122.6, 38.5%, 64.3%)
#66bb6a rgba(102,187,106,1.0) hsl(122.8, 38.5%, 56.7%)
#4caf50 rgba(76,175,80,1.0) hsl(122.4, 39.4%, 49.2%)
#43a047 rgba(67,160,71,1.0) hsl(122.6, 41%, 44.5%)
#388e3c rgba(56,142,60,1.0) hsl(122.8, 43.4%, 38.8%)
#2e7d32 rgba(46,125,50,1.0) hsl(123, 46.2%, 33.5%)
#1b5e20 rgba(27,94,32,1.0) hsl(124.5, 55.4%, 23.7%)
#b9f6ca rgba(185,246,202,1.0) hsl(136.7, 77.2%, 84.5%)
#69f0ae rgba(105,240,174,1.0) hsl(150.7, 81.8%, 67.6%)
#00e676# rgba(0,230,118,1.0) hsl(150.8, 100%, 45.1%)
#00c853 rgba(0,200,83,1.0) hsl(144.9, 100%, 39.2%)
#f1f8e9 rgba(241,248,233,1.0) hsl(88, 51.7%, 94.3%)
#dcedc8 rgba(220,237,200,1.0) hsl(87.6, 50.7%, 85.7%)
#c5e1a5 rgba(197,225,165,1.0) hsl(88, 50%, 76.5%)
#aed581 rgba(174,213,129,1.0) hsl(87.9, 50%, 67.1%)
#9ccc65 rgba(156,204,101,1.0) hsl(88, 50.2%, 59.8%)
#8bc34a rgba(139,195,74,1.0) hsl(87.8, 50.2%, 52.7%)
#7cb342 rgba(124,179,66,1.0) hsl(89.2, 46.1%, 48%)
#689f38 rgba(104,159,56,1.0) hsl(92, 47.9%, 42.2%)
#558b2f rgba(85,139,47,1.0) hsl(95.2, 49.5%, 36.5%)
#33691e rgba(51,105,30,1.0) hsl(103.2, 55.6%, 26.5%)
#ccff90 rgba(204,255,144,1.0) hsl(87.6, 100%, 78.2%)
#b2ff59 rgba(178,255,89,1.0) hsl(87.8, 100%, 67.5%)
#76ff03 rgba(118,255,3,1.0) hsl(92.6, 100%, 50.6%)
#64dd17 rgba(100,221,23,1.0) hsl(96.7, 81.1%, 47.8%)
#f9fbe7 rgba(249,251,231,1.0) hsl(66, 71.4%, 94.5%)
#f0f4c3 rgba(240,244,195,1.0) hsl(64.9, 69%, 86.1%)
#e6ee9c rgba(230,238,156,1.0) hsl(65.9, 70.7%, 77.3%)
#dce775 rgba(220,231,117,1.0) hsl(65.8, 70.4%, 68.2%)
##d4e157 #rgba(212,225,87,1.0) #hsl(65.7, 69.7%, 61.2%)
#cddc35 rgba(205,220,53,1.0) hsl(65.4, 70.5%, 53.5%)
#c0ca33 rgba(192,202,51,1.0) hsl(64, 59.7%, 49.6%)
#afb42b rgba(175,180,43,1.0) hsl(62.2, 61.4%, 43.7%)
#9e9d24 rgba(158,157,36,1.0) hsl(59.5, 62.9%, 38%)
#827717 rgba(130,119,23,1.0) hsl(53.8, 69.9%, 30%)
#f4ff81 rgba(244,255,129,1.0) hsl(65.2, 100%, 75.3%)
#eeff41 rgba(238,255,65,1.0) hsl(65.4, 100%, 62.7%)
#c6ff00 rgba(198,255,0,1.0) hsl(73.4, 100%, 50%)
#aeea00 rgba(174,234,0,1.0) hsl(75.4, 100%, 45.9%)
#fffde7 rgba(255,253,231,1.0) hsl(55, 100%, 95.3%)
#fff9c4 rgba(255,249,196,1.0) hsl(53.9, 100%, 88.4%)
#fff59d rgba(255,245,157,1.0) hsl(53.9, 100%, 80.8%)
#fff176 rgba(255,241,118,1.0) hsl(53.9, 100%, 73.1%)
#ffee58 rgba(255,238,88,1.0) hsl(53.9, 100%, 67.3%)
#ffeb3b rgba(255,235,59,1.0) hsl(53.9, 100%, 61.6%)
#fdd835 rgba(253,216,53,1.0) hsl(48.9, 98%, 60%)
#fbc02d rgba(251,192,45,1.0) hsl(42.8, 96.3%, 58%)
#f9a825 rgba(249,168,37,1.0) hsl(37.1, 94.6%, 56.1%)
#f57f17 rgba(245,127,23,1.0) hsl(28.1, 91.7%, 52.5%)
#ffff8d rgba(255,255,141,1.0) hsl(60, 100%, 77.6%)
#ffff00 rgba(255,255,0,1.0) hsl(60, 100%, 50%)
#ffea00 rgba(255,234,0,1.0) hsl(55.1, 100%, 50%)
#ffd600 rgba(255,214,0,1.0) hsl(50.4, 100%, 50%)
#fff8e1 rgba(255,248,225,1.0) hsl(46, 100%, 94.1%)
#ffecb3 rgba(255,236,179,1.0) hsl(45, 100%, 85.1%)
#ffe082 rgba(255,224,130,1.0) hsl(45.1, 100%, 75.5%)
#ffd54f rgba(255,213,79,1.0) hsl(45.7, 100%, 65.5%)
#ffca28 rgba(255,202,40,1.0) hsl(45.2, 100%, 57.8%)
#ffc107 rgba(255,193,7,1.0) hsl(45, 100%, 51.4%)
#ffb300 rgba(255,179,0,1.0) hsl(42.1, 100%, 50%)
#ffa000 rgba(255,160,0,1.0) hsl(37.6, 100%, 50%)
#ff8f00 rgba(255,143,0,1.0) hsl(33.6, 100%, 50%)
#ff6f00 rgba(255,111,0,1.0) hsl(26.1, 100%, 50%)
#ffe57f rgba(255,229,127,1.0) hsl(47.8, 100%, 74.9%)
#ffd740 rgba(255,215,64,1.0) hsl(47.4, 100%, 62.5%)
#ffc400 rgba(255,196,0,1.0) hsl(46.1, 100%, 50%)
#ffab00 rgba(255,171,0,1.0) hsl(40.2, 100%, 50%)
#fff3e0 rgba(255,243,224,1.0) hsl(36.8, 100%, 93.9%)
#ffe0b2 #ffe0b2 rgba(255,224,178,1.0)
#ffcc80 #ffcc80 hsl(35.9, 100%, 75.1%)
#ffb74d rgba(255,183,77,1.0) hsl(35.7, 100%, 65.1%)
#ffa726 rgba(255,167,38,1.0) hsl(35.7, 100%, 57.5%)
#ff9800 rgba(255,152,0,1.0) hsl(35.8, 100%, 50%)
#fb8c00 rgba(251,140,0,1.0) hsl(33.5, 100%, 49.2%)
#f57c00 rgba(245,124,0,1.0) hsl(30.4, 100%, 48%)
#ef6c00 rgba(239,108,0,1.0) hsl(27.1, 100%, 46.9%)
#e65100 rgba(230,81,0,1.0) hsl(21.1, 100%, 45.1%)
#ffd180 rgba(255,209,128,1.0) hsl(38.3, 100%, 75.1%)
#ffab40 rgba(255,171,64,1.0) hsl(33.6, 100%, 62.5%)
#ff9100 rgba(255,145,0,1.0) hsl(34.1, 100%, 50%)
#ff6d00 rgba(255,109,0,1.0) hsl(25.6, 100%, 50%)
#fbe9e7 rgba(251,233,231,1.0) hsl(6, 71.4%, 94.5%)
#ffccbc rgba(255,204,188,1.0) hsl(14.3, 100%, 86.9%)
#ffab91 rgba(255,171,145,1.0) hsl(14.2, 100%, 78.4%)
#ff8a65 rgba(255,138,101,1.0) hsl(14.4, 100%, 69.8%)
#ff7043 rgba(255,112,67,1.0) hsl(14.4, 100%, 63.1%)
#ff5722 rgba(255,87,34,1.0) hsl(14.4, 100%, 56.7%)
#f4511e rgba(244,81,30,1.0) hsl(14.3, 90.7%, 53.7%)
#e64a19 rgba(230,74,25,1.0) hsl(14.3, 80.4%, 50%)
#d84315 rgba(216,67,21,1.0) hsl(14.2, 82.3%, 46.5%)
#bf360c rgba(191,54,12,1.0) hsl(14.1, 88.2%, 39.8%)
#ff9e80 rgba(255,158,128,1.0) hsl(14.2, 100%, 75.1%)
#ff6e46 rgba(255,110,70,1.0) hsl(13, 100%, 63.7%)
#ff3d00 rgba(255,61,0,1.0) hsl(14.4, 100%, 50%)
#dd2c00 rgba(221,44,0,1.0) hsl(11.9, 100%, 43.3%)
#efebe9 rgba(239,235,233,1.0) hsl(20, 15.8%, 92.5%)
#d7ccc8 rgba(215,204,200,1.0) hsl(16, 15.8%, 81.4%)
#bcaaa4 rgba(188,170,164,1.0) hsl(15, 15.2%, 69%)
#a1887f rgba(161,136,127,1.0) hsl(15.9, 15.3%, 56.5%)
#8d6e63 rgba(141,110,99,1.0) hsl(15.7, 17.5%, 47.1%)
#795548 rgba(121,85,72,1.0) hsl(15.9, 25.4%, 37.8%)
#6d4c41 rgba(109,76,65,1.0) hsl(15, 25.3%, 34.1%)
#5d4037 rgba(93,64,55,1.0) hsl(14.2, 25.7%, 29%)
#4e342e rgba(78,52,46,1.0) hsl(11.3, 25.8%, 24.3%)
#3e2723 rgba(62,39,35,1.0) hsl(8.9, 27.8%, 19%)
#fafafa rgba(250,250,250,1.0) hsl(0, 0%, 98%)
#f5f5f5 rgba(245,245,245,1.0) hsl(0, 0%, 96.1%)
#eeeeee rgba(238,238,238,1.0) hsl(0, 0%, 93.3%)
#e0e0e0 rgba(224,224,224,1.0) hsl(0, 0%, 87.8%)
#bdbdbd rgba(189,189,189,1.0) hsl(0, 0%, 74.1%)
#9e9e9e rgba(158,158,158,1.0) hsl(0, 0%, 62%)
#757575 rgba(117,117,117,1.0) hsl(0, 0%, 45.9%)
#616161 rgba(97,97,97,1.0) hsl(0, 0%, 38%)
#424242 rgba(66,66,66,1.0) hsl(0, 0%, 25.9%)
#212121 rgba(33,33,33,1.0) hsl(0, 0%, 12.9%)
#eceff1 rgba(236,239,241,1.0) hsl(204, 15.2%, 93.5%)
#cfd8dc rgba(207,216,220,1.0) hsl(198.5, 15.7%, 83.7%)
#b0bec5 rgba(176,190,197,1.0) hsl(200, 15.3%, 73.1%)
#90a4ae rgba(144,164,174,1.0) hsl(200, 15.6%, 62.4%)
#78909c rgba(120,144,156,1.0) hsl(200, 15.4%, 54.1%)
#607d8b rgba(96,125,139,1.0) hsl(199.5, 18.3%, 46.1%)
#546e7a rgba(84,110,122,1.0) hsl(198.9, 18.4%, 40.4%)
#455a64 rgba(69,90,100,1.0) hsl(199.4, 18.3%, 33.1%)
#455a64 rgba(69,90,100,1.0) hsl(199.4, 18.3%, 33.1%)
#37474f rgba(55,71,79,1.0) hsl(200, 17.9%, 26.3%)
#263238 rgba(38,50,56,1.0) hsl(200, 19.1%, 18.4%)
#000000 rgba(0,0,0,1.0) hsl(0, 0%, 0%)
#ffffff rgba(255,255,255,1.0) hsl(0, 0%, 100%)