The best list of material design color palettes, tools, and resources

How to change border color in Google Sheets

You may also find certain situations where you want to change the color of borders in Google Sheets.

Most likely you will want to do this to simply change the shade of grey/black of borders, but in this example I have used the color red to make the lines stand out.

To change border color in Google Sheets, you must first select the cell or range of cells that you want to modify, then open the «Borders» menu in the toolbar, then open the «Border color» menu, and then you must apply the type of border that you want to see. If you do not apply / re-apply borders, changing the line color will not take effect.

In this example we are going to color the borders of the cells in the range A2:D9 red. (I have also made the lines thicker here to make the color stand out more in the image)

To do this, select the range A2:D9, open the «Borders» menu, and then open the «Border color» menu, and then select the color red.

Что такое Material Design

К 2014 году проблему удалось решить. Именно тогда на конференции I/O Google представили свою новую дизайн-систему Material Design. Компания не просто представила гайдлайн по визуальному стилю, но и заявила о себе как о единой цифровой среде.

Что касается визуального стиля, Material Design примирил скевоморфизм с флэтом. Он не вернулся к реализму, но добавил в плоский дизайн его опыт взаимодействия с реальным миром — за счет знакомых тактильных характеристик и глубины.

Скевоморфизм — стиль в веб-дизайне, максимально подражающий объектам реального мира.

Флэт — упрощенный, минималистичный стиль с акцентом на функциональность, а не визуал.

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

В основе Material Design лежат четыре принципа:

1. Тактильные поверхности

Все элементы интерфейса — это слои цифровой бумаги. Они располагаются на разной высоте и отбрасывают тени. Это помогает пользователям отличить главные элементы от второстепенных и делает интерфейс интуитивно понятным.

2. Полиграфический дизайн

Логично, что на цифровой бумаге нужно писать цифровыми чернилами. Все, что изображено и написано на слоях-элементах, подчиняется законам печатного дизайна

Так можно акцентировать внимание пользователя на нужном элементе и обозначить иерархию интерфейса

3. Осознанная анимация

Все элементы, которые есть на экране, не могут просто так появляться и исчезать, — ведь в реальной жизни так не бывает. Объекты плавно переходят один в другой и подсказывают пользователю, как работает интерфейс.

4. Адаптивный дизайн

Все вышеперечисленное должно работать на любых устройствах.

Четыре основных принципа Material Design наглядно. Источник

Как видите, анимация — одна из основ Material Design. И хотя некоторые ее критикуют, поклонников все же больше. И вот почему.

Alternate column OR row color with conditional formatting in Google Sheets

Another way to use alternating colors is the use conditional formatting. With this method you will be able to alternate row colors, or if needed you will also be able to alternate column colors.

To apply alternating colors with conditional formatting, use any of the 4 formulas below, in the «Format cells if…» options, under the «Custom formula is» drop-down selection:

• =ISEVEN(ROW())
• =ISODD(ROW())
• =ISEVEN(COLUMN())
• =ISODD(COLUMN())

Conditional formatting is an amazingly useful tool that allows you to format cells based on their contents, and the following is just one of the many ways that you can use conditional formatting in Google Sheets.

Like in the last example, here you can either select the range to color first, or you can type it into the «Apply to range» field in the conditional formatting menu.

To open the conditional formatting menu do either of the following:

• Click the «Format» menu, and the click «Conditional formatting…» or…
• Open the «Fill color» menu, and click «Conditional formatting…»

Then select «Custom formula is» from the drop-down menu under the «Format cells if…» options.

Then use one of the formulas described below, depending on your preference/situation.

The formula below will color even rows:

=ISEVEN(ROW())

The formula below will color odd rows:

=ISODD(ROW())

The formula below will color even columns (B, D, F, etc…):

=ISEVEN(COLUMN())

The formula below will color odd columns (A, C, E, etc…):

=ISODD(COLUMN())

If you want you can choose your own color from the formatting style options, and you can select other formatting options to apply to the cells/rows/columns that your conditional formatting rules apply to.

The example below uses the formula =ISEVEN(ROW()) to color even rows. The range that the rule / color is applied to is A1:K1000

This example uses the formula =ISEVEN(COLUMN()) to color even columns. The range that the rule / color is applied to is A1:K1000

To remove this type of alternating color that is applied with conditional formatting, you can do either of the following:

• Open the conditional formatting menu and click «Remove rule» (Trash can symbol) to remove the conditional formatting or…
• Select a range, then click «Format, then click «Clear formatting». But note that this method will remove ALL formatting

Text Fields

