webcolors

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

• CSS (custom properties)
• SCSS
• Less
• Stylus
• JavaScript/JSON

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.

Changelog

1.2.2 - Fix typo in Material palette for "olive" color.

1.2.0 - Add plain, non-number-prefixed Material color aliases, e.g. cyan => cyan500, indigo => indigo500, etc.

1.1.0 - All color values are normalized as uppercase hex strings.

1.0.0 - Breaking change to directory structure. No more dist folder, individual palettes are available at root directory.

Inspiration

Inspired by the material-colors and mrmrs-colors packages.

License

MIT - see LICENSE file.