Clone this repo:
  1. f5d03da Update `DynamicScheme` API for C++. by Material Eng · 15 hours ago upstream/main
  2. 0a56fc7 Implement New Contrast Surfaces Spec. by Material Eng · 4 days ago
  3. f16ff28 Correct tables in make_schemes.md by Material Eng · 9 days ago
  4. 6018b17 Deprecate `Scheme` in dart. by Material Eng · 11 days ago
  5. 7cde6f9 Add Scheme correctness tests [dart]. by Material Eng · 13 days ago

Material Color Utilities

Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.

Library availability

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

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

Usage

Cheat sheet

Components

The library is composed of multiple components, each with its own folder and tests, each as small as possible.

This enables easy merging and updating of subsets into other libraries, such as Material Design Components, Android System UI, etc. Not all consumers will need every component — ex. 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
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
Math — functions for ex. ensuring hue is between 0 and 360, clamping, etc.
String - convert between strings and integers

Background

The Science of Color & Design - Material Design

Design tooling

The Material Theme Builder Figma plugin and web tool are recommended for design workflows. The Material Theme Builder delivers dynamic color to where design is done. Designers can take an existing design, and see what it looks like under different themes, with just a couple clicks.