Material Design Colors
Google’s Material UI colors palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.
They’ve been designed to work harmoniously with each other.
They’ve been designed to work harmoniously with each other.
› Material Design Colors
About Material UI Colors
Google’s material ui colors palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors. Google challenged themselves to create a visual language for users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.
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 |