Home

Awesome

Material Color Utilities

Color is a powerful design tool and part of the Material system along with styles like typography and shape. In products, colors and the way they are used can be vast and varied. An app’s color scheme can express brand and style. Semantic colors can communicate meaning. And color contrast control supports visual accessibility.

In many design systems of the past, designers manually picked app colors to support the necessary range of color applications and use cases. Material 3 introduces a dynamic color system, which does not rely on hand-picked colors. Instead, it uses color algorithms to generate beautiful, accessible color schemes based on dynamic inputs like a user’s wallpaper. This enables greater flexibility, personalization, and expression, all while streamlining work for designers and teams.

Material Color Ultilities (MCU) powers dynamic color with a set of color libraries containing algorithms and utilities that make it easier for you to develop color themes and schemes in your app.

<video autoplay muted loop src="https://user-images.githubusercontent.com/6655696/146014425-8e8e04bc-e646-4cc2-a3e7-97497a3e1b09.mp4" data-canonical-src="https://user-images.githubusercontent.com/6655696/146014425-8e8e04bc-e646-4cc2-a3e7-97497a3e1b09.mp4" class="d-block rounded-bottom-2 width-fit" style="max-width:640px;"></video>

Library availability

LanguageAvailabilityLocation
C++
Dartpub package
JavaMDC-Android
Swift
TypeScriptnpm package

Need another platform/language? Check the existing issues or open a new one.

Capabilities Overview

<a href="https://github.com/material-foundation/material-color-utilities/raw/main/cheat_sheet.png"> <img alt="library cheat sheet" src="https://github.com/material-foundation/material-color-utilities/raw/main/cheat_sheet.png" style="max-width:640px;" /> </a>

The library consists of various components, each having its own folder and tests, designed to be as self-contained as possible. This enables seamless integration of subsets into other libraries, like Material Design Components and Android System UI. Some consumers do not require all components, for example, MDC doesn’t need quantization, scoring, image extraction.

ComponentsPurpose
blendInterpolate, harmonize, animate, and gradate colors in HCT
contrastMeasure contrast, obtain contrastful colors
dislikeCheck and fix universally disliked colors
dynamiccolorObtain colors that adjust based on UI state (dark theme, style, preferences, contrast requirements, etc.)
hctA new color space (hue, chrome, tone) based on CAM16 x L*, that accounts for viewing conditions
palettesTonal palette — range of colors that varies only in tone <br>Core palette — set of tonal palettes needed to create Material color schemes
quantizeTurn an image into N colors; composed of Celebi, which runs Wu, then WSMeans
schemeCreate static and dynamic color schemes from a single color or a core palette
scoreRank colors for suitability for theming
temperatureObtain analogous and complementary colors
utilitiesColor — convert between color spaces needed to implement HCT/CAM16 <br>Math — functions for ex. ensuring hue is between 0 and 360, clamping, etc. <br>String - convert between strings and integers

Learn about color science

The Science of Color & Design - Material Design

Try it out

Material Theme Builder

We recommend incorporating the Material Theme Builder Figma plugin and web tool into the design workflow. With them, designers can easily experiment with different dynamic color themes and see how they transform their designs with just a few clicks.