Skip to content

famebot/chromagen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Chromagen

Chromagen generates HSL color schemes.

npm Version Β  GitHub issues

Installation and Usage

Chromagen uses Microbundle to produce ESM (ECMAScript modules), CJS (CommonJS), and UMD (Universal Module Definition) bundles that work in various environments.

Node.js and similar environments

npm i @famebot/chromagen
import chromagen from '@famebot/chromagen';
const colorScheme = chromagen();
console.log(colorScheme);

CommonJS require syntax:

const chromagen = require('@famebot/chromagen');
const colorScheme = chromagen();
console.log(colorScheme);

Browser use client-side

For browsers, use unpkg or include dist/chromagen.umd.js, which examples/browser/index.html demonstrates. View the latest version at https://chromagen.io

Latest UMD bundle on unpkg:
https://unpkg.com/@famebot/chromagen/dist/chromagen.umd.js

Using the UMD bundle in the browser:

<script src="https://unpkg.com/@famebot/chromagen/dist/chromagen.umd.js"></script>
<script>
    const colorScheme = chromagen();
    console.log(colorScheme);
</script>

Step by step

Any method above will return an object where the variable values below are randomized within acceptable parameters, for example (NOTE: since v1, Chromagen now returns non-color mixing values with percent included):

{
  hue: 172,
  complement: 351,
  analogous: 38,
  saturation: '94%',
  xlight: '92%',
  lighter: '83%',
  lightness: '65%',
  midrange: '54%',
  lowmid: '36%',
  darkness: '20%',
  darker: '9%'
}

Check src/index.js for the nitty gritty, or the changelog for the latest.

License

MIT