Material Text Fields include two main variants. As a result of porting the pre-existing AppCompat and classes, there are in fact two base styles: and . The variants have a style suffix and include filled box (default, ) and outlined box (). All text field variants use the standard text appearance for input and the theme attribute for “helper” text (labels, errors, counters, etc.).

The key attributes for customizing the styles are as follows:

• : The mode of the box background, which can be either , or .
• : The color of the text field background. The default enabled color is for filled box text fields and transparent for outlined box text fields.
• : The color of the stroke around the text field background. The default color is (in default state) for outlined box text fields and is ignored for filled box text fields.
• //: Various colors for different “helper” text sub-components.
• : The shape appearance of the text field background. The default value is .

The base text field style (used by the widget class) can be customized and applied globally like so:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">    ...    <item name="textInputStyle">@style/AppTextField</item></style><style name="AppTextField" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"><item name="boxBackgroundColor">@color/text_field_background</item></style>

Note: is a that uses and the same alpha values as the default .

The result can be observed in our playground screen:

Customized Text Field widget styles

Shape

Shape attributes refer to the general form of each surface and widget in your app. When you consider that these components can be of varying width/height and be raised/unelevated/outlined, this reduces down to one aspect of customization… Corners.

Material Components corners can either be part of the rounded (default) or cut and have a to customize the size. A treatment can be applied to all corners or a subset. The shape theme attributes reference styles:

• : For small components, such as Buttons and Chips
• : For medium components, such as Cards
• : For large components, such as Bottom Sheets

The Material Components widgets will use these styles as per the Material guidelines.

If you wish to customize the Material Components shape appearance styles, you would do so like this:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">    ...    <item name="shapeAppearanceSmallComponent">@style/AppShapeAppearance.SmallComponent</item>    <item name="shapeAppearanceMediumComponent">@style/AppShapeAppearance.MediumComponent</item></style><style name="AppShapeAppearance.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">    <item name="cornerFamily">cut</item>    <item name="cornerSize">8dp</item></style><style name="AppShapeAppearance.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">    <item name="cornerFamily">cut</item>    <item name="cornerSize">8dp</item></style>

The result can be observed in our playground screen:

Playground screen with global shape attributes customized

Widget styles and attributes

While global theming covers the majority of our needs, there are times when we may wish to customize the attributes of individual widgets. We will explore the styles (and relevant attributes) of common widgets and how these can be referenced in your Material Components theme.

Material Themes

• Oceanic

  Background: #263238

  Foreground: #B0BEC5

  Text: #607D8B

  Selection Background: #546E7A

  Selection Foreground: #FFFFFF

  Buttons: #2E3C43

  Second Background: #32424A

  Disabled: #415967

  Contrast: #1E272C

  Active: #314549

  Border: #2A373E

  Highlight: #425B67

  Tree: #546E7A70

  Notifications: #1E272C

  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:

  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

• Darker

  Background: #212121

  Foreground: #B0BEC5

  Text: #727272

  Selection Background: #404040

  Selection Foreground: #FFFFFF

  Buttons: #2A2A2A

  Second Background: #292929

  Disabled: #474747

  Contrast: #1A1A1A

  Active: #323232

  Border: #292929

  Highlight: #3F3F3F

  Tree: #323232C0

  Notifications: #1A1A1A

  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:

  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

• Lighter

  Background: #FAFAFA

  Foreground: #546E7A

  Text: #94A7B0

  Selection Background: #80CBC440

  Selection Foreground: #546e7a

  Buttons: #F3F4F5

  Second Background: #FFFFFF

  Disabled: #D2D4D5

  Contrast: #EEEEEE

  Active: #E7E7E8

  Border: #d3e1e8

  Highlight: #E7E7E8

  Tree: #80CBC440

  Notifications: #eae8e8

  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:

  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

• Palenight

  Background: #292D3E

  Foreground: #A6ACCD

  Text: #676E95

  Selection Background: #717CB470

  Selection Foreground: #FFFFFF

  Buttons: #303348

  Second Background: #34324a

  Disabled: #515772

  Contrast: #202331

  Active: #414863

  Border: #2b2a3e

  Highlight: #444267

  Tree: #676E95

  Notifications: #202331

  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:

  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

• Deep ocean

  Background: #0F111A

  Foreground: #8F93A2

  Text: #4B526D

  Selection Background: #717CB480

  Selection Foreground: #FFFFFF

  Buttons: #191A21

  Second Background: #181A1F

  Disabled: #464B5D

  Contrast: #090B10

  Active: #1A1C25

  Border: #0F111A

  Highlight: #1F2233

  Tree: #717CB430

  Notifications: #090B10

  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:

  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

Palette colors

