Android material color palette

Color

Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines.

The Material Design color system can be used to create a color theme that reflects your brand or style.

Picking colors

Official color tool

The Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.

The output can be fed into createTheme() function:

Playground

To test a material.io/design/color color scheme with the MUI documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields.

The output shown in the color sample can be pasted directly into a createTheme() function (to be used with ThemeProvider ):

Only the main shades need be provided (unless you wish to further customize light , dark or contrastText ), as the other colors will be calculated by createTheme() , as described in the Theme customization section.

If you are using the default primary and / or secondary shades then by providing the color object, createTheme() will use the appropriate shades from the material color for main, light and dark.

Tools by the community

• mui-theme-creator: A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme
• Material palette generator: The Material palette generator can be used to generate a palette for any color you input.

2014 Material Design color palettes

These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.

Important Terms

• Palette: A palette is a collection of colors, i.e. hues and their shades. MUI provides all colors from the Material Design guidelines. This color palette has been designed with colors that work harmoniously with each other.
• Hue & Shade: A single color within the palette is made up of a hue such as «red», and shade, such as «500». «red 50» is the lightest shade of red (pink!), while «red 900» is the darkest. In addition, most hues come with «accent» shades, prefixed with an A .

Color palette

Given a HUE (red, pink, etc.) and a SHADE (500, 600, etc.) you can import the color like this:

Источник

Material Theming with MDC: Color

Color theming on Android using the MDC library

Material Theming is a way to customize Material Components to align with your brand. A Material theme includes color, typography and shape parameters which you can adjust to get near-infinite variations of the components — all while maintaining their core anatomy and usability.

On Android, Material Theming can be implemented using the Material Components (MDC) library, from version 1.1.0 onwards. If you’re looking to migrate from the Design Support Library or MDC 1.0.0 , take a look at our migration guide.

Migrating to Material Components for Android

From Design Support Library 👉 MDC 1.0.0 👉 MDC 1.1.0 and beyond

This article will be focusing on color theming.

Color attributes

Material Design provides 12 color “slots” that make up the overall palette of your app. Each of these have a design term (eg. “Primary”) along with a corresponding color attribute that can be overridden in your app theme (eg. colorPrimary ). There are default “baseline” values for both your light theme and dark theme.

Material Components use these color attributes to tint elements of the widgets.

They are applied with eg.

in layouts and widget styles.

You might recognise some of these color attributes like colorPrimary . That’s because a few of them are inherited from AppCompat and the platform, while the rest have been newly introduced by MDC. The table below illustrates the origin of each attribute.

Picking colors

Figuring out which color values to use for each slot may be the responsibility of a designer, or derived from your product’s brand. However, it’s still useful to know about the role of each color, the relationship between them, and how to meet accessibility requirements:

• colorPrimary and colorSecondary represent the colors of your brand
• colorPrimaryVariant and colorSecondaryVariant are lighter or darker shades of your brand colors
• colorSurface is used for “sheets” of material (like cards and bottom sheets)
• android:colorBackground is the window background color of your app
• colorError is, as the name suggests, for errors and warnings
• The various “On” colors ( colorOnPrimary , colorOnSecondary , colorOnSurface , etc.) are used to tint foreground content (such as text and icons) displayed on top of the other colors. They need to meet accessibility requirements and have sufficient contrast against the colors they’re displayed on.

Color tools

Material Design provides useful tools for previewing colors and determining suitable variants and “On” colors:

• Material color tool : Get light/dark variants of your primary and secondary colors as well as the appropriate “On” color. Preview how these will look in sample screens.
• Material palette generator : Generate a full tonal palette (shade 50–900) for a color. Get suggestions of complementary, analogous, and triadic colors.

Things to consider

• You almost always want to override colorPrimary , colorSecondary and their variants, unless your brand happens to use the exact same purple/teal hex values as the baseline Material Theme.
• You don’t have to override all colors. Some, such as colorSurface , use neutral colors so relying on the default values is perfectly fine.
• If your brand does not define any kind of secondary or accent color, it’s ok to use a single color for both colorPrimary and colorSecondary . The same can be said of variants (eg. colorPrimary and colorPrimaryVariant could be the same).
• Despite being separate attributes, there’s an inherent link between a color, its variant (if one exists) and its “On” color (eg. colorPrimary , colorPrimaryVariant and colorOnPrimary ). Overriding one means checking the others to see if they make sense and meet accessibility requirements.

Additional color slots

Your design system may call for additional color slots outside of the 12 that Material Theming specifies. Thankfully this is relatively easy to do on Android by declaring a color attr:

Color resources

