Code Monkey home page Code Monkey logo

material-color-utilities's Introduction

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.

materialyou.mp4

Library availability

Language Availability Package
C/C++ Coming soon
Dart pub package
Java Coming soon
Objective-C Coming soon
TypeScript npm package

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

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

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.

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.

material-color-utilities's People

Contributors

kluever avatar mindon avatar guidezpl avatar material-admin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.