A color intention is a mapping of a palette color to a given intention within your application.
The theme exposes the following palette colors (accessible under ):

• primary — used to represent primary interface elements for a user. It’s the color displayed most frequently across your app’s screens and components.
• secondary — used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
• error — used to represent interface elements that the user should be made aware of.
• warning — used to represent potentially dangerous actions or important messages.
• info — used to present information to the user that is neutral and not necessarily important.
• success — used to indicate the successful completion of an action that user triggered.

If you want to learn more about color, you can check out the color section.

Customization¶

Custom colors

Source · Difficulty: easy

Material for MkDocs implements colors using CSS variables (custom properties). If you want to customize the colors beyond the palette (e.g. to use your brand-specific colors), you can add an and tweak the values of the CSS variables.

Let’s say you’re YouTube, and want to set the primary color to your brand’s palette. Just add:

See the file containing the color definitions for a list of all CSS variables.

Custom color schemes

Source · Difficulty: easy

Besides overriding specific colors, you can create your own, named color scheme by wrapping the definitions in the , which you can then set via as described in the section:

Additionally, the color scheme defines all of it’s colors via color functions and deduces its colors from the CSS variable. You can tune the theme with:

How to remove color from cells in Google Sheets

Removing color from cells, is in most cases almost exactly the same process as adding color.

To remove color from cells in Google Sheets, select the cells/rows/columns that you want to remove color from, open the «Fill color» menu, and then click «Reset». You can also simply click the color white if you prefer.

Another way to remove color from cells, including any color that is applied through conditional formatting or alternating colors, is to clear the formatting of selected cells by doing the following:

• Select the cells that you want to clear color/formatting from
• Click the «Format» menu in the toolbar
• Click «Clear formatting»

(Using «Clear formatting» will clear ALL/ANY formatting from the cells)

Now you know lots of different ways to color your spreadsheets, so that you can make your finished work visually appealing and very easy to read!

Немного истории

Сегодня мы привыкли к тому, что интерфейсы Google выглядят и работают примерно одинаково. Но так было не всегда. Еще десять лет назад приложения для Android, десктопная почта и мобильный веб были похожи друг на друга не больше, чем крот на пианино.

В 2011 году в Google решили, что с этим пора что-то делать, и действительно что-то сделали. А именно — унифицировали свои продукты, создали единый стиль для приложений Android Holo. Только вот они снова оказались разными.

В результате пользователи все так же терялись при переключении между мобильным и десктопным интерфейсами: выглядели они по-разному, управлялись тоже — проблема оставалась.

Gmail.com (Kennedy)

Gmail for Android (Holo)

Configuration¶

Color palette

Color scheme

Source · Default:

Material for MkDocs supports two color schemes: a light mode, which is just called , and a dark mode, which is called . The color scheme can be set via :

Click on a tile to change the color scheme:

Primary color

Source · Default:

The primary color is used for the header, the sidebar, text links and several other components. In order to change the primary color, set the following value in to a valid color name:

Click on a tile to change the primary color:

Accent color

Source · Default:

The accent color is used to denote elements that can be interacted with, e.g. hovered links, buttons and scrollbars. It can be changed in by choosing a valid color name:

Click on a tile to change the accent color:

Color palette toggle

Source · Default: none

It’s also possible to offer a list of color palettes to the user, each of which can include a , and color each. The user can toggle between those color palettes:

The following fields must be set for each toggle:

Default: none · Required – This field must point to a valid icon path referencing any icon bundled with the theme, or the build will not succeed. Some popular combinations:

• + – +
• + – +
• + – +
• + – +

Default: none · Required – This field is used as the toggle’s attribute and should be set to a discernable name to improve accessibility.

System preference

Source · Default: none

In order to automatically set the color palette to the user’s system preference, a media query can be set as part of the field next to the toggle definition in :

When the user first visits your site, the media queries are evaluated in the order of their definition. The first media query that matches selects the default color palette.

Accessibility – not all color combinations work well

With 2 (color schemes) x 21 (primary colors) x 17 (accent color) = 714 combinations, it’s impossible to ensure that all configurations provide a good user experience (e.g. yellow on light background). Make sure that the color combination of your choosing provides enough contrast and tweak CSS variables where necessary.

Material Design Color Tools

1. Material.io

Features: Complete Color Scheme

Material.io is Google’s official material design color matching tool. The users need only select their favorite color in the palette and it will immediately display on the App interface. Use the color scheme palette, found in the lower right, to apply the current primary color, secondary color, and the color number of the text color.

Tips:

(1) In Material Design, the main color is the color that most often appears in your application. A secondary color is a color used to emphasize the key parts of your UI.

