Installations

npm install @material/material-color-utilities

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.15.0

NPM Version

10.7.0 Pull Requests

Open

13

Total

40

Closed

26

Merged

1

Issues

Open

81

Total

139

Closed

58

Releases

Unable to fetch releases

Languages

5

TypeScript

Java

Swift

Dart

C++

TypeScript (22.95%)

Java (21.46%)

Swift (21.19%)

Dart (17.86%)

C++ (16.53%)

Developer

material-foundation

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

Apache-2.0 License

1,918 Stars

242 Commits

176 Forks

31 Watchers

1 Branches

11 Contributors

Updated on Jul 16, 2025

Package Meta Information

Latest Version

0.3.0

Package Id

@material/material-color-utilities@0.3.0

Unpacked Size

740.61 kB

Size

139.50 kB

File Count

126

NPM Version

10.7.0

Node Version

20.15.0

Published on

Jun 24, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

5

@types/jasmine @types/node jasmine typescript wireit

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.

See the main README for more information.

Getting started

npm i @material/material-color-utilities or yarn add @material/material-color-utilities

1import { Hct } from "@material/material-color-utilities";
2
3// Simple demonstration of HCT.
4const color = Hct.fromInt(0xff4285f4);
5console.log(`Hue: ${color.hue}`);
6console.log(`Chrome: ${color.chroma}`);
7console.log(`Tone: ${color.tone}`);
8

Theming

1import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities";
2
3// Get the theme from a hex color
4const theme = themeFromSourceColor(argbFromHex('#f82506'), [
5  {
6    name: "custom-1",
7    value: argbFromHex("#ff0000"),
8    blend: true,
9  },
10]);
11
12// Print out the theme as JSON
13console.log(JSON.stringify(theme, null, 2));
14
15// Check if the user has dark mode turned on
16const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
17
18// Apply the theme to the body by updating custom properties for material tokens
19applyTheme(theme, {target: document.body, dark: systemDark});
20

Contributing

This repo is not accepting external contributions, but feature requests and bug reports are welcome on GitHub.

Fuzzing

Determines if the project uses fuzzing.

Score

5.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @material/material-color-utilities

Other packages similar to @material/material-color-utilities

@material/material-color-utilities

Installations

Developer Guide

Yes

ESM

20.15.0

10.7.0

Pull Requests

13

40

26

1

Issues

81

139

58

Releases

Unable to fetch releases

Languages

Developer

material-foundation

Download Statistics

GitHub Statistics

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

material-color-utilities

Getting started

Theming

Contributing

10

10

10

10

10

7

2

0

0

0

0

0

5.7

/10