Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including uniqolor with all npm packages installed. Try it out:

var uniqolor = require("uniqolor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

uniqolor v0.9.0

Generate unique and beautiful colors from any texts or numbers

uniqolor logo

Build status Coverage report GitHub release
NPM Downloads No Dependency GitHub license

Overview

uniqolor is a fast and lightweight javascript library for generating unique and beautiful colors from any texts or numbers.

Why uniqolor?

  • There is no need to store colors in the database anymore, just use uniqolor to generate colors at runtime and it will generate the same output every time, on any platform (Server, Browser or Mobile).
  • You can generate a unique color from UUID, MongoDB ObjectId or anything that can be converted to a string or number
  • You can generate a random color
  • You can control the color saturation and lightness
  • There is no need for an extra color library to change the color format or indicating whether the color brightness is light or dark
  • It's lightweight (~1.4KB gzipped)

Quick start

Using npm or yarn

$ npm install uniqolor
# or
$ yarn add uniqolor

ES6 Import:

import uniqolor from 'uniqolor';

CommonJS (like nodejs, webpack, and browserify):

const uniqolor = require('uniqolor');

AMD (like RequireJS):

define(['uniqolor'], function (uniqolor) {
  // ...
})

Using <script>

Include uniqolor.js or uniqolor.min.js into your html file:

<script src="https://unpkg.com/uniqolor/dist/uniqolor.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var color = uniqolor('Hello world!');
</script>

Usage

/* Generate unique color from texts or numbers */

uniqolor('Hello world!')
// { color: "#5cc653", isLight: true }

uniqolor('bf545d4c-5360-4158-a572-bd3e204185a9', { format: 'rgb' })
// { color: "rgb(128, 191, 64)", isLight: true }

uniqolor(123, {
  saturation: [35, 70],
  lightness: 25,
})
// { color: "#405926", isLight: false }

uniqolor(123, {
  saturation: [35, 70],
  lightness: 25,
  differencePoint: 50,
})
// { color: "#405926", isLight: true }

/* Generate random color */

uniqolor.random()
// { color: "#644cc8", isLight: false }

uniqolor.random({ format: 'hsl' })
// { color: "hsl(89, 55%, 60%)", isLight: true }

uniqolor.random({
  saturation: 80,
  lightness: [70, 80],
})
// { color: "#c7b9da", isLight: true }

Examples

API

uniqolor(value, [options]) ⇒ Object

Generate unique color from value

Params:

  • value (type: string|number)
  • options (type: Object, default: {})
  • options.format (type: string, default: 'hex'): The color format, it can be one of hex, rgb or hsl
  • options.saturation (type: number|Array, default: [50, 55]): Determines the color saturation, it can be a number or a range between 0 and 100
  • options.lightness (type: number|Array, default: [50, 60]): Determines the color lightness, it can be a number or a range between 0 and 100
  • options.differencePoint (type: number, defualt: 130): Determines the color brightness difference point. We use it to obtain the isLight value in the output, it can be a number between 0 and 255

Output:

  • color (type: string): The generated color
  • isLight (type: boolean): Determines whether the color is a light color or a dark color (It's good for choosing a foreground color, like font color)

uniqolor.random([options]) ⇒ Object

Generate random color

Params:

  • options (type: Object, default: {})
  • options.format (type: string, default: 'hex'): The color format, it can be one of hex, rgb or hsl
  • options.saturation (type: number|Array, default: [50, 55]): Determines the color saturation, it can be a number or a range between 0 and 100
  • options.lightness (type: number|Array, default: [50, 60]): Determines the color lightness, it can be a number or a range between 0 and 100
  • options.differencePoint (type: number, defualt: 130): Determines the color brightness difference point. We use it to obtain the isLight value in the output, it can be a number between 0 and 255

Contributing

Your ideas and contributions are welcome; check out our contributing guide

License

The unicorn shape in the logo made by Freepik is licensed by CC 3.0 BY

MIT © 2017 Rasool Dastoori

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free