material-color-utilities

Material Color Utilities

Color is a foundational part of the Material Design system, alongside typography and shape. In products, color can communicate brand, reinforce meaning through semantic roles, and improve usability through accessible contrast.

Historically, teams hand-picked many colors to cover all UI use cases. In Material 3, dynamic color shifts

Library availability

Language	Availability	Location
C++	✅
Dart	✅
Java	✅	MDC-Android
Swift	✅
TypeScript	✅
Kotlin	✅

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

Capabilities Overview

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.

Components	Purpose
blend	Interpolate, harmonize, animate, and gradate colors in HCT
contrast	Measure contrast, obtain contrastful colors
dislike	Check and fix universally disliked colors
dynamiccolor	Obtain colors that adjust based on UI state (dark theme, style, preferences, contrast requirements, etc.)
hct	A new color space (hue, chrome, tone) based on CAM16 x L*, that accounts for viewing conditions
palettes	Tonal palette — range of colors that varies only in tone Core palette — set of tonal palettes needed to create Material color schemes
quantize	Turn an image into N colors; composed of Celebi, which runs Wu, then WSMeans
scheme	Create static and dynamic color schemes from a single color or a core palette
score	Rank colors for suitability for theming
temperature	Obtain analogous and complementary colors
utilities	Color — convert between color spaces needed to implement HCT/CAM16 Math — functions for ex. ensuring hue is between 0 and 360, clamping, etc. 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.