egoist
5/21/2016 - 10:26 AM
colors.html
<!DOCTYPE html>
<html class="qp-ui" data-qp-ui="{
'Futurizr': {
'hasTouch': 'touch'
}
}">
<head>
<meta charset="utf-8">
<link href="/design/spec/static/css/main.css" rel="stylesheet" />
<link href="/design/spec/static/css/print.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="shortcut icon" href="/design/spec/static/images/favicon.ico?v1">
<meta name="viewport" content="initial-scale=1, width=device-width"/>
<meta name="keywords" content=""/>
<title>Color - Style - Google design guidelines</title>
<meta itemprop="name" content="Color - Style - Google design guidelines"/>
<meta itemprop="image" content="https://material-design.storage.googleapis.com/publish/material_v_4/social.png"/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Color - Style - Google design guidelines" />
<meta property="og:image" content="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" />
<meta property="og:site_name" content="Google design guidelines" />
<meta property="article:section" content="Color - Style" />
<!--
<PageMap>
<DataObject type="document">
<Attribute name="uid"></Attribute>
<Attribute name="title">Color</Attribute>
<Attribute name="keywords"></Attribute>
<Attribute name="slug"></Attribute>
<Attribute name="description"></Attribute>
<Attribute name="section_title">Style</Attribute>
<Attribute name="section_slug">style</Attribute>
</DataObject>
<DataObject type="thumbnail">
<Attribute name="src" value="" />
</DataObject>
</PageMap>
-->
</head>
<body class="site-material_ext_publish section-style first-chapter color-teal qp-ui" data-qp-ui="{ 'Mask': {} }">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NHRPF8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NHRPF8');</script>
<!-- End Google Tag Manager -->
<header class="qp-ui" data-qp-ui="{
'Peekaboo': {
'mobile': 72,
'desktop-sm': 72,
'default': 192
}
}">
<div class="header-wrapper qp-ui" data-qp-ui="{
'Peekaboo': {
'mobile': 28,
'desktop-sm': 28,
'default': 82
}
}">
<div class="header-title"> <span class="section-title">Style</span>
<span class="chapter-title"><span class="title-separator">–</span> Color</span>
</div>
</div>
</header>
<nav>
<button class="hamburger-button qp-ui" data-qp-ui="{ 'SideNavToggle': {} }" role="tab"><i class="material-icons material-spec-icon" title="Show navigation">menu</i></button>
</nav>
<form id="search-form" action="/design/spec/search.html" method="GET">
<div class="search-widget qp-ui" data-qp-ui="{ 'SearchInput': {} }">
<button class="search-button"><i class="material-icons">search</i></button>
<button class="search-close-button"><i class="material-icons">close</i></button>
<input name="q" type="text" id="search-input" autocomplete="off">
<label for="search-input">Search</label>
</div>
</form>
<div id="side-nav" class="qp-ui" data-qp-ui="{ 'SideNavDrawer': {} }">
<div class="side-nav-wrapper">
<span id="logo"><img src="/design/spec/static/images/nav_google_logo.svg" alt="Logo"/></span>
<nav>
<dl>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Material design
</dt>
<dd>
<a class="" href="/design/spec/material-design/introduction.html">Introduction
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">What is material?
</dt>
<dd>
<a class="" href="/design/spec/what-is-material/environment.html">Environment
</a>
<a class="" href="/design/spec/what-is-material/material-properties.html">Material properties
</a>
<a class="" href="/design/spec/what-is-material/elevation-shadows.html">Elevation and shadows
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Motion
</dt>
<dd>
<a class="" href="/design/spec/motion/material-motion.html">Material motion
</a>
<a class="" href="/design/spec/motion/duration-easing.html">Duration and easing
</a>
<a class="" href="/design/spec/motion/movement.html">Movement
</a>
<a class="" href="/design/spec/motion/transforming-material.html">Transforming material
</a>
<a class="" href="/design/spec/motion/choreography.html">Choreography
</a>
<a class="" href="/design/spec/motion/creative-customization.html">Creative customization
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': true }">Style
</dt>
<dd>
<a class="nav_selected" href="/design/spec/style/color.html">Color
</a>
<a class="" href="/design/spec/style/icons.html">Icons
</a>
<a class="" href="/design/spec/style/imagery.html">Imagery
</a>
<a class="" href="/design/spec/style/typography.html">Typography
</a>
<a class="" href="/design/spec/style/writing.html">Writing
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Layout
</dt>
<dd>
<a class="" href="/design/spec/layout/principles.html">Principles
</a>
<a class="" href="/design/spec/layout/units-measurements.html">Units and measurements
</a>
<a class="" href="/design/spec/layout/metrics-keylines.html">Metrics & keylines
</a>
<a class="" href="/design/spec/layout/structure.html">Structure
</a>
<a class="" href="/design/spec/layout/responsive-ui.html">Responsive UI
</a>
<a class="" href="/design/spec/layout/split-screen.html">Split screen
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Components
</dt>
<dd>
<a class="" href="/design/spec/components/bottom-navigation.html">Bottom navigation
</a>
<a class="" href="/design/spec/components/bottom-sheets.html">Bottom sheets
</a>
<a class="" href="/design/spec/components/buttons.html">Buttons
</a>
<a class="" href="/design/spec/components/buttons-floating-action-button.html">Buttons: Floating Action Button
</a>
<a class="" href="/design/spec/components/cards.html">Cards
</a>
<a class="" href="/design/spec/components/chips.html">Chips
</a>
<a class="" href="/design/spec/components/data-tables.html">Data tables
</a>
<a class="" href="/design/spec/components/dialogs.html">Dialogs
</a>
<a class="" href="/design/spec/components/dividers.html">Dividers
</a>
<a class="" href="/design/spec/components/expansion-panels.html">Expansion panels
</a>
<a class="" href="/design/spec/components/grid-lists.html">Grid lists
</a>
<a class="" href="/design/spec/components/lists.html">Lists
</a>
<a class="" href="/design/spec/components/lists-controls.html">Lists: Controls
</a>
<a class="" href="/design/spec/components/menus.html">Menus
</a>
<a class="" href="/design/spec/components/pickers.html">Pickers
</a>
<a class="" href="/design/spec/components/progress-activity.html">Progress & activity
</a>
<a class="" href="/design/spec/components/selection-controls.html">Selection controls
</a>
<a class="" href="/design/spec/components/sliders.html">Sliders
</a>
<a class="" href="/design/spec/components/snackbars-toasts.html">Snackbars & toasts
</a>
<a class="" href="/design/spec/components/steppers.html">Steppers
</a>
<a class="" href="/design/spec/components/subheaders.html">Subheaders
</a>
<a class="" href="/design/spec/components/tabs.html">Tabs
</a>
<a class="" href="/design/spec/components/text-fields.html">Text fields
</a>
<a class="" href="/design/spec/components/toolbars.html">Toolbars
</a>
<a class="" href="/design/spec/components/tooltips.html">Tooltips
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Patterns
</dt>
<dd>
<a class="" href="/design/spec/patterns/data-formats.html">Data formats
</a>
<a class="" href="/design/spec/patterns/empty-states.html">Empty states
</a>
<a class="" href="/design/spec/patterns/errors.html">Errors
</a>
<a class="" href="/design/spec/patterns/fingerprint.html">Fingerprint
</a>
<a class="" href="/design/spec/patterns/gestures.html">Gestures
</a>
<a class="" href="/design/spec/patterns/launch-screens.html">Launch screens
</a>
<a class="" href="/design/spec/patterns/loading-images.html">Loading images
</a>
<a class="" href="/design/spec/patterns/navigation.html">Navigation
</a>
<a class="" href="/design/spec/patterns/navigation-drawer.html">Navigation drawer
</a>
<a class="" href="/design/spec/patterns/navigational-transitions.html">Navigational transitions
</a>
<a class="" href="/design/spec/patterns/notifications.html">Notifications
</a>
<a class="" href="/design/spec/patterns/permissions.html">Permissions
</a>
<a class="" href="/design/spec/patterns/scrolling-techniques.html">Scrolling techniques
</a>
<a class="" href="/design/spec/patterns/search.html">Search
</a>
<a class="" href="/design/spec/patterns/selection.html">Selection
</a>
<a class="" href="/design/spec/patterns/settings.html">Settings
</a>
<a class="" href="/design/spec/patterns/swipe-to-refresh.html">Swipe to refresh
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Growth & communications
</dt>
<dd>
<a class="" href="/design/spec/growth-communications/introduction.html">Introduction
</a>
<a class="" href="/design/spec/growth-communications/onboarding.html">Onboarding
</a>
<a class="" href="/design/spec/growth-communications/feature-discovery.html">Feature discovery
</a>
<a class="" href="/design/spec/growth-communications/gesture-education.html">Gesture education
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Usability
</dt>
<dd>
<a class="" href="/design/spec/usability/accessibility.html">Accessibility
</a>
<a class="" href="/design/spec/usability/bidirectionality.html">Bidirectionality
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">Resources
</dt>
<dd>
<a class="" href="/design/spec/resources/color-palettes.html">Color palettes
</a>
<a class="" href="/design/spec/resources/devices.html">Devices
</a>
<a class="" href="/design/spec/resources/layout-templates.html">Layout templates
</a>
<a class="" href="/design/spec/resources/roboto-noto-fonts.html">Roboto & Noto fonts
</a>
<a class="" href="/design/spec/resources/sticker-sheets-icons.html">Sticker sheets & icons
</a>
</dd>
<dt class="qp-ui" data-qp-ui="{ 'SideNavZippy': false }">What's new
</dt>
<dd>
<a class="" href="/design/spec/whats-new/whats-new.html">What's new
</a>
</dd>
</dl>
</nav>
<div class="legal">
<p class="copyright">Google ©</p>
<ul>
<li>
<a href="javascript:void(0);" onclick="try{userfeedback.api.startFeedback({'productId': '1027542', 'bucket': 'material_spec', 'locale': 'en', 'allowNonLoggedInFeedback': true});return false;}catch(e){}" class="qp-ui-side-nav-dismiss">Site feedback</a>
</li>
<li>
<a href="http://www.google.com/intl/en/policies/privacy/">Privacy</a>
</li>
<li>
<a href="http://www.google.com/intl/en/policies/terms/">Terms</a>
</li>
</ul>
</div>
</div>
</div>
<div id="grid-cont">
<section class="grid_outer chapter">
<h1 class="chapter-title">Color
</h1>
<div class="chapter-content">
<div class="chapter-intro">
<p>Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. </p>
<section class="moduleD1">
<div class="module-body">
<p>Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.</p><p><strong>Primary and accent colors </strong>can be customized to illustrate or develop your brand colors.</p><p><strong>Themes </strong>enable consistent app styling through surface shades, shadow depth, and ink opacity.</p><table class="c14"><tbody></tbody></table>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="module-body">
<div class="text-box">
<h3 class="c5" id="h.ep2vmjdzo6l6"><span>Color schemes</span></h3><p>Primary color<br/>Secondary color<br/>Accent color<br/>Text and background colors</p>
</div>
</div>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B7WCemMG6e0VczVMRE1YVlpCTHc/style_color.png" / />
</div>
</figure>
</div>
</div>
</section>
</div>
<nav class="chapter-toc">
<h1>Contents</h1>
<ul>
<li><a class="gweb-smoothscroll-control qp-ui" data-qp-ui="{ 'SmoothScroll': {} }" href="#color-color-palette">Color palette
</a></li>
<li><a class="gweb-smoothscroll-control qp-ui" data-qp-ui="{ 'SmoothScroll': {} }" href="#color-color-schemes">Color schemes
</a></li>
<li><a class="gweb-smoothscroll-control qp-ui" data-qp-ui="{ 'SmoothScroll': {} }" href="#color-text-background-colors">Text and background colors
</a></li>
<li><a class="gweb-smoothscroll-control qp-ui" data-qp-ui="{ 'SmoothScroll': {} }" href="#color-themes">Themes
</a></li>
</ul>
</nav>
<div class="article-list">
<div id="color-color-palette" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }">
<h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }">
Color palette
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10" aria-labelledby="title desc">
<title id="title">Expand and collapse content</title>
<desc id="desc">An arrow that points down when collapsed and points up when expanded.</desc>
<polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"/>
</svg>
</h2>
<div class="article-content">
<div class="module-list">
<div>
<section class="moduleB1">
<div class="module-body">
<p>This color 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.</p><p>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. </p>
</div>
</section>
</div>
<div>
<div class="modulettes">
<a download class="modulette download trackdl" href="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B0J8hsRkk91LSGx6b0w3WWpMQ1k/color_swatches.zip" title="Download color swatches">
<img class="icon download-icon" src="/design/spec/static/images/download_black.svg" alt="" />
<div class="info">
<div class="title">Download color swatches</div>
<span class="subtitle">0.02 MB (.zip)</span>
</div>
</a>
</div>
</div>
<div>
<div class="modulettes">
<a class="modulette default" href="https://design.google.com/videos/palette-perfect/" title="Palette perfect">
<img class="icon callout-icon" src="/design/spec/static/images/callout_default.svg" alt="" />
<div class="info">
<div class="title">Palette perfect</div>
<span class="subtitle">A color theory video tutorial</span>
</div>
</a>
</div>
</div>
<div>
<section class="module-html">
<link rel="stylesheet" type="text/css" href="/design/spec/static/sites/spec/css/color-palettes.css" />
<div class="color-palette">
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #f44336;">
<span class="name light-strong">Red</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#f44336</span>
</li>
<li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span></li>
<li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span></li>
<li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span></li>
<li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span></li>
<li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span></li>
<li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span></li>
<li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span></li>
<li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span></li>
<li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span></li>
<li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span></li>
<li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span></li>
<li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span></li>
<li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span></li>
<li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #E91E63;">
<span class="name light-strong">Pink</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#e91e63</span>
</li>
<li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span></li>
<li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span></li>
<li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span></li>
<li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span></li>
<li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span></li>
<li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span></li>
<li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span></li>
<li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span></li>
<li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span></li>
<li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span></li>
<li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span></li>
<li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span></li>
<li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span></li>
<li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9c27b0;">
<span class="name">Purple</span>
<span class="shade">500</span>
<span class="hex">#9c27b0</span>
</li>
<li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span></li>
<li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span></li>
<li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span></li>
<li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span></li>
<li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span></li>
<li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span></li>
<li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span></li>
<li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span></li>
<li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span></li>
<li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span></li>
<li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span></li>
<li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span></li>
<li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span></li>
<li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #673ab7;">
<span class="name">Deep Purple</span>
<span class="shade">500</span>
<span class="hex">#673ab7</span>
</li>
<li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span></li>
<li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span></li>
<li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span></li>
<li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span></li>
<li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span></li>
<li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span></li>
<li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span></li>
<li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span></li>
<li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span></li>
<li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span></li>
<li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span></li>
<li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span></li>
<li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span></li>
<li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #3f51b5;">
<span class="name">Indigo</span>
<span class="shade">500</span>
<span class="hex">#3f51b5</span>
</li>
<li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span></li>
<li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span></li>
<li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span></li>
<li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span></li>
<li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span></li>
<li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span></li>
<li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span></li>
<li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span></li>
<li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span></li>
<li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span></li>
<li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span></li>
<li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span></li>
<li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span></li>
<li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #2196F3;">
<span class="name light-strong">Blue</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#2196f3</span>
</li>
<li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span></li>
<li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span></li>
<li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span></li>
<li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span></li>
<li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span></li>
<li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span></li>
<li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span></li>
<li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span></li>
<li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span></li>
<li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span></li>
<li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span></li>
<li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span></li>
<li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span></li>
<li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #03a9f4;">
<span class="name dark">Light Blue</span>
<span class="shade dark">500</span>
<span class="hex dark">#03a9f4</span>
</li>
<li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span></li>
<li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span></li>
<li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span></li>
<li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span></li>
<li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span></li>
<li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span></li>
<li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span></li>
<li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span></li>
<li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span></li>
<li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span></li>
<li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span></li>
<li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span></li>
<li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span></li>
<li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #00bcd4;">
<span class="name dark">Cyan</span>
<span class="shade dark">500</span>
<span class="hex dark">#00bcd4</span>
</li>
<li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span></li>
<li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span></li>
<li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span></li>
<li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span></li>
<li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span></li>
<li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span></li>
<li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span></li>
<li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span></li>
<li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span></li>
<li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span></li>
<li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span></li>
<li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span></li>
<li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span></li>
<li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #009688;">
<span class="name light-strong">Teal</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#009688</span>
</li>
<li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span></li>
<li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span></li>
<li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span></li>
<li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span></li>
<li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span></li>
<li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span></li>
<li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span></li>
<li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span></li>
<li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span></li>
<li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span></li>
<li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span></li>
<li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span></li>
<li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span></li>
<li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #4caf50;">
<span class="name dark">Green</span>
<span class="shade dark">500</span>
<span class="hex dark">#4caf50</span>
</li>
<li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span></li>
<li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span></li>
<li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span></li>
<li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span></li>
<li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span></li>
<li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span></li>
<li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span></li>
<li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span></li>
<li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span></li>
<li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span></li>
<li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span></li>
<li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span></li>
<li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span></li>
<li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #8bc34a;">
<span class="name dark">Light Green</span>
<span class="shade dark">500</span>
<span class="hex dark">#8bc34a</span>
</li>
<li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span></li>
<li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span></li>
<li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span></li>
<li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span></li>
<li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span></li>
<li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span></li>
<li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span></li>
<li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span></li>
<li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span></li>
<li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span></li>
<li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span></li>
<li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span></li>
<li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span></li>
<li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #cddc39;">
<span class="name dark">Lime</span>
<span class="shade dark">500</span>
<span class="hex dark">#cddc39</span>
</li>
<li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span></li>
<li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span></li>
<li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span></li>
<li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span></li>
<li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span></li>
<li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span></li>
<li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span></li>
<li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span></li>
<li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span></li>
<li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span></li>
<li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span></li>
<li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span></li>
<li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span></li>
<li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffeb3b;">
<span class="name dark">Yellow</span>
<span class="shade dark">500</span>
<span class="hex dark">#ffeb3b</span>
</li>
<li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span></li>
<li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span></li>
<li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span></li>
<li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span></li>
<li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span></li>
<li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span></li>
<li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span></li>
<li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span></li>
<li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span></li>
<li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span></li>
<li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span></li>
<li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span></li>
<li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span></li>
<li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffc107;">
<span class="name dark">Amber</span>
<span class="shade dark">500</span>
<span class="hex dark">#ffc107</span>
</li>
<li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span></li>
<li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span></li>
<li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span></li>
<li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span></li>
<li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span></li>
<li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span></li>
<li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span></li>
<li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span></li>
<li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span></li>
<li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span></li>
<li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span></li>
<li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span></li>
<li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span></li>
<li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff9800;">
<span class="name dark-when-small">Orange</span>
<span class="shade dark-when-small">500</span>
<span class="hex dark-when-small">#ff9800</span>
</li>
<li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span></li>
<li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span></li>
<li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span></li>
<li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span></li>
<li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span></li>
<li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span></li>
<li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span></li>
<li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span></li>
<li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span></li>
<li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span></li>
<li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span></li>
<li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span></li>
<li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span></li>
<li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff5722;">
<span class="name light-strong">Deep Orange</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#ff5722</span>
</li>
<li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span></li>
<li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span></li>
<li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span></li>
<li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span></li>
<li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span></li>
<li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span></li>
<li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span></li>
<li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span></li>
<li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span></li>
<li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span></li>
<li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span></li>
<li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span></li>
<li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span></li>
<li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #795548;">
<span class="name">Brown</span>
<span class="shade">500</span>
<span class="hex">#795548</span>
</li>
<li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span></li>
<li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span></li>
<li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span></li>
<li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span></li>
<li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span></li>
<li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span></li>
<li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span></li>
<li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span></li>
<li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span></li>
<li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9e9e9e;">
<span class="name dark-when-small">Grey</span>
<span class="shade dark-when-small">500</span>
<span class="hex dark-when-small">#9e9e9e</span>
</li>
<li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span></li>
<li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span></li>
<li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span></li>
<li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span></li>
<li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span></li>
<li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span></li>
<li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span></li>
<li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span></li>
<li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span></li>
<li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #607d8b;">
<span class="name light-strong">Blue Grey</span>
<span class="shade light-strong">500</span>
<span class="hex light-strong">#607d8b</span>
</li>
<li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span></li>
<li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span></li>
<li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span></li>
<li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span></li>
<li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span></li>
<li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span></li>
<li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span></li>
<li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span></li>
<li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span></li>
<li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span></li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span></li>
<li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span></li>
</ul>
</section>
<div class="module-end"></div>
</div>
</section>
</div>
</div>
</div>
</div> <div id="color-color-schemes" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }">
<h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }">
Color schemes
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10" aria-labelledby="title desc">
<title id="title">Expand and collapse content</title>
<desc id="desc">An arrow that points down when collapsed and points up when expanded.</desc>
<polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"/>
</svg>
</h2>
<div class="article-content">
<div class="module-list">
<div>
<section class="moduleB1">
<h3>Choosing a color palette</h3>
<div class="module-body">
<p>Your app's color palette may be defined by using a custom palette suited to your brand, such as monochromatic, black and white, full color, or neutral. Alternatively, you may use the material design color palette. All color palettes should include sufficient contrast between different UI elements. </p>
</div>
</section>
</div>
<div>
<h4 class="related">
Related
</h4>
</div>
<div>
<div class="modulettes">
<a class="modulette android" href="http://developer.android.com/training/material/theme.html#ColorPalette" title="Customize the color palette">
<img class="icon callout-icon" src="/design/spec/static/images/callout_android.svg" alt="" />
<div class="info">
<div class="title">Customize the color palette</div>
<span class="subtitle">Define your app’s color palette.</span>
</div>
</a>
</div>
</div>
<div>
<section class="moduleD1">
<h3>Using the material design color palette</h3>
<div class="module-body">
<p>Apps that don’t have existing color schemes may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3eHpqenBOaGxjRTA/style_color_colorscheme_palette1.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>Example of a color palette using two purple hues from the primary palette and one accent green hue.</p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3VjVncGdNZ2RKUzQ/style_color_colorscheme_palette1_example.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>Example of UI color application</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Primary color</h3>
<div class="module-body">
<p>When using a primary color in your palette, this color should be the most widely used across all screens and components.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7Ym1sRkstSzYtZmM/style_color_uiapplication_palette1.png" / />
</div>
<figcaption>
<p>Example of a primary color palette with variations for when a darker or lighter version of the color is needed</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Secondary color</h3>
<div class="module-body">
<p>Palettes with a secondary color may use this color to indicate a related action or information. </p><p>The secondary color may be a darker or lighter variation of the primary color.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7MzRWOTNhVng2SkE/style_color_uiapplication_palette2.png" / />
</div>
<figcaption>
<p>Example of a secondary palette with variations for when a darker or lighter version of the color is needed</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Accent color</h3>
<div class="module-body">
<p>The accent should be used for the floating action button and interactive elements, such as:</p><ul><li>Text fields and cursors</li><li>Text selection</li><li>Progress bars</li><li>Selection controls, buttons, and sliders</li><li>Links</li></ul>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsZUZqS2Z3UnlmTW8/style_color_uiapplication_accent1.png" / />
</div>
<figcaption>
<p>Floating action button using the accent color</p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsSEJSUHlSSVljVG8/style_color_uiapplication_accent2.png" / />
</div>
<figcaption>
<p>Switch using the accent color</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
</div>
<div class="figure-group">
<div class="figure-row">
<figure class=" example do">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsZFdSejhCaTNKSEk/style_color_uiapplication_accent3.png" / />
</div>
<figcaption>
<div class="caption-title">Do.</div><p>Only use the accent color for body text to accent a web link.</p>
</figcaption>
</figure>
<figure class=" example dont">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsOUhGS3hZTzUyTEE/style_color_uiapplication_accent4.png" / />
</div>
<figcaption>
<div class="caption-title">Don't.</div><p>Don’t use the accent color for body text color.</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
</div>
<div class="figure-group">
<div class="figure-row">
<figure class=" example do">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsQXQyZ2s5am1Gek0/style_color_uiapplication_accent5.png" / />
</div>
<figcaption>
<div class="caption-title">Do.</div><p>Use the accent color for your primary action button and components like switches or sliders. </p>
</figcaption>
</figure>
<figure class=" example dont">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsQ2JXWEpvN1BPbHc/style_color_uiapplication_accent6.png" / />
</div>
<figcaption>
<div class="caption-title">Don't.</div><p>Don’t use the accent color for app bars or larger areas of color. Avoid using the same color for the floating action button and the background.</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3RV9VS2drR1dybTA/style_color_colorscheme_accentcolor_appbar.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>The App bar, toolbar and system status bar can be customized using your palette accent color. In this example, the toolbar uses the 500 version of indigo, while the status bar uses the 700 version.</p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3LWJDeFVQWlBsd3c/style_color_colorscheme_accentcolor_links.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>Web links and buttons can be customized using your palette accent color. </p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3aUdFNzYyV3VqbE0/style_color_colorscheme_accentcolor_textfields.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>Text fields and selection controls can be customized using your palette accent color. </p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3WXdpMmJ2QlN4SUU/style_color_colorscheme_accentcolor_textselection.png" / />
</div>
<figcaption>
<div class="caption-title"></div><p>Text selection can be customized using your palette accent color. </p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleB1">
<div class="module-body">
<p> </p>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Alternative accent colors</h3>
<div class="module-body">
<h4>Darker shades and lighter tints</h4><p>If your accent color is too light or dark to sufficiently contrast with the background color, use a darker shade or lighter tint of the accent color instead. </p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class=" example do">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3MmNuV3lkWm5DOUU/style_color_uiapplication_fallback1.png" / />
</div>
<figcaption>
<div class="caption-title">Do.</div><p>Use a fallback accent color over background colors that are too light or too dark.</p>
</figcaption>
</figure>
<figure class=" example dont">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3WFRpT0FWMWVocFk/style_color_uiapplication_fallback2.png" / />
</div>
<figcaption>
<div class="caption-title">Don't.</div><p>Don’t use the accent color over a background color if there isn’t enough contrast.</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
<h4>Primary color variations</h4><p>Another alternative accent color is the 500 version of your primary color on white backgrounds. </p><p>However, if your background color is already the 500 version of your primary color, make your accent color either white 100% or black 54%.</p>
</div>
<div class="figure-group">
<div class="figure-row">
</div>
</div>
</section>
</div>
</div>
</div>
</div> <div id="color-text-background-colors" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }">
<h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }">
Text and background colors
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10" aria-labelledby="title desc">
<title id="title">Expand and collapse content</title>
<desc id="desc">An arrow that points down when collapsed and points up when expanded.</desc>
<polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"/>
</svg>
</h2>
<div class="article-content">
<div class="module-list">
<div>
<section class="moduleB1">
<h3>Text opacity</h3>
<div class="module-body">
<p>Text may be displayed with different degrees of opacity to convey how important certain information is relative to other information. The level of opacity used for text depends on whether your background is darker or lighter.</p>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
<h4>Dark text on light backgrounds</h4><p>For dark text on light backgrounds, apply the following opacity levels: </p><ul><li>The most important text has an opacity of 87%. </li><li>Secondary text, which is lower in the visual hierarchy, has an opacity of 54%. </li><li>Text hints (like those in text fields and labels) and disabled text have even lower visual prominence with an opacity of 38%.</li></ul>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3eVlsbkFzOEFEQWc/style_color_textandsymbols_alpha1.png" / />
</div>
<figcaption>
<p>Dark text on light backgrounds</p>
</figcaption>
</figure>
<figure class="">
<div class="module-body data-table">
<div class="table-box">
<table class="c12"><tbody><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Dark text (#000000)</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>Opacity</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Primary text </span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>87%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Secondary text</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>54%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Disabled text, hint text, and icons</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>38%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Dividers</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>12%</span></p></td></tr></tbody></table>
</div>
</div>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
<h4>White text on dark backgrounds</h4><p>The table values relay relative levels of importance for white text on dark backgrounds.</p><p>White text appearing on colored backgrounds should do so at an opacity of 100%.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3MEV0TXVja0pMSWs/style_color_textandsymbols_alpha2.png" / />
</div>
<figcaption>
<p>White text on dark backgrounds</p>
</figcaption>
</figure>
<figure class="">
<div class="module-body data-table">
<div class="table-box">
<table class="c12"><tbody><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Light text (#FFFFFF)</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>Opacity</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Primary text </span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>100%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Secondary text</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>70%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Disabled text, hint text, and icons</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>50%</span></p></td></tr><tr class="c5"><td class="c10" colspan="1" rowspan="1"><p><span>Dividers</span></p></td><td class="c10" colspan="1" rowspan="1"><p><span>12%</span></p></td></tr></tbody></table>
</div>
</div>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<div class="module-body">
<h4>Use opacity instead of grey</h4><p>Black or white text that is transparent remains legible and vibrant against background color changes. This makes it more flexible than grey text in the same contexts.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class=" example dont">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3SzIxbkJudGdwYlU/style_color_uiapplication_alpha3.png" / />
</div>
<figcaption>
<div class="caption-title">Don't.</div><p>Grey text (hex value of #727272) on a white background becomes hard to read if the background color changes to magenta.</p>
</figcaption>
</figure>
<figure class=" example do">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3NHNzYlF4QWlTbjQ/style_color_uiapplication_alpha4.png" / />
</div>
<figcaption>
<div class="caption-title">Do.</div><p>Black text, set to a 0.54 opacity, ensures a minimum degree of legibility and color harmony with new background colors.</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Icons, dividers, and other elements</h3>
<div class="module-body">
<p>Elements like icons and dividers benefit from having a hex value of black or white (rather than a specific color) at 38% opacity so that they work on backgrounds of any color.</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="module-body data-table">
<div class="table-box">
<table class="c12"><tbody><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Dark icons (#000000)</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>Opacity</span></p></td></tr><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Active icon</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>54%</span></p></td></tr><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Inactive icon</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>38%</span></p></td></tr></tbody></table>
</div>
</div>
</figure>
<figure class="">
<div class="module-body data-table">
<div class="table-box">
<table class="c12"><tbody><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Light icons (#FFFFFF)</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>Opacity</span></p></td></tr><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Active icon</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>100%</span></p></td></tr><tr class="c5"><td class="c11" colspan="1" rowspan="1"><p><span>Inactive icon</span></p></td><td class="c11" colspan="1" rowspan="1"><p><span>50%</span></p></td></tr></tbody></table>
</div>
</div>
</figure>
</div>
</div>
</section>
</div>
</div>
</div>
</div> <div id="color-themes" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }">
<h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }">
Themes
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10" aria-labelledby="title desc">
<title id="title">Expand and collapse content</title>
<desc id="desc">An arrow that points down when collapsed and points up when expanded.</desc>
<polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"/>
</svg>
</h2>
<div class="article-content">
<div class="module-list">
<div>
<section class="moduleB1">
<div class="module-body">
<p>Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.</p>
</div>
</section>
</div>
<div>
<div class="modulettes">
<a download class="modulette download trackdl" href="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B0J8hsRkk91LOGV6Y3V2WFhhemM/stickersheet_uielements.ai" title="Download themes">
<img class="icon download-icon" src="/design/spec/static/images/download_black.svg" alt="" />
<div class="info">
<div class="title">Download themes</div>
<span class="subtitle">1.23 MB (.ai)</span>
</div>
</a>
</div>
</div>
<div>
<section class="moduleD1">
<h3>Light theme</h3>
<div class="module-body">
<p>1. Status bar<br/>2. App bar<br/>3. Background<br/>4. Cards/Dialogs</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7bmd5SG5WU0tzRHc/style_color_themes_light1.png" / />
</div>
<figcaption>
<p id="h.fxflmubpem3k">Light theme palette</p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7WVQ2WXFLeUtxSlE/style_color_themes_light2.png" / />
</div>
<figcaption>
<p>UI application</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<section class="moduleD1">
<h3>Dark theme</h3>
<div class="module-body">
<p>1. Status bar<br/>2. App bar<br/>3. Background<br/>4. Cards/Dialogs</p>
</div>
<div class="figure-group">
<div class="figure-row">
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7VHFTNDBGODlvakk/style_color_themes_dark1.png" / />
</div>
<figcaption>
<p id="h.fxflmubpem3k-1">Dark theme palette</p>
</figcaption>
</figure>
<figure class="">
<div class="media">
<img src="//material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7T2gwQkR2dWZWdFk/style_color_themes_dark2.png" / />
</div>
<figcaption>
<p id="h.5xw4tdy25hko-2">UI application</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
<div>
<h4 class="related">
Related
</h4>
</div>
<div>
<div class="modulettes">
<a class="modulette android" href="http://developer.android.com/training/material/theme.html" title="Using the Material Theme">
<img class="icon callout-icon" src="/design/spec/static/images/callout_android.svg" alt="" />
<div class="info">
<div class="title">Using the Material Theme</div>
<span class="subtitle">Customize the design to your brand identity.</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</section> </div>
<footer>
<div class="footer-grid">
<div class="footer-L section-motion color-purple"> </div>
<div class="footer-grid-L section-motion color-purple">
<a class="footer-text" href="/design/spec/motion/creative-customization.html">
<i class="material-icons arrow-L">arrow_back</i>
<span class="direction">Previous</span>
<div>
Motion
</div>
</a>
</div>
<div class="footer-R section-style color-teal"> </div>
<div class="footer-grid-R section-style color-teal">
<a class="footer-text" href="/design/spec/style/icons.html">
<i class="material-icons arrow-R">arrow_forward</i>
<span class="direction">Next</span>
<div>
Icons
</div>
</a>
</div>
</div>
</footer>
<script src="//www.gstatic.com/external_hosted/picturefill/picturefill.min.js"></script>
<script src="/design/spec/static/js/main.js"></script>
<script src="//www.gstatic.com/feedback/api.js"></script>
</body>
</html>