hsluv

What is hsluv?

The hsluv npm package provides a human-friendly alternative to the HSL (Hue, Saturation, Lightness) color space. It aims to make it easier to work with colors in a way that is perceptually uniform, meaning that changes in lightness or saturation appear consistent to the human eye.

What are hsluv's main functionalities?

Convert HSLuv to RGB

This feature allows you to convert HSLuv color values to RGB color values. The code sample demonstrates converting an HSLuv color with hue 0, saturation 100, and lightness 50 to its RGB equivalent.

const hsluv = require('hsluv');
const rgb = hsluv.hsluvToRgb([0, 100, 50]);
console.log(rgb); // [1, 0, 0]

Convert RGB to HSLuv

This feature allows you to convert RGB color values to HSLuv color values. The code sample demonstrates converting an RGB color with values [1, 0, 0] to its HSLuv equivalent.

const hsluv = require('hsluv');
const hsluvColor = hsluv.rgbToHsluv([1, 0, 0]);
console.log(hsluvColor); // [0, 100, 50]

Convert HSLuv to Hex

This feature allows you to convert HSLuv color values to Hex color values. The code sample demonstrates converting an HSLuv color with hue 0, saturation 100, and lightness 50 to its Hex equivalent.

const hsluv = require('hsluv');
const hex = hsluv.hsluvToHex([0, 100, 50]);
console.log(hex); // '#ff0000'

Convert Hex to HSLuv

This feature allows you to convert Hex color values to HSLuv color values. The code sample demonstrates converting a Hex color '#ff0000' to its HSLuv equivalent.

const hsluv = require('hsluv');
const hsluvColor = hsluv.hexToHsluv('#ff0000');
console.log(hsluvColor); // [0, 100, 50]

Other packages similar to hsluv

chroma-js

Chroma.js is a JavaScript library for color conversions and color scales. It supports a wide range of color spaces including RGB, HSL, and LAB. Compared to hsluv, chroma-js offers more extensive functionality for color manipulation and generation, but it does not specifically focus on the perceptual uniformity that HSLuv provides.

color

The color package is a JavaScript library for color conversion and manipulation. It supports various color models such as RGB, HSL, and CMYK. While it provides a broad range of color manipulation features, it does not focus on the perceptual uniformity that HSLuv aims to achieve.

tinycolor2

TinyColor is a small color manipulation and conversion library. It supports multiple color formats including RGB, HSL, and Hex. TinyColor is lightweight and easy to use, but it does not offer the perceptual uniformity features that HSLuv provides.

README

HSLuv - Human-friendly HSL

Installation

Install from NPM package repository:

npm install hsluv

ES modules:

import {Hsluv} from "hsluv";

CommonJS:

const {Hsluv} = require("hsluv");

HTML include:

• Download the latest hsluv.min.js
• Add <script src="hsluv-x.x.x.min.js"></script> to your HTML
• Access it via the global window.Hsluv

Usage

The API is designed to avoid heap allocation. The HSLuv class defines the following public fields:

• RGB: hex:String, rgb_r:Float [0;1], rgb_g:Float [0;1], rgb_r:Float [0;1]
• CIE XYZ: xyz_x:Float, xyz_y:Float, xyz_z:Float
• CIE LUV: luv_l:Float, luv_u:Float, luv_v:Float
• CIE LUV LCh: lch_l:Float, lch_c:Float, lch_h:Float
• HSLuv: hsluv_h:Float [0;360], hsluv_s:Float [0;100], hsluv_l:Float [0;100]
• HPLuv: hpluv_h:Float [0;360], hpluv_p:Float [0;100], hpluv_l:Float [0;100]

To convert between color spaces, simply set the properties of the source color space, run the conversion methods, then read the properties of the target color space.

Use the following methods to convert to and from RGB:

• HSLuv: hsluvToRgb(), hsluvToHex(), rgbToHsluv(), hexToHsluv()
• HPLuv: hpluvToRgb(), hpluvToHex(), rgbToHpluv(), hexToHpluv()

Use the following methods to do step-by-step conversion:

• Forward: hsluvToLch() (or hpluvToLch()), lchToLuv(), luvToXyz(), xyzToRgb(), rgbToHex()
• Backward: hexToRgb(), rgbToXyz(), xyzToLuv(), luvToLch(), lchToHsluv() (or lchToHpluv())

For advanced usage, we also export the bounding lines in slope-intercept format, two for each RGB channel representing the limit of the gamut.

• R < 0: r0s, r0i
• R > 1: r1s, r1i
• G < 0: g0s, g0i
• G > 1: g1s, g1i
• B < 0: b0s, b0i
• B > 1: b1s, b1i

Example:

var conv = new Hsluv();
conv.hsluv_h = 10;
conv.hsluv_s = 75;
conv.hsluv_l = 65;
conv.hsluvToHex();
console.log(conv.hex); // Will print "#ec7d82"

Also available for Stylus. See here.

Development

Our GitHub Actions workflow will build and test every push and PR to the main branch. When a main branch receives a commit that updates the project version in package.json, the workflow will tag the commit, create a draft release on GitHub and publish the npm package. Mark your versions with the -rc suffix to create pre-releases.

Changelog

1.0.1

• Fix TypeScript d.ts resolution for certain configurations.

1.0.0

• New API to avoid heap allocation.
• Transpiled from hsluv-haxe and converted manually to TypeScript.
• New GitHub Actions CI for build, test and publishing automation.

0.1.0

• Provide Typescript definitions in the NPM package.

0.0.3

• Expose intermediate functions in the public API.

0.0.2

• Improve packaging and minification.

0.0.1

• Initial release under the name HSLuv. Old releases can be found here.