Skip to content

ajsecord/material-color-utilities

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Code availability

Language Availability Package
C/C++ Coming soon
Dart material_color_utilities
Java
Objective-C Coming soon
TypeScript

Need another platform/language? Open an issue.

Usage

Image to color

A common use case for this library is extracting a single color from an image. Here's how to do that:

Coming soon

Cheat sheet

library cheat sheet

Background

Learn about the M3 color system.

Components

The library is built out 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

Quantize

  • Turns a wallpaper into N colors
  • Celebi, which runs Wu, then WSMeans

Score

  • Rank colors for suitability for theming
  • Quantize buckets a wallpaper into 128 colors
  • Enables deduplicating and ranking that output.

Scheme

  • Mapping from roles, i.e. names like primary, to colors.

Palettes

  • Tonal Palette — range of colors that varies only in tone
  • Core Palette — set of tonal palettes needed to create Material color schemes

HCT

  • Hue, chroma, tone
  • A new color space based on CAM16 x L*
  • Accounts for viewing conditions

Blend

  • Color interpolation in HCT
  • Harmonizing, animations, gradients

Utils

  • Color — conversions between color spaces needed to implement HCT/CAM16
  • Math — functions for ex. ensuring hue is between 0 and 360, clamping, etc.

Design Tooling

The Material Theme Builder Figma plugin is recommended for design workflows. It 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.

About

Color libraries for Material You

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published