(2) The secondary colors are best used for:

• Button, floating operation button, and button text
• Text field, cursor and text selection
• Progress bar
• Select controls, buttons, and sliders
• Links
• Title

2. Material Colors

Features:

• Color Preview
• Support download
• Share online

Material Colors is not only a palette but also an icon tool and a color tool. The main feature of Material Colors is that it allows the user to select the color and preview the color effect in real time. It’s simple and easy to operate. You only need to select 1 or 2 colors, and the system will match a set of APP UI color schemes. It is worth mentioning that this site provides online sharing and downloads in a variety of formats.

3. Material UI

Features:

• Color code can be directly copied and pasted
• Supports multiple color format switching

This tool is primarily for developers and designers who want to quickly design a color code that meets Material Design standards. The user can click on the color box and it will automatically copy the corresponding color code to the clipboard. This site is also known as the color «cheat sheet,» which brings all available colors together on one page for the user to choose from.

4. Material Design Palette Generator

Features: Custom Swatches

If you are interested in custom swatches, try the Material Design Palette Generator. To set a color manually, either type in a color code or select a color from the color palette in the color dialog box that can be opened by clicking on a color box in the open palette. The Material Design Panel Builder will generate your swatches based on the color you choose.

5. Color — Materialize

Features: Supports color shading adjustment

This is a color palette based on the material design base color. Each color is defined with a basic color class and an optional brightening or darkening class.

Color

Color attributes consist mainly of primary, secondary, error, surface and background colors, along with their respective secondary variants and “on” colors. Some of these have been reused from the AppCompat themes (eg. , and ):

• : The primary brand color of your app, used most predominantly in theming
• : A lighter/darker variant of your primary brand color, used sparingly in theming
• : The color used for elements displayed on top of your primary colors (eg. Text and icons, often white or semi-transparent black depending on accessibility)
• : The secondary brand color of your app, used mostly as an accent for certain widgets that need to stand out
• : A lighter/darker variant of your secondary brand color, used sparingly in theming
• : The color used for elements displayed on top of your secondary colors
• : The color used for errors (often a shade of red)
• : The color used for elements displayed on top of your error color
• : The color used for surfaces (i.e. Material “sheets”)
• : The color used for elements displayed on top of your surface color
• : The color behind all other screen content
• : The color used for elements displayed on top of your background color

These colors can be added to your app theme like so:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">    <item name="colorPrimary">#212121</item>    <item name="colorPrimaryVariant">#000000</item>    <item name="colorOnPrimary">#FFFFFF</item>    <item name="colorSecondary">#2962FF</item>    <item name="colorSecondaryVariant">#0039CB</item>    <item name="colorOnSecondary">#FFFFFF</item>    <item name="colorError">#F44336</item>    <item name="colorOnError">#FFFFFF</item>    <item name="colorSurface">#FFFFFF</item>    <item name="colorOnSurface">#212121</item>    <item name="android:colorBackground">@color/background</item>    <item name="colorOnBackground">#212121</item></style><color name="background">#FAFAFA</color>

Note 1: Hex color codes are not currently supported for , hence why a color resource was used.

Note 2: Use and attributes to theme system bars.

The result can be observed in our playground screen:

Playground screen with global color attributes customized

A great way to quickly preview the appearance of primary/secondary colors is to use the Material Color Tool.

Использование цветов в UI

Выберите палитру

Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста. 

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%

Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%

Темный текст (#000000)	Непрозрачность
Основной текст	87%
Вспомогательный текст	54%
Подсказки (текстовые поля, метки)	26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF)	Непрозрачность
Основной текст	100%
Вспомогательный текст	70%
Подсказки (текстовые поля, метки)	30%

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими , в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

В плавающей кнопке действия используется акцентный цвет.

Переключатель, использующий акцентный цвет.

Правильно.

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Неправильно.

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

Неправильно.

Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

How to sum values by color

Say, I’m keeping track of classroom equipment orders. I denote the ordered things by yellow background color, items on the way by blue, and delivered equipment by green:
My task is to see how many desks, computers, and other supplies are on the way at the moment. Color is the only difference these numbers have in my table. So I open the tool to sum by color and use the following settings:

1. I select the entire range with my data to check it.
2. I pick C2 as a pattern cell to specify the format of items I want to calculate.
3. Select the SUM function to add up the numbers from the green cells.
4. Pick cells to place the resulting calculations for each item.
5. To see the number of shipped items for every product, apply the function to each row.

Click Insert function to get the formula after each line in your table.
The convenience of getting the formula is that you can modify any of its parts and paste it wherever you need in your Google spreadsheets.