material-colors-object

A plain Javascript object containing Material Design Color Palette data. Supports minimum contrast and light & dark variants.

Installation

Prerequisites: Node.js (any version), npm (any version).

npm install --save material-colors-object

Usage

const materialColors = require('material-colors-object');
console.log(materialColors);

{
  red: {
    name: 'Red',
    shades: {
      '50': {
        value: '#ede7f6',      // Regular color (no variant)
        isDark: false,         // Legible with dark foreground color
        lightValue: '#ffffff', // Light variant
        darkValue: '#bbb5c3'   // Dark variant
      },
      // ...
      '500': {
        value: '#f44336',
        isDark: true,          // Light foreground color recommended
        lightValue: '#ff7961',
        darkValue: '#ba000d'
      },
      // ...
      '900': { /* ... */ },
      a100: { /* ... */ },
      a200: { /* ... */ },
      a400: { /* ... */ },
      a700: { /* ... */ }
    }
  },
  pink: {
    name: 'Pink',
    shades: { /* ... */ }
  },
  purple: {
    name: 'Purple',
    shades: { /* ... */ }
  },
  deep-purple: {
    name: 'Deep purple',
    shades: { /* ... */ }
  },
  // ...
  black: {
    name: 'Black',
    value: '#000000'
  },
  white: {
    name: 'White',
    value: '#ffffff'
  }
}

Notes

Parsing

Data is generated at build time by parsing HTML code from https://material.io/design/color/the-color-system.html and stored in a json file, which is then published. No HTTP requests is made either during installation or runtime.

Dark & light variants

chroma.js library is used to generate light and dark variant. This is the same library that is used by the Official Material Color Tool.

References

• Official Material Color Documentation
• Official Material Color Tool

Contributing

Please refer to the guidelines for contributing.

License

Created with npm-package-skeleton.