Material Design

Color scheme

The Material Design color system can be used to create a color theme that reflects your brand or style. A color scheme represents your theme’s specific color values, such as its primary color and the surface colors of views.

Design & API documentation

Table of contents


Overview

An implementation of the Material Design color scheme is provided in the MDCSemanticColorScheme class. By default, an instance of this class is configured with the Material defaults. While it is possible to use these defaults out of the box, you are highly encouraged to set — at a minimum — the primary and secondary color values. The following image shows an MDCButton themed with the default color scheme values (top) and an MDCButton themed with custom color scheme values (bottom).

An MDCButton themed with the default color scheme and a custom one.

Most components support being themed with a color scheme using a color themer extension. You can learn more about which extensions are available for a given component by reading the component documentation.

Semantic color values

A color scheme consists of the following semantic color values:

Color name Use
primaryColor The color displayed most frequently across your app’s screens and components.
primaryColorVariant A light or dark variation of the primary color.
secondaryColor Provides ways to accent and distinguish your product. Floating action buttons use the secondary color.
errorColor The indication of errors within components such as text fields.
surfaceColor Typically maps to the background of components such as cards, sheets, and dialogs.
backgroundColor Typically found behind scrollable content.

Each of these colors are paired with a corresponding “on-color”. An on color defines the color for text and iconography drawn on top of the associated color. Take care when picking on colors that they meet the accessibility guidelines for text and contrasting color.

On color name Use
onPrimaryColor Text/iconography drawn on top of primaryColor.
onSecondaryColor Text/iconography drawn on top of secondaryColor.
onErrorColor Text/iconography drawn on top of errorColor.
onSurfaceColor Text/iconography drawn on top of surfaceColor.
onBackgroundColor Text/iconography drawn on top of backgroundColor.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/schemes/ColorScheme'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialColorScheme

Objective-C

#import "MaterialColorScheme.h"

Usage

Typical use: customizing a color scheme

You’ll typically want to create one default MDCSemanticColorScheme instance for your app where all of the color properties are set to your desired brand or style.

Swift

let colorScheme = MDCSemanticColorScheme()
colorScheme.primaryColor = UIColor(red: CGFloat(0x21) / 255.0,
                                   green: CGFloat(0x21) / 255.0,
                                   blue: CGFloat(0x21) / 255.0,
                                   alpha: 1)
colorScheme.primaryColorVariant = UIColor(red: CGFloat(0x44) / 255.0,
                                   green: CGFloat(0x44) / 255.0,
                                   blue: CGFloat(0x44) / 255.0,
                                   alpha: 1)

// In this case we don't intend to use a secondary color, so we make it match our primary color
colorScheme.secondaryColor = colorScheme.primaryColor

Objective-C

// A helper method for creating colors from hex values.
static UIColor *ColorFromRGB(uint32_t colorValue) {
  return [[UIColor alloc] initWithRed:(CGFloat)(((colorValue >> 16) & 0xFF) / 255.0)
                                green:(CGFloat)(((colorValue >> 8) & 0xFF) / 255.0)
                                 blue:(CGFloat)((colorValue & 0xFF) / 255.0) alpha:1];
}

MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] init];
colorScheme.primaryColor = ColorFromRGB(0x212121);
colorScheme.primaryColorVariant = ColorFromRGB(0x444444);

// In this case we don't intend to use a secondary color, so we make it match our primary color
colorScheme.secondaryColor = colorScheme.primaryColor;