Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including material-palette with all npm packages installed. Try it out:

var materialPalette = require("material-palette")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

material-palette v1.0.0

Generate material palettes for your colors


Material Palette Generator


CI NPM Coveralls branch

Generates material palettes for your colors

Given an input color it calculates its palette approaching the logic of Google Material Design Color Palettes.

Since the algorithm behind their generation is not (yet) known this module approximates the colors values.

It works everywhere: browsers, node, and so on.

Install

With npm do:

npm install material-palette

API

This module exports a single function, the material palette generator.

materialpalette({ h: number, s: number, l: number })

  • It takes an object containing the h, s, and l fields

    • The field h must be a numeric into [0, 360].

    • The fields s and l must be numerics into [0, 100].

  • It returns an object containing all the 14 palette variants (e.g., 50, 100, 200, ..., A700)

As always, more details reading the tests ...

Example

Suppose you want to generate a material palette for hsl(87, 100%, 22%) color (i.e. #3E7000).

First of all import the generator.

var materialpalette = require('materialpalette') // node
import materialpalette from 'materialpalette' // ES2015
window.materialpalette // browsers

Then use it.

var ciao = materialpalette({ h: 87, s: 100, l: 22 })

Which results in the following object ...

{
  '50': { h: 87, s: 100, l: 74 },
  '100': { h: 87, s: 100, l: 59 },
  '200': { h: 87, s: 100, l: 48 },
  '300': { h: 87, s: 100, l: 34 },
  '400': { h: 87, s: 100, l: 28 },
  '500': { h: 87, s: 100, l: 22 },
  '600': { h: 87, s: 100, l: 16 },
  '700': { h: 87, s: 100, l: 10 },
  '800': { h: 87, s: 100, l: 4 },
  '900': { h: 87, s: 100, l: 0 },
  'A100': { h: 92, s: 100, l: 46 },
  'A200': { h: 92, s: 100, l: 38 },
  'A400': { h: 92, s: 100, l: 21 },
  'A700': { h: 92, s: 100, l: 10 }
}

Matching, visually ...

Material Colors Palette for #3E7000

It's cool, isn't it?

License

MIT © Leonardo Di Donato


Analytics

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free