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
materialyou.mp4
| Language | Availability | Location |
|---|---|---|
| C++ | ✅ | |
| Dart | ✅ |  |
| Java | ✅ | MDC-Android |
| Swift | ✅ | |
| TypeScript | ✅ | |
| Kotlin | ✅ |
Need another platform/language? Check the existing issues or open a new one.
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 |
The Science of Color & Design - Material Design
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.