perfectowebСтудия дизайна и программирования
Цены Заказать
Цвета Material Design
Цветовая палитра пользовательского интерфейса Google содержит основные и акцентирующие цвета, которые можно использовать для иллюстрации или для разработки цвета вашего бренда.
Они были разработаны для гармоничной работы друг с другом.
Назад к инструментам

› Цвета Material Design

Инструменты

Что такое цвета Material UI?

Палитра цветов пользовательского интерфейса Google содержит основные и акцентирующие цвета, которые можно использовать для иллюстрации или для разработки цвета вашего бренда. Они были разработаны для гармоничной работы друг с другом. Цветовая палитра начинается с основных цветов и заполняет спектр для создания полной и удобной палитры для Android, Web и iOS. Google предлагает использовать 500 цветов в качестве основных цветов в вашем приложении и другие цвета в качестве цветовых акцентов. Google поставила перед собой задачу создать визуальный язык для пользователей, который объединяет классические принципы хорошего дизайна с инновациями и новыми возможностями.
Это и есть материальный дизайн (Material Design).

Red: #f44336Pink: #E91E63Purple: #9C27B0Deep Purple: #673AB7Indigo: #3F51B5Blue: #2196F3Light Blue: #03A9F4Cyan: #00BCD4Teal: #009688Green: #4CAF50Light Green: #8BC34ALime: #CDDC39Yellow: #FFEB3BAmber: #FFC107Orange: #FF9800Deep Orange: #FF5722Brown: #795548Grey: #9E9E9EBlue Grey: #607D8B
50: #ffebee50: #FCE4EC50: #F3E5F550: #EDE7F650: #E8EAF650: #E3F2FD50: #E1F5FE50: #E0F7FA50: #E0F2F150: #E8F5E950: #F1F8E950: #F9FBE750: #FFFDE750: #FFF8E150: #FFF3E050: #FBE9E750: #EFEBE950: #FAFAFA50: #ECEFF1
100: #ffcdd2100: #F8BBD0100: #E1BEE7100: #D1C4E9100: #C5CAE9100: #BBDEFB100: #B3E5FC100: #B2EBF2100: #B2DFDB100: #C8E6C9100: #DCEDC8100: #F0F4C3100: #FFF9C4100: #FFECB3100: #FFE0B2100: #FFCCBC100: #D7CCC8100: #F5F5F5100: #CFD8DC
200: #ef9a9a200: #F48FB1200: #CE93D8200: #B39DDB200: #9FA8DA200: #90CAF9200: #81D4FA200: #80DEEA200: #80CBC4200: #A5D6A7200: #C5E1A5200: #E6EE9C200: #FFF59D200: #FFE082200: #FFCC80200: #FFAB91200: #BCAAA4200: #EEEEEE200: #B0BEC5
300: #e57373300: #F06292300: #BA68C8300: #9575CD300: #7986CB300: #64B5F6300: #4FC3F7300: #4DD0E1300: #4DB6AC300: #81C784300: #AED581300: #DCE775300: #FFF176300: #FFD54F300: #FFB74D300: #FF8A65300: #A1887F300: #E0E0E0300: #90A4AE
400: #ef5350400: #EC407A400: #AB47BC400: #7E57C2400: #5C6BC0400: #42A5F5400: #29B6F6400: #26C6DA400: #26A69A400: #66BB6A400: #9CCC65400: #D4E157400: #FFEE58400: #FFCA28400: #FFA726400: #FF7043400: #8D6E63400: #BDBDBD400: #78909C
500: #f44336500: #E91E63500: #9C27B0500: #673AB7500: #3F51B5500: #2196F3500: #03A9F4500: #00BCD4500: #009688500: #4CAF50500: #8BC34A500: #CDDC39500: #FFEB3B500: #FFC107500: #FF9800500: #FF5722500: #795548500: #9E9E9E500: #607D8B
600: #e53935600: #D81B60600: #8E24AA600: #5E35B1600: #3949AB600: #1E88E5600: #039BE5600: #00ACC1600: #00897B600: #43A047600: #7CB342600: #C0CA33600: #FDD835600: #FFB300600: #FB8C00600: #F4511E600: #6D4C41600: #757575600: #546E7A
700: #d32f2f700: #C2185B700: #7B1FA2700: #512DA8700: #303F9F700: #1976D2700: #0288D1700: #0097A7700: #00796B700: #388E3C700: #689F38700: #AFB42B700: #FBC02D700: #FFA000700: #F57C00700: #E64A19700: #5D4037700: #616161700: #455A64
800: #c62828800: #AD1457800: #6A1B9A800: #4527A0800: #283593800: #1565C0800: #0277BD800: #00838F800: #00695C800: #2E7D32800: #558B2F800: #9E9D24800: #F9A825800: #FF8F00800: #EF6C00800: #D84315800: #4E342E800: #424242800: #37474F
900: #b71c1c900: #880E4F900: #4A148C900: #311B92900: #1A237E900: #0D47A1900: #01579B900: #006064900: #004D40900: #1B5E20900: #33691E900: #827717900: #F57F17900: #FF6F00900: #E65100900: #BF360C900: #3E2723900: #212121900: #263238
A100: #ff8a80A100: #FF80ABA100: #EA80FCA100: #B388FFA100: #8C9EFFA100: #82B1FFA100: #80D8FFA100: #84FFFFA100: #A7FFEBA100: #B9F6CAA100: #CCFF90A100: #F4FF81A100: #FFFF8DA100: #FFE57FA100: #FFD180A100: #FF9E80
A200: #ff5252A200: #FF4081A200: #E040FBA200: #7C4DFFA200: #536DFEA200: #448AFFA200: #40C4FFA200: #18FFFFA200: #64FFDAA200: #69F0AEA200: #B2FF59A200: #EEFF41A200: #FFFF00A200: #FFD740A200: #FFAB40A200: #FF6E40
A400: #ff1744A400: #F50057A400: #D500F9A400: #651FFFA400: #3D5AFEA400: #2979FFA400: #00B0FFA400: #00E5FFA400: #1DE9B6A400: #00E676A400: #76FF03A400: #C6FF00A400: #FFEA00A400: #FFC400A400: #FF9100A400: #FF3D00
A700: #d50000A700: #C51162A700: #AA00FFA700: #6200EAA700: #304FFEA700: #2962FFA700: #0091EAA700: #00B8D4A700: #00BFA5A700: #00C853A700: #64DD17A700: #AEEA00A700: #FFD600A700: #FFAB00A700: #FF6D00A700: #DD2C00

Выберите язык

Русский язык РусскийEnglish version English
Мы используем cookie-файлы для наилучшего представления нашего сайта и сбора анонимной статистики посредством Google Analytics и Яндекс Метрики. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.