webcolors

A collection of color palette packages from popular CSS frameworks.

bootstrap

               

> npm install @webcolors/bootstrap

bulma

               

> npm install @webcolors/bulma

flatui

               

> npm install @webcolors/flatui

material

               

> npm install @webcolors/material

mrmrs

               

> npm install @webcolors/mrmrs

tailwind

               

> npm install @webcolors/tailwind

What?

A collection of packages containing default color palettes of popular CSS frameworks. All palettes are then normalized to use only CSS Level 2 color keywords (no custom color names).

Why?

By extracting color palettes into separate packages, we can use any palette on it's own, without being tied to any frameworks. By using only CSS2 color keywords, we can interchange the palettes easily.

How?

Once installed, the palettes are available as CSS, LESS, SCSS and Stylus stylesheets. Configure your stylesheet pre-processor or parser to enable import of NodeJS modules.

CSS

@import "@webcolors/bootstrap";

body {
  background-color: var(--aqua);
  color: var(--blue);
}

LESS

@import "@webcolors/bulma";

body {
  background-color: @fuchsia;
  color: @gray;
}

SCSS

@import "@webcolors/flatui"

// Or @use with scope:
@use "@webcolors/material" as material;
@use "@webcolors/mrmrs" as mrmrs;

body {
  background-color: material.$green;
  border: 1px solid $lime;
  color: flatui.$maroon;
}

Stylus

@import "@webcolors/tailwind"

body
  background-color navy
  color olive