Dev NOTES

Colours

A collection of Colours based upon

Material colors

Below is a list of the Material design color palette grouped by primary color

Red

#F44336 — red 
#FFEBEE — red  lighten-5
#FFCDD2 — red  lighten-4
#EF9A9A — red  lighten-3
#E57373 — red  lighten-2
#EF5350 — red  lighten-1
#E53935 — red  darken-1
#D32F2F — red  darken-2
#C62828 — red  darken-3
#B71C1C — red  darken-4
#FF8A80 — red  accent-1
#FF5252 — red  accent-2
#FF1744 — red  accent-3
#D50000 — red  accent-4

Pink

#e91e63 — pink 
#fce4ec — pink  lighten-5
#f8bbd0 — pink  lighten-4
#f48fb1 — pink  lighten-3
#f06292 — pink  lighten-2
#ec407a — pink  lighten-1
#d81b60 — pink  darken-1
#c2185b — pink  darken-2
#ad1457 — pink  darken-3
#880e4f — pink  darken-4
#ff80ab — pink  accent-1
#ff4081 — pink  accent-2
#f50057 — pink  accent-3
#c51162 — pink  accent-4

Purple

#9c27b0 — purple 
#f3e5f5 — purple  lighten-5
#e1bee7 — purple  lighten-4
#ce93d8 — purple  lighten-3
#ba68c8 — purple  lighten-2
#ab47bc — purple  lighten-1
#8e24aa — purple  darken-1
#7b1fa2 — purple  darken-2
#6a1b9a — purple  darken-3
#4a148c — purple  darken-4
#ea80fc — purple  accent-1
#e040fb — purple  accent-2
#d500f9 — purple  accent-3
#aa00ff — purple  accent-4

Deep-Purple

#673ab7 — deep-purple 
#ede7f6 — deep-purple  lighten-5
#d1c4e9 — deep-purple  lighten-4
#b39ddb — deep-purple  lighten-3
#9575cd — deep-purple  lighten-2
#7e57c2 — deep-purple  lighten-1
#5e35b1 — deep-purple  darken-1
#512da8 — deep-purple  darken-2
#4527a0 — deep-purple  darken-3
#311b92 — deep-purple  darken-4
#b388ff — deep-purple  accent-1
#7c4dff — deep-purple  accent-2
#651fff — deep-purple  accent-3
#6200ea — deep-purple  accent-4

Indigo

#3f51b5 — indigo 
#e8eaf6 — indigo  lighten-5
#c5cae9 — indigo  lighten-4
#9fa8da — indigo  lighten-3
#7986cb — indigo  lighten-2
#5c6bc0 — indigo  lighten-1
#3949ab — indigo  darken-1
#303f9f — indigo  darken-2
#283593 — indigo  darken-3
#1a237e — indigo  darken-4
#8c9eff — indigo  accent-1
#536dfe — indigo  accent-2
#3d5afe — indigo  accent-3
#304ffe — indigo  accent-4

Blue

#2196f3 — blue 
#e3f2fd — blue  lighten-5
#bbdefb — blue  lighten-4
#90caf9 — blue  lighten-3
#64b5f6 — blue  lighten-2
#42a5f5 — blue  lighten-1
#1e88e5 — blue  darken-1
#1976d2 — blue  darken-2
#1565c0 — blue  darken-3
#0d47a1 — blue  darken-4
#82b1ff — blue  accent-1
#448aff — blue  accent-2
#2979ff — blue  accent-3
#2962ff — blue  accent-4

Light-Blue

#03a9f4 — light-blue 
#e1f5fe — light-blue  lighten-5
#b3e5fc — light-blue  lighten-4
#81d4fa — light-blue  lighten-3
#4fc3f7 — light-blue  lighten-2
#29b6f6 — light-blue  lighten-1
#039be5 — light-blue  darken-1
#0288d1 — light-blue  darken-2
#0277bd — light-blue  darken-3
#01579b — light-blue  darken-4
#80d8ff — light-blue  accent-1
#40c4ff — light-blue  accent-2
#00b0ff — light-blue  accent-3
#0091ea — light-blue  accent-4

Cyan

#00bcd4 — cyan 
#e0f7fa — cyan  lighten-5
#b2ebf2 — cyan  lighten-4
#80deea — cyan  lighten-3
#4dd0e1 — cyan  lighten-2
#26c6da — cyan  lighten-1
#00acc1 — cyan  darken-1
#0097a7 — cyan  darken-2
#00838f — cyan  darken-3
#006064 — cyan  darken-4
#84ffff — cyan  accent-1
#18ffff — cyan  accent-2
#00e5ff — cyan  accent-3
#00b8d4 — cyan  accent-4

Teal

#009688 — teal 
#e0f2f1 — teal  lighten-5
#b2dfdb — teal  lighten-4
#80cbc4 — teal  lighten-3
#4db6ac — teal  lighten-2
#26a69a — teal  lighten-1
#00897b — teal  darken-1
#00796b — teal  darken-2
#00695c — teal  darken-3
#004d40 — teal  darken-4
#a7ffeb — teal  accent-1
#64ffda — teal  accent-2
#1de9b6 — teal  accent-3
#00bfa5 — teal  accent-4

Green

