The 'culori' npm package is a comprehensive color library for JavaScript that provides a wide range of functionalities for color manipulation, conversion, and analysis. It supports various color spaces and formats, making it a versatile tool for developers working with colors in web development, data visualization, and other applications.
Color Conversion
This feature allows you to convert colors between different color spaces. In the example, an RGB color is converted to the LAB color space.
const culori = require('culori');
const rgbColor = culori.rgb('#ff0000');
const labColor = culori.lab(rgbColor);
console.log(labColor);Color Manipulation
This feature provides functions to manipulate colors, such as lightening or darkening them. The example demonstrates how to lighten an HSL color.
const culori = require('culori');
const color = culori.hsl({ h: 0, s: 1, l: 0.5 });
const lighterColor = culori.lighten(color, 0.2);
console.log(lighterColor);Color Parsing
This feature allows you to parse color strings into color objects. The example shows how to parse a hex color string into an RGB color object.
const culori = require('culori');
const color = culori.parse('#ff0000');
console.log(color);Color Interpolation
This feature enables color interpolation between two or more colors. The example demonstrates how to find a color that is halfway between red and blue.
const culori = require('culori');
const interpolate = culori.interpolate(['#ff0000', '#0000ff']);
const midColor = interpolate(0.5);
console.log(midColor);Color Difference
This feature allows you to calculate the difference between two colors. The example shows how to compute the Euclidean difference between red and green colors.
const culori = require('culori');
const color1 = culori.rgb('#ff0000');
const color2 = culori.rgb('#00ff00');
const difference = culori.differenceEuclidean(color1, color2);
console.log(difference);Chroma.js is another popular color library for JavaScript that provides similar functionalities for color manipulation, conversion, and analysis. It supports various color spaces and offers a rich set of features for working with colors. Compared to 'culori', Chroma.js has a more extensive API for color scales and palettes, making it particularly useful for data visualization.
The 'color' npm package is a versatile library for color conversion and manipulation. It supports a wide range of color spaces and provides methods for color transformations. While 'culori' focuses on a broader set of color spaces and more advanced color science features, 'color' is simpler and easier to use for basic color operations.
TinyColor2 is a lightweight color manipulation library that offers basic functionalities for color conversion, manipulation, and analysis. It is designed to be small and fast, making it suitable for performance-sensitive applications. Compared to 'culori', TinyColor2 has a more limited feature set but is easier to integrate into projects where minimal overhead is desired.
Culori is a general-purpose color library for JavaScript.
There are already several excellent libraries out there for manipulating colors in JavaScript.
This library aims to provide a simple API to:
Convert between a variety of color formats.
Build a color picker for a particular format. Let's take the ubiquitous HSV color picker; the library should allow me to:
h, s, v values to a color that I can then convert to any other formatOf particular interest is deciding when to apply the alpha channel to the interface (i.e. to an opacity slider). If the interface contains color swatches, I should decide whether to use the alpha channel or not:
#ffffff I might only use the h, s and v value;#ffffff00 I might also want to apply the a: 0 value.Create color schemes based on a base color.
Obtain color scales to use in data visualization.
The library supports all the color formats defined in the CSS Colors Level 4:
Additionally, it supports:
The implementations I've already finished ar denoted by checkmarks (✓).
§ culori( Specifier or Color ) <>
Just a convenience for culori.rgb().
culori('tomato');
culori('rgb(255, 0, 0)');
culori({ r: 0.5, g: 0.1, b: 0.2 });
§ culori.parse( Specifier ) → Color <>
Accepts a color in any CSS Colors Level 4 format and returns the corresponding RGB or HSL object.
If you'd like to always get a RGB representation regardless of the CSS format, use culori() instead.
Note: If the color does not specify an explicit alpha value, the a property of the RGB object is marked as undefined. Other color libraries will put a default a: 1 for these colors, but I found this assumption to be limiting. As such, we leave it to the user to place a: 1 instead of undefined when appropriate for their needs.
The individual parsers are exposed in the culori.parse namespace:
§ culori.convert( Specifier or Color ) <>
§ culori.css( Color, format ) <>
Converts a Color to a CSS representation. Accepted values for the format:
| Format | Example |
|---|---|
rgb (default) | |
hex | |
hsl (coming soon) |
§ culori.hsl( Specifier or HSL or RGB or Object) → HSL <>
Accepts a color in any CSS Colors Level 4 format and returns the corresponding HSL object.
When passed a Culori object:
When passed a plain object, it assumes it's a normalized HSL object.
§ culori.hsv( Specifier or HSL or RGB or Object) → HSV <>
Accepts a color in any CSS Colors Level 4 format and returns the corresponding HSV object.
When passed a Culori object:
When passed a plain object, it assumes it's a normalized HSV object.
§ culori.hsi( Specifier or HSI or RGB or Object) → HSI <>
Accepts a color in any CSS Colors Level 4 format and returns the corresponding HSI object.
When passed a Culori object:
When passed a plain object, it assumes it's a normalized HSI object.
Contains the set of CSS Named Colors.
§ culori.brewer
ColorBrewer (coming soon).
§ culori.round( value | object [, precision = 4 ] ) <>
Rounds the value, or each property in an object, to a certain number of decimal places. This is useful in a couple of situations:
§ culori.prepare( Specifier or Color ) <>
Specifier. is a color in any parsable format. It is normally a string, but numbers (e.g. 0xFFF) are also accepted.
RGB is any plain object containing the r, g, b, and optionally a, properties with all values normalized to the interval [0..1].
HSL is any plain object containing the h, s, l, and optionally a, properties with the values for s, l, and a, normalized to the interval [0..1].
HSV is any plain object containing the h, s, v, and optionally a, properties with the values for s, v, and a, normalized to the interval [0..1].
HSI is any plain object containing the h, s, i, and optionally a, properties with the values for s, i, and a, normalized to the interval [0..1].
Culori is written by Dan Burzo and is released under the MIT License.
It builds upon the ideas of two thoroughly documented and time-tested projects: chroma.js by Gregor Aisch and d3-color by Mike Bostock.
You may also want to look at TinyColor by Brian Grinstead, color by Heather Arthur, and color.js by Andrew Brehaut et al.
colori stacks well against its peers: benchmarks.
FAQs
A general-purpose color library for JavaScript
We found that culori demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.