Webcolors NPM | npm.io

webcolors

All the colors of the web

Palettes

bootstrap: getbootstrap.com
bulma: bulma.io
flatui: FlatUI colors
material: Google Material Design
mrmrs: clrs.cc / mrmrs-colors
tailwind: tailwindcss.com

Formats

Installation

$ npm install webcolors

With CSS custom properties

Use a CSS preprocessor such ass PostCSS to handle @import syntax.

@import "webcolors/material/index.css";

body {
  color: --red;
  background: --yellow;
}

With SCSS

Use sass to handle @import syntax. The format of the import file path depends on your configuration.

@import "~webcolors/material/index.css";

body {
  color: $red;
  background: $yellow;
}

With LESS

Install and configure Less.js.

@import "node_modules/webcolors/flatui/index";

body {
  color: @red;
  background: @blue;
}

With Stylus

Install and configure Stylus.

@import "node_modules/webcolors/mrmrs";

body {
  color: orange;
  background: white;
}

With JavaScript or JSON

Colors can be imported directly from Node.js scripts or modules.

// All palettes:
const webcolors = require("webcolors");

// Specific palettes:
const bootstrap = require("webcolors/bootstrap");
const material = require("webcolors/material");

console.log(`FlatUI yellow: ${webcolors.flatui.yellow}`);
console.log(`Bootstrap red: ${bootstrap.red}`);
console.log(`Material blue: ${material.blue}`);

Palettes pre-exported as JSON files can be found in the package's palette directories.