# @material/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.

Latest version **0.4.0** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @material/material-color-utilities
pnpm add @material/material-color-utilities
yarn add @material/material-color-utilities
bun add @material/material-color-utilities
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-01-21 |
| First published | 2022-02-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2301 |
| Author | Material Eng |
| Maintainers | google-wombot |
| Keywords | material, material design, material3, material you, color extraction, theming |

## Links

- npm: https://www.npmjs.com/package/@material/material-color-utilities
- Repository: https://github.com/material-foundation/material-color-utilities
- Homepage: https://github.com/material-foundation/material-color-utilities/tree/main/typescript
- Issues: https://github.com/material-foundation/material-color-utilities/issues
- npm.io page: https://npm.io/package/@material/material-color-utilities

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 0.4.0 (latest) — 2026-01-21
- 0.3.0 — 2024-06-24
- 0.2.7 — 2023-06-28
- 0.2.6 — 2023-04-27
- 0.2.5 — 2023-04-15
- 0.2.4 — 2023-03-07
- 0.2.3 — 2023-03-03
- 0.2.2 — 2023-03-02
- 0.2.1 — 2023-02-17
- 0.2.0 — 2022-08-05
- 0.1.2 — 2022-04-21
- 0.1.1 — 2022-02-16
- 0.1.0 — 2022-02-16

## README

# material-color-utilities

[![npm package](https://badgen.net/npm/v/@material/material-color-utilities)](https://npmjs.com/package/@material/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](https://github.com/material-foundation/material-color-utilities#readme)
for more information.

## Getting started

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

```typescript
import { Hct } from "@material/material-color-utilities";

// Simple demonstration of HCT.
const color = Hct.fromInt(0xff4285f4);
console.log(`Hue: ${color.hue}`);
console.log(`Chrome: ${color.chroma}`);
console.log(`Tone: ${color.tone}`);

```

### Theming

```typescript
import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities";

// Get the theme from a hex color
const theme = themeFromSourceColor(argbFromHex('#f82506'), [
  {
    name: "custom-1",
    value: argbFromHex("#ff0000"),
    blend: true,
  },
]);

// Print out the theme as JSON
console.log(JSON.stringify(theme, null, 2));

// Check if the user has dark mode turned on
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

// Apply the theme to the body by updating custom properties for material tokens
applyTheme(theme, {target: document.body, dark: systemDark});

```

## Contributing

This repo is not accepting external contributions, but feature requests and bug
reports are welcome on
[GitHub](https://github.com/material-foundation/material-color-utilities/issues).

---
_Source: https://npm.io/package/@material/material-color-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._