Color values are defined as resources. For custom colors we recommend two approaches to help separate concerns, and create a single source of truth for color theming values in your app:

• Store all s in a single res/values/colors.xml file
• Use literal names for s that describe the value as opposed to assigning semantic meaning:
• Doing so encourages the use of ?attr/ references when using colors, which is a recommended approach for supporting dark themes
• Use names like green_500 or brand_name_yellow
• Avoid semantic names like color_primary

Overriding colors in an app theme

Let’s take a look at how you can add your chosen color palette to your app theme by overriding relevant attributes.

First, we recommend setting up your theme(s) to gracefully handle light and dark color palettes while reducing repetition with base themes. For more on this topic, take a look at Chris Banes’ article on dark theme as well as the “Developing Themes with Style” talk given by him and Nick Butcher.

Источник

10 лучших генераторов цветных палитр Material Design

Цвет — важнейший элемент веб-дизайна, поэтому, когда вы работаете с Material Design, стоит обратить внимание на активное использование насыщенных, контрастных и ярких цветов. Существует бесконечное множество комбинаций, и любому дизайнеру не избежать размышлений о подборе наиболее подходящих оттенков.

Так как выбор палитры задаст весь будущий дизайн, на это нужно потратить достаточно времени, и чтобы помочь с выбором идеальных комбинаций, в этой статье собрано топ 10 генераторов цветных палитр для стиля Material Design.

Также хочу заменить, что ранее мы уже публиковали подборку с генераторами цветовых палитр, но они к Material Design никак не относились. Называлась статья 5 генераторов цветовых схем для веб-дизайнера.

Material Palette

Material Pallete один из лучших инструментов подбора палитр в стиле Material Design. Его хорошо продуманный интерфейс точно не оставит вас равнодушным. Это приложение позволяет выбрать главный цвет и дополнительные к нему, после чего покажет вам превью созданной палитры и предложит несколько способов её скачать.

• Перейти

Material UI

Material UI пользуется популярностью среди графических и веб-дизайнеров. Он содержит основные и дополнительные цвета для использования или же поможет при работе над цветовой темой вашего проекта. Создание палитры начинается с выбора основных цветов, после чего заполняется спектром с соответствующими ему цветами. Так можно создать полноценную, готовую к использованию палитру для Android, Web, и iOS. 500 цветов Google рекомендует использовать как основные в вашем приложении, а также ряд других цветов как дополнительные.

• Перейти

Designskillz Material design

Этот ресурс отобразит для вас все цвета material дизайна вместе с их названиями (например Pink, Light Blue, и т. д.).

• Перейти

Material UP

Material UP это инструмент, предоставляющий палитры для дизайна. Показывает основные цвета в ряд, один за другим. Кликнув на один из них можно увидеть все дополнительные цвета, которые привязаны к нему.

• Перейти

Material Mixer

Material mixer поможет вам выбрать сочетание основных и дополнительных цветов в material дизайне. Инструмент подбирает тени и оттенки цветов, основываясь на палитре Google. Сервис также позволяет выбрать запасной цвет на замену для каждого основного в вашей палитре. Для создания новой палитры просто выберите основной и дополнительный цвет из предлагаемых, чтобы отобразился идеально подобранный список сочетающихся с ними цветов.

• Перейти

Random Material Generator

Позвольте Random Material Generator выбрать палитру для вашего дизайна случайным образом.

• Перейти

Colordrop

Это расширение для браузера Chrome. Позволяет окрашивать DIV-блоки и шрифты с помощью Drag & Drop в цвета из палитры Material Design. Отличное решение в тех случаях, когда нужно быстро посмотреть, как будет выглядеть элемент на рабочем сайте. Расширение хоть и сыроватое, но занимательное.

• Скачать

Material Design css генератор

Простой инструмент, который позволяет удобно подобрать цветовую палитру для вашего приложения. После того, как определились с основными активными цветами, можно скачать CSS файл.

• Перейти

Material Colors

Material Colors — это простой в использовании ресурс для тестирования и быстрого копирования цветов Material Design. Здесь вы найдете 500 основных и 200 дополнительных цветов для создания цветовой темы.

• Перейти

Tint ui

Tint UI это инструмент для подбора цветов, где собраны официальные палитры Material Design, iOS, Flat UI Colors и Windows.

• Перейти

Источник

Color Palette

You can find here a reference of all colors used in the themes.

Material Themes

Selection Background: #546E7A

Selection Foreground: #FFFFFF

Second Background: #32424A

Accent Color: #009688

Excluded Files Color: #2E3C43

Green Color: #c3e88d

Yellow Color: #ffcb6b

