google-material-color-palette-json

Google Material Design's color palette as a typed TypeScript/JavaScript module with full IntelliSense support.

Color values sourced from Google Material Design Color System.

Interactive Color Palette — Browse all colors visually. Click any swatch to copy its palette accessor and hex code.

Install

npm install google-material-color-palette-json

Usage

This package provides three ways to access the Material Design color palette: JavaScript/TypeScript, Sass/SCSS, and CSS utility classes.

JavaScript / TypeScript

ESM (TypeScript / modern JavaScript)

import palette from 'google-material-color-palette-json';

// Access colors with full IntelliSense support
const primary = palette.blue.shade_500;       // '#2196f3'
const accent = palette.pink.shade_A200;       // '#ff4081'
const background = palette.grey.shade_100;    // '#f5f5f5'
const textColor = palette.white;              // '#FFFFFF'

// Use in a React component
const styles = {
  backgroundColor: palette.deepPurple.shade_700,  // '#512da8'
  color: palette.white,                            // '#FFFFFF'
  borderColor: palette.deepPurple.shade_200,       // '#b39ddb'
};

// Dynamic access via bracket notation
const colorName = 'red';
const shade = 'shade_500';
const dynamicColor = palette[colorName][shade];  // '#f44336'

CommonJS

const { palette } = require('google-material-color-palette-json');

const bgColor = palette.red.shade_500;  // '#f44336'
const fgColor = palette.white;          // '#FFFFFF'

Named Exports & Types

import { palette } from 'google-material-color-palette-json';
import type {
  MaterialColorPalette,
  ColorName,
  Shade,
  HexColor,
} from 'google-material-color-palette-json';

// Type-safe color picker
function getColor(color: ColorName, shade: Shade): HexColor {
  return palette[color][shade];
}

Sass / SCSS

The package includes a _palette.scss file with all colors as Sass variables.

With @use (recommended)

@use 'google-material-color-palette-json/scss' as md;

.button {
  background-color: md.$md-red-500;
  color: md.$md-white;

  &:hover {
    background-color: md.$md-red-700;
  }
}

.card {
  background-color: md.$md-grey-50;
  border: 1px solid md.$md-grey-300;
  color: md.$md-grey-900;
}

.accent-text {
  color: md.$md-deep-purple-a200;
}

With @import

@import 'google-material-color-palette-json/scss';

.button {
  background-color: $md-blue-500;
  color: $md-white;
}

Variable naming convention: $md-{color}-{shade} where color names are kebab-case (e.g. $md-deep-purple-a200, $md-light-blue-500).

CSS Utility Classes

The package includes a palette.css file with ready-to-use utility classes for all colors — no build step needed.

Setup

Include via a <link> tag:

<link rel="stylesheet" href="node_modules/google-material-color-palette-json/dist/palette.css" />

Or import in a bundler (Webpack, Vite, etc.):

import 'google-material-color-palette-json/css';

Usage

Each color provides two classes: one for text color and one for background color.

<!-- Text color classes -->
<p class="palette-red-500">Error message in red</p>
<p class="palette-green-700">Success message in green</p>
<span class="palette-grey-500">Muted text</span>

<!-- Background color classes (suffix: -bg) -->
<div class="palette-blue-500-bg palette-white">White text on blue background</div>
<div class="palette-amber-100-bg palette-brown-900">Dark text on amber background</div>

<!-- Accent shades -->
<button class="palette-pink-a200-bg palette-white">Accent Button</button>

<!-- Black and white -->
<div class="palette-black-bg palette-white">Dark mode</div>

Class naming convention: .palette-{color}-{shade} for text color, .palette-{color}-{shade}-bg for background color (e.g. .palette-deep-purple-a200, .palette-light-blue-500-bg).

Available Colors

Color Groups with Accent Shades (14 shades each)

red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange

Shades: shade_50, shade_100–shade_900, shade_A100, shade_A200, shade_A400, shade_A700

Color Groups without Accent Shades (10 shades each)

brown, grey, blueGrey

Shades: shade_50, shade_100–shade_900

Standalone Colors

black (#000000), white (#FFFFFF)

TypeScript Types

The package exports the following types:

| Type | Description | |---|---| | MaterialColorPalette | The full palette interface | | ColorWithAccents | A color group with 14 shades | | ColorWithoutAccents | A color group with 10 shades | | ColorName | Union of all color group names | | ColorNameWithAccents | Color names that have accent shades | | ColorNameWithoutAccents | Color names without accent shades | | Shade | Union of all shade keys | | BaseShade | Base shade keys (50–900) | | AccentShade | Accent shade keys (A100–A700) | | HexColor | A hex color string |

Migration from v2

• ESM import: import palette from 'google-material-color-palette-json' (was require())
• CJS require: const { palette } = require('google-material-color-palette-json')
• UMD removed: The palette-umd.js build is no longer produced. Use a bundler or ESM.
• JSON file removed: lib/palette.json is no longer shipped. Import the module instead.
• TypeScript types: Full type definitions are now included.
• Node.js: Requires Node 18+.

License

MIT