GitHub - zzzaim/webcolors: Modern color palettes bundled into one package

A collection of color palette packages from popular CSS frameworks.

Palettes

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

Formats

Installation

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.