#4caf50 — green 
#e8f5e9 — green  lighten-5
#c8e6c9 — green  lighten-4
#a5d6a7 — green  lighten-3
#81c784 — green  lighten-2
#66bb6a — green  lighten-1
#43a047 — green  darken-1
#388e3c — green  darken-2
#2e7d32 — green  darken-3
#1b5e20 — green  darken-4
#b9f6ca — green  accent-1
#69f0ae — green  accent-2
#00e676 — green  accent-3
#00c853 — green  accent-4

Light-Green

#8bc34a — light-green 
#f1f8e9 — light-green  lighten-5
#dcedc8 — light-green  lighten-4
#c5e1a5 — light-green  lighten-3
#aed581 — light-green  lighten-2
#9ccc65 — light-green  lighten-1
#7cb342 — light-green  darken-1
#689f38 — light-green  darken-2
#558b2f — light-green  darken-3
#33691e — light-green  darken-4
#ccff90 — light-green  accent-1
#b2ff59 — light-green  accent-2
#76ff03 — light-green  accent-3
#64dd17 — light-green  accent-4

Lime

#cddc39 — lime 
#f9fbe7 — lime  lighten-5
#f0f4c3 — lime  lighten-4
#e6ee9c — lime  lighten-3
#dce775 — lime  lighten-2
#d4e157 — lime  lighten-1
#c0ca33 — lime  darken-1
#afb42b — lime  darken-2
#9e9d24 — lime  darken-3
#827717 — lime  darken-4
#f4ff81 — lime  accent-1
#eeff41 — lime  accent-2
#c6ff00 — lime  accent-3
#aeea00 — lime  accent-4

Yellow

#ffeb3b — yellow 
#fffde7 — yellow  lighten-5
#fff9c4 — yellow  lighten-4
#fff59d — yellow  lighten-3
#fff176 — yellow  lighten-2
#ffee58 — yellow  lighten-1
#fdd835 — yellow  darken-1
#fbc02d — yellow  darken-2
#f9a825 — yellow  darken-3
#f57f17 — yellow  darken-4
#ffff8d — yellow  accent-1
#ffff00 — yellow  accent-2
#ffea00 — yellow  accent-3
#ffd600 — yellow  accent-4

Amber

#ffc107 — amber 
#fff8e1 — amber  lighten-5
#ffecb3 — amber  lighten-4
#ffe082 — amber  lighten-3
#ffd54f — amber  lighten-2
#ffca28 — amber  lighten-1
#ffb300 — amber  darken-1
#ffa000 — amber  darken-2
#ff8f00 — amber  darken-3
#ff6f00 — amber  darken-4
#ffe57f — amber  accent-1
#ffd740 — amber  accent-2
#ffc400 — amber  accent-3
#ffab00 — amber  accent-4

Orange

#ff9800 — orange 
#fff3e0 — orange  lighten-5
#ffe0b2 — orange  lighten-4
#ffcc80 — orange  lighten-3
#ffb74d — orange  lighten-2
#ffa726 — orange  lighten-1
#fb8c00 — orange  darken-1
#f57c00 — orange  darken-2
#ef6c00 — orange  darken-3
#e65100 — orange  darken-4
#ffd180 — orange  accent-1
#ffab40 — orange  accent-2
#ff9100 — orange  accent-3
#ff6d00 — orange  accent-4

Deep-Orange

#ff5722 — deep-orange 
#fbe9e7 — deep-orange  lighten-5
#ffccbc — deep-orange  lighten-4
#ffab91 — deep-orange  lighten-3
#ff8a65 — deep-orange  lighten-2
#ff7043 — deep-orange  lighten-1
#f4511e — deep-orange  darken-1
#e64a19 — deep-orange  darken-2
#d84315 — deep-orange  darken-3
#bf360c — deep-orange  darken-4
#ff9e80 — deep-orange  accent-1
#ff6e40 — deep-orange  accent-2
#ff3d00 — deep-orange  accent-3
#dd2c00 — deep-orange  accent-4

Brown

#795548 — brown 
#efebe9 — brown  lighten-5
#d7ccc8 — brown  lighten-4
#bcaaa4 — brown  lighten-3
#a1887f — brown  lighten-2
#8d6e63 — brown  lighten-1
#6d4c41 — brown  darken-1
#5d4037 — brown  darken-2
#4e342e — brown  darken-3
#3e2723 — brown  darken-4

Blue-Grey

#607d8b — blue-grey 
#eceff1 — blue-grey  lighten-5
#cfd8dc — blue-grey  lighten-4
#b0bec5 — blue-grey  lighten-3
#90a4ae — blue-grey  lighten-2
#78909c — blue-grey  lighten-1
#546e7a — blue-grey  darken-1
#455a64 — blue-grey  darken-2
#37474f — blue-grey  darken-3
#263238 — blue-grey  darken-4

Grey

#9e9e9e — grey 
#fafafa — grey  lighten-5
#f5f5f5 — grey  lighten-4
#eeeeee — grey  lighten-3
#e0e0e0 — grey  lighten-2
#bdbdbd — grey  lighten-1
#757575 — grey  darken-1
#616161 — grey  darken-2
#424242 — grey  darken-3
#212121 — grey  darken-4

Shades

#000000 — black
#ffffff — white
transparent — transparent
 
 
 
 
 
 
 

Grayscale

#aaa
#bbb
#ccc
#ddd
#eee
#fff
#999
#888
#777
#666
#555
#444
#333
#222
#111
#000
    

← Docker →