color-layer
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Color Layer

Generate colors for a UI.

The function returns two HSL values for a given hue and layer number (for light mode and for dark mode). Designed to generate up to 10 brightness levels are enough to build most of the components such as inputs, buttons, labels, etc.

The function returns two hsl values: for light mode and for dark mode:

colorLayer(h = 194, layer = 3) // ["hsl(194, 90%, 94%)", "hsl(194, 80%, 8%)"]

Colors work well with white (#FFFFFF) and black (#000000) backgrounds.

The goal of the library is to avoid using transparency in UI elements.

Levels are organized from the most subtle color to more vivid color (where 1 — almost background-color, 10 — the most vivd/rich color).

Level 0 returns the absolute/normalized color of a given hue, with values of saturation == 100 and lightnes == 50% for the light mode and 40% for the dark mode.

This is a part of the rb_colorize project (see demo).

Install

npm i -S color-layer

Usage

import colorLayer from 'color-layer';

// Generate stroke color
const stroke = (lvl) => colorLayer(lvl, 9);

// Generate background color
const background = (lvl) => colorLayer(lvl, 3);

// Define your hue
console.log(stroke(194), background(194));
// > ["hsl(194, 90%, 55%)", "hsl(194, 80%, 47%)"]
// > ["hsl(194, 90%, 94%)", "hsl(194, 80%, 8%)"]

Package Sidebar

Install

npm i color-layer

Weekly Downloads

123

Version

1.0.3

License

MIT

Unpacked Size

7.54 kB

Total Files

7

Last publish

Collaborators

  • rockbee