https://github.com/famebot/chromagen

🎨💥 Color Scheme Generator
https://github.com/famebot/chromagen

chromagen color color-scheme color-theme colorful colors colorscheme generate generator

Last synced: about 1 month ago
JSON representation

🎨💥 Color Scheme Generator

• Host: GitHub
• URL: https://github.com/famebot/chromagen
• Owner: famebot
• License: mit
• Created: 2023-03-15T07:35:14.000Z (over 1 year ago)
• Default Branch: trunk
• Last Pushed: 2024-10-01T17:54:19.000Z (2 months ago)
• Last Synced: 2024-10-02T13:17:37.746Z (2 months ago)
• Topics: chromagen, color, color-scheme, color-theme, colorful, colors, colorscheme, generate, generator
• Language: JavaScript
• Homepage: https://chromagen.io
• Size: 1.68 MB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - chromagen

README

        
# Chromagen

[![](https://o.famebot.com/file/famebot/chromagen.png)](https://chromagen.io)

Chromagen generates HSL color schemes.

- [Demo](https://chromagen.io)

- [Chromagen on GitHub](https://github.com/famebot/chromagen)

- [@famebot/chromagen on npm](https://www.npmjs.com/package/@famebot/chromagen)

[![npm Version](https://img.shields.io/npm/v/@famebot/chromagen.svg?style=for-the-badge)](https://www.npmjs.com/package/@famebot/chromagen)   [![GitHub issues](https://img.shields.io/github/issues/famebot/chromagen.svg?style=for-the-badge)](https://github.com/famebot/chromagen/issues)

## Installation and Usage

Chromagen uses [Microbundle](https://github.com/developit/microbundle) to produce ESM ([ECMAScript modules](https://nodejs.org/api/esm.html)), CJS ([CommonJS](https://nodejs.org/api/modules.html)), and UMD ([Universal Module Definition](https://github.com/umdjs/umd)) bundles that work in various environments.

### Node.js and similar environments

```bash

npm i @famebot/chromagen

```

```js

import chromagen from '@famebot/chromagen';

const colorScheme = chromagen();

console.log(colorScheme);

```

CommonJS `require` syntax:

```js

const chromagen = require('@famebot/chromagen');

const colorScheme = chromagen();

console.log(colorScheme);

```

### Browser use client-side

For browsers, use [unpkg](https://unpkg.com) or include `dist/chromagen.umd.js`, which `examples/browser/index.html` demonstrates. View the latest version at 

Latest UMD bundle on unpkg:  

Using the UMD bundle in the browser:

```html

    const colorScheme = chromagen();

    console.log(colorScheme);

```

### 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](https://github.com/famebot/chromagen/releases/tag/v1.0.0), Chromagen now returns non-color mixing values with percent included):

```js

{

  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`](./src/index.js) for the nitty gritty, or the [changelog](./CHANGELOG.md) for the latest.

## License

MIT