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
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.
Comments are closed.