Blue Color: #82aaff

Red Color: #f07178

Purple Color: #c792ea

Orange Color: #f78c6c

Cyan Color: #89ddff

Gray Color: #546e7a

White/Black Color: #eeffff

Error Color: #ff5370

Comments Color: #546e7a

Variables Color: #eeffff

Links Color: #80cbc4

Functions Color: #82aaff

Keywords Color: #c792ea

Tags Color: #f07178

Strings Color: #c3e88d

Operators Color: #89ddff

Attributes Color: #ffcb6b

Numbers Color: #f78c6c

Parameters Color: #f78c6c

Selection Background: #404040

Selection Foreground: #FFFFFF

Second Background: #292929

Accent Color: #FF9800

Excluded Files Color: #323232

Green Color: #c3e88d

Yellow Color: #ffcb6b

Blue Color: #82aaff

Red Color: #f07178

Purple Color: #c792ea

Orange Color: #f78c6c

Cyan Color: #89ddff

Gray Color: #616161

White/Black Color: #eeffff

Error Color: #ff5370

Comments Color: #616161

Variables Color: #eeffff

Links Color: #80cbc4

Functions Color: #82aaff

Keywords Color: #c792ea

Tags Color: #f07178

Strings Color: #c3e88d

Operators Color: #89ddff

Attributes Color: #ffcb6b

Numbers Color: #f78c6c

Parameters Color: #f78c6c

Selection Background: #80CBC440

Selection Foreground: #546e7a

Second Background: #FFFFFF

Accent Color: #00BCD4

Excluded Files Color: #CCD7DA50

Green Color: #91b859

Yellow Color: #f6a434

Blue Color: #6182b8

Red Color: #e53935

Purple Color: #7c4dff

Orange Color: #f76d47

Cyan Color: #39adb5

Gray Color: #AABFC9

White/Black Color: #272727

Error Color: #e53935

Comments Color: #AABFC9

Variables Color: #272727

Links Color: #39ADB5

Functions Color: #6182B8

Keywords Color: #7C4DFF

Tags Color: #E53935

Strings Color: #91B859

Operators Color: #39ADB5

Attributes Color: #F6A434

Numbers Color: #F76D47

Parameters Color: #F76D47

Selection Background: #717CB470

Selection Foreground: #FFFFFF

Second Background: #34324a

Accent Color: #ab47bc

Excluded Files Color: #2f2e43

Green Color: #c3e88d

Yellow Color: #ffcb6b

Blue Color: #82aaff

Red Color: #f07178

Purple Color: #c792ea

Orange Color: #f78c6c

Cyan Color: #89ddff

Gray Color: #676E95

White/Black Color: #eeffff

Error Color: #ff5370

Comments Color: #676E95

Variables Color: #eeffff

Links Color: #80cbc4

Functions Color: #82aaff

Keywords Color: #c792ea

Tags Color: #f07178

Strings Color: #c3e88d

Operators Color: #89ddff

Attributes Color: #ffcb6b

Numbers Color: #f78c6c

Parameters Color: #f78c6c

Selection Background: #717CB480

Selection Foreground: #FFFFFF

Second Background: #181A1F

Accent Color: #84ffff

Excluded Files Color: #292D3E

Green Color: #c3e88d

Yellow Color: #ffcb6b

Blue Color: #82aaff

Red Color: #f07178

Purple Color: #c792ea

Orange Color: #f78c6c

Cyan Color: #89ddff

Gray Color: #717CB4

White/Black Color: #eeffff

Error Color: #ff5370

Comments Color: #717CB4

Variables Color: #eeffff

Links Color: #80cbc4

Functions Color: #82aaff

Keywords Color: #c792ea

Tags Color: #f07178

Strings Color: #c3e88d

Operators Color: #89ddff

Attributes Color: #ffcb6b

Numbers Color: #f78c6c

Parameters Color: #f78c6c

Other Themes

Selection Background: #6E6C6F

Selection Foreground: #FFFFFF

Second Background: #403E41

Accent Color: #ffd866

Excluded Files Color: #3a3a3c

Green Color: #a9dc76

Yellow Color: #ffd866

Blue Color: #78dce8

Red Color: #ff6188

Purple Color: #ab9df2

Orange Color: #f59762

Cyan Color: #78dce8

Gray Color: #727072

White/Black Color: #fcfcfa

Error Color: #f65f87

Comments Color: #727072

Variables Color: #FCFCFA

Links Color: #78DCE8

Functions Color: #A9DC76

Keywords Color: #FF6188

Tags Color: #FF6188

Strings Color: #FFD866

Operators Color: #FF6188

