What is randomcolor?
The randomcolor npm package is a versatile tool for generating random colors. It allows users to create random colors with various options for hue, luminosity, and format.
What are randomcolor's main functionalities?
Generate a random color
This feature generates a completely random color in hexadecimal format.
const randomColor = require('randomcolor');
const color = randomColor();
console.log(color);
Generate a random color with specific hue
This feature generates a random color with a specified hue, in this case, blue.
const randomColor = require('randomcolor');
const color = randomColor({ hue: 'blue' });
console.log(color);
Generate a random color with specific luminosity
This feature generates a random color with a specified luminosity, in this case, light.
const randomColor = require('randomcolor');
const color = randomColor({ luminosity: 'light' });
console.log(color);
Generate a random color with specific format
This feature generates a random color in a specified format, in this case, RGB.
const randomColor = require('randomcolor');
const color = randomColor({ format: 'rgb' });
console.log(color);
Generate multiple random colors
This feature generates an array of multiple random colors, in this case, five colors.
const randomColor = require('randomcolor');
const colors = randomColor({ count: 5 });
console.log(colors);
Other packages similar to randomcolor
chroma-js
Chroma.js is a powerful library for color conversions and color scales. It provides more advanced color manipulation capabilities compared to randomcolor, including color blending, interpolation, and color scales.
color
The color package is a comprehensive library for color conversion and manipulation. It supports a wide range of color models and provides methods for color transformations, making it more feature-rich for color manipulation tasks compared to randomcolor.
tinycolor2
TinyColor is a small, fast library for color manipulation and conversion. It offers a balance between simplicity and functionality, providing more color manipulation options than randomcolor while maintaining a small footprint.
A tiny script for generating attractive random colors. See the demo for an explanation and some samples. randomColor has been ported to C#, C++, Go, PHP, Python, Swift, Objective-C, Java and R.
To use randomColor in the browser, download the latest minified version of randomColor and include it on your page. Then call the script:
var color = randomColor();
To use randomColor on the server with node.js, install randomColor from npm then call the script:
npm install randomcolor
var randomColor = require('randomcolor');
var color = randomColor();
Options
You can pass an options object to influence the type of color it produces. The options object accepts the following properties:
hue
– Controls the hue of the generated color. You can pass a string representing a color name: red
, orange
, yellow
, green
, blue
, purple
, pink
and monochrome
are currently supported. If you pass a hexidecimal color string such as #00FFFF
, randomColor will extract its hue value and use that to generate colors.
luminosity
– Controls the luminosity of the generated color. You can specify a string containing bright
, light
or dark
.
count
– An integer which specifies the number of colors to generate.
seed
- An integer or string which when passed will cause randomColor to return the same color each time.
format
– A string which specifies the format of the generated color. Possible values are rgb
, rgba
, rgbArray
, hsl
, hsla
, hslArray
and hex
(default).
alpha
– A decimal between 0 and 1. Only relevant when using a format with an alpha channel (rgba
and hsla
). Defaults to a random value.
Examples
randomColor();
randomColor({
count: 10,
hue: 'green'
});
randomColor({
luminosity: 'light',
hue: 'blue'
});
randomColor({
luminosity: 'random',
hue: 'random'
});
randomColor({
luminosity: 'bright',
format: 'rgb'
});
randomColor({
luminosity: 'dark',
format: 'rgba'
});
randomColor({
luminosity: 'dark',
format: 'rgba',
alpha: 0.5
});
randomColor({
luminosity: 'light',
format: 'hsla'
});
To do
More generally, it might be a good idea to consider using other color models.
- use this on the demo
http://jsfiddle.net/dpLp318f/
https://www.vis4.net/blog/posts/avoid-equidistant-hsv-colors/
https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/
- When returning an array of multiple colors, try to make each color as distinct as possible. Make sure each color is distinct to its neighbours.
- Improve attractive dark color generation, currently they're a touch murky.
- Improve the color dictionary
- definition of hue values and attractive luminosity bounds
- think about how to store hue aliases (e.g. fuschia) or subranges (e.g teal)
- think about making a little point and click tool for defining your own luminosity bounds and customizing the color dictionary
- Think about how to return seeds.
- Think about adding feature to return complementary & contrasting colors, as well as color triads, tetrads etc. Other libraries might already do this better though.
- Think about adding a scheme options which would return a dominant color, as well as secondary, tertiary color and primary and secondary text colors. This might be a bad idea.
- Add a nice visualization of the 'attractive color space' to the demo https://www.youtube.com/watch?v=x0-qoXOCOow
- Add a feature to return random colors close to a provided hex