Attributes Color: #78DCE8

Numbers Color: #AB9DF2

Parameters Color: #F59762

Selection Background: #44475A

Selection Foreground: #8BE9FD

Second Background: #282A36

Accent Color: #FF79C5

Excluded Files Color: #313341

Green Color: #8aff80

Yellow Color: #feff80

Blue Color: #79cbdc

Red Color: #f780bf

Purple Color: #9580ff

Orange Color: #f89580

Cyan Color: #80ffea

Gray Color: #6272A4

White/Black Color: #F8F8F2

Error Color: #ff5555

Comments Color: #6272A4

Variables Color: #F8F8F2

Links Color: #feff80

Functions Color: #8aff80

Keywords Color: #f780bf

Tags Color: #f780bf

Strings Color: #feff80

Operators Color: #f780bf

Attributes Color: #8aff80

Numbers Color: #9580ff

Parameters Color: #f89580

Selection Background: #3A66D150

Selection Foreground: #FFFFFF

Second Background: #F3f3f3

Accent Color: #79CB60

Excluded Files Color: #dcdcdc

Green Color: #22863a

Yellow Color: #e36209

Blue Color: #005cc5

Red Color: #d73a49

Purple Color: #6f42c1

Orange Color: #e36209

Cyan Color: #032F62

Gray Color: #6A737D

White/Black Color: #24292E

Error Color: #d25252

Comments Color: #6A737D

Variables Color: #24292E

Links Color: #005CC5

Functions Color: #6F42C1

Keywords Color: #D73A49

Tags Color: #22863A

Strings Color: #032F62

Operators Color: #D73A49

Attributes Color: #6F42C1

Numbers Color: #005CC5

Parameters Color: #E36209

Selection Background: #3392FF44

Selection Foreground: #FFFFFF

Second Background: #2f363d

Accent Color: #f9826c

Excluded Files Color: #2f363d

Green Color: #85e89d

Yellow Color: #ffab70

Blue Color: #79b8ff

Red Color: #f97583

Purple Color: #b392f0

Orange Color: #ffab70

Cyan Color: #79b8ff

Gray Color: #959da5

White/Black Color: #d1d5da

Error Color: #f97583

Comments Color: #959da5

Variables Color: #d1d5da

Links Color: #79b8ff

Functions Color: #b392f0

Keywords Color: #f97583

Tags Color: #85e89d

Strings Color: #79b8ff

Operators Color: #f97583

Attributes Color: #b392f0

Numbers Color: #79b8ff

Parameters Color: #ffab70

Selection Background: #8888FF55

Selection Foreground: #FFFFFF

Second Background: #393f4c45

Accent Color: #42A5F5

Excluded Files Color: #37373d

Green Color: #8f9d6a

Yellow Color: #f9ee98

Blue Color: #7587a6

Red Color: #cf6a4c

Purple Color: #9b859d

Orange Color: #cda869

Cyan Color: #47bc9b

Gray Color: #A7A7A7

White/Black Color: #d3dae3

Error Color: #cf6a4c

Comments Color: #747c84

Variables Color: #CF6A4C

Links Color: #7587A6

Functions Color: #7587A6

Keywords Color: #9B859D

Tags Color: #CF6A4C

Strings Color: #8F9D6A

Operators Color: #A7A7A7

Attributes Color: #F9EE98

Numbers Color: #CDA869

Parameters Color: #CDA869

Selection Background: #4D515D

Selection Foreground: #FFFFFF

Second Background: #2F333D

Accent Color: #2979ff

Excluded Files Color: #3c4150

Green Color: #98c379

Yellow Color: #e5c17c

Blue Color: #61aeef

Red Color: #e06c75

Purple Color: #c679dd

Orange Color: #d19a66

Cyan Color: #57b6c2

Gray Color: #59626f

White/Black Color: #abb2bf

Error Color: #e06c75

Comments Color: #59626F

Variables Color: #D19A66

Links Color: #56B6C2

Functions Color: #61AEEF

Keywords Color: #C679DD

Tags Color: #e06c75

Strings Color: #98C379

Operators Color: #61AFEF

Attributes Color: #E5C17C

Numbers Color: #D19A66

Parameters Color: #ABB2BF

Selection Background: #FFFFFF

Selection Foreground: #232324

Second Background: #EAEAEB

Accent Color: #2979ff

Excluded Files Color: #CACACB

Green Color: #50a14e

Yellow Color: #c18401

Blue Color: #4078f2

Red Color: #e4564a

Purple Color: #a626a4

Orange Color: #986801

Cyan Color: #0184bc

Gray Color: #a0a1a7

White/Black Color: #232324

Error Color: #e4564a

Comments Color: #A0A1A7

Variables Color: #986801

Links Color: #0184BC

Functions Color: #4078F2

Keywords Color: #A626A4

Tags Color: #E4564A

Strings Color: #50A14E

Operators Color: #4078F2

Attributes Color: #C18401

Numbers Color: #986801

Parameters Color: #383A42

Selection Background: #2E4C52

Selection Foreground: #FFFFFF

Second Background: #003745

Accent Color: #d33682

Excluded Files Color: #083F4D

Green Color: #859900

Yellow Color: #b58900

Blue Color: #268bd2

Red Color: #d13684

Purple Color: #6c71c4

Orange Color: #cb4b16

Cyan Color: #2aa198

Gray Color: #657B83

White/Black Color: #93A1A1

Error Color: #dc322f

Comments Color: #657B83

Variables Color: #268BD2

Links Color: #268BD2

Functions Color: #B58900

Keywords Color: #859900

Tags Color: #268BD2

Strings Color: #2AA198

Operators Color: #93A1A1

Attributes Color: #B58900

Numbers Color: #D33682

Parameters Color: #93A1A1

Selection Background: #e8dcb6

Selection Foreground: #002b36

Second Background: #F6F0DE

Accent Color: #d33682

Excluded Files Color: #E3DCC9

Green Color: #859900

Yellow Color: #b58900

Blue Color: #268bd2

Red Color: #d13684

Purple Color: #6c71c4

Orange Color: #cb4b16

Cyan Color: #2aa198

Gray Color: #93A1A1

White/Black Color: #657b83

Error Color: #dc322f

Comments Color: #93A1A1

Variables Color: #268BD2

Links Color: #268BD2

Functions Color: #B58900

Keywords Color: #859900

Tags Color: #268BD2

Strings Color: #2AA198

Operators Color: #657B83

Attributes Color: #657B83

Numbers Color: #D33682

Parameters Color: #657B83

Selection Background: #5f7e9790

Selection Foreground: #FFFFFF

Second Background: #0b2942

Accent Color: #7e57c2

Excluded Files Color: #0e293f

Green Color: #addb67

Yellow Color: #ecc48d

Blue Color: #82aaff

Red Color: #ff6363

Purple Color: #c792ea

Orange Color: #f78c6c

Cyan Color: #7fdbca

Gray Color: #637777

White/Black Color: #d6deeb

Error Color: #ef5350

Comments Color: #637777

Variables Color: #addb67

Links Color: #ecc48d

Functions Color: #82aaff

Keywords Color: #c792ea

Tags Color: #7fdbca

Strings Color: #ecc48d

Operators Color: #c792ea

Attributes Color: #addb67

Numbers Color: #f78c6c

Parameters Color: #d6deeb

Selection Background: #d3e8f8

Selection Foreground: #403f53

Second Background: #FBFBFB

Accent Color: #2AA298

Excluded Files Color: #E0E7EA

Green Color: #56b6c2

Yellow Color: #e0af02

Blue Color: #4876d6

Red Color: #aa0982

Purple Color: #994cc3

Orange Color: #c96765

Cyan Color: #0c969b

Gray Color: #989fb1

White/Black Color: #111111

Error Color: #de3d3b

Comments Color: #989fb1

Variables Color: #4876d6

Links Color: #ff869a

Functions Color: #4876d6

Keywords Color: #994cc3

Tags Color: #994cc3

Strings Color: #c96765

Operators Color: #994cc3

Attributes Color: #0c969b

Numbers Color: #aa0982

Parameters Color: #0c969b

Selection Background: #444a73

Selection Foreground: #FFFFFF

Second Background: #2f334d

Accent Color: #74a0f1

Excluded Files Color: #2f334d

Green Color: #7af8ca

Yellow Color: #ffdb8e

Blue Color: #70b0ff

Red Color: #f3c1ff

Purple Color: #baacff

Orange Color: #ff9668

Cyan Color: #34d3fb

Gray Color: #7e8eda

White/Black Color: #c8d3f5

Error Color: #ff5370

Comments Color: #7e8eda

Variables Color: #c8d3f5

Links Color: #34d3fb

Functions Color: #70b0ff

Keywords Color: #baacff

Tags Color: #ff757f

Strings Color: #7af8ca

Operators Color: #baacff

Attributes Color: #ffbd76

Numbers Color: #ff9668

Parameters Color: #f3c1ff

Support Us

Thank you for using our plugins! If you liked the plugins, you can support us on Paypal or OpenCollective.

Join the Discussion

We have a Slack chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

Источник