HSLuv Sass

Pure Sass HSLuv implementation.

This package attempts to match the canonical implementation as closely as possible, but not break sass best practices and common patterns. Important deviations include

• RGB color components range from 0 to 255, not 0 to 1
• Testing precision is lowered significantly

Requires Dart Sass >= 1.83.0 (not compatible with LibSass / Node Sass).

Usage

Installation

npm install hsluv-sass

Example

@use "hsluv-sass" as hsluv;

.example {
  color: hsluv.hsluv(23.2, 83.4%, 43.7%);
  background-color: hsluv.hpluv(250.4, 100%, 59.1%);
}

Emitted css:

.example {
  color: #a84c27;
  background-color: #738fc0;
}

When compiling with the Sass CLI, make sure node_modules is in the load path:

sass --load-path=node_modules styles.scss styles.css

Or use the Node package importer with a pkg: URL:

@use "pkg:hsluv-sass" as hsluv;

sass --pkg-importer=node styles.scss styles.css

Most build tools add node_modules to the Sass load path automatically.

API

hsluv.hsluv($hue, $saturation, $lightness) //=> color

Creates a sass color object in HSLuv color space.

hsluv.hpluv($hue, $saturation, $lightness) //=> color

Creates a sass color object in HPLuv color space.

hsluv.hsluva($hue, $saturation, $lightness, $alpha: 1) //=> color

Creates a sass color object in HSLuv color space with transparency.

hsluv.hpluva($hue, $saturation, $lightness, $alpha: 1) //=> color

Creates a sass color object in HPLuv color space with transparency.

Parameters

• $hue — The hue of the color. A number between 0 and 360 degrees, inclusive.
• $saturation — The saturation of the color. Must be a number between 0% and 100%, inclusive.
• $lightness — The lightness of the color. Must be a number between 0% and 100%, inclusive.
• $alpha - The opacity of the color. Must be a number between 0 and 1, inclusive.

All functions support passing an HSL map directly and omitting the $saturation and $lightness parameters. If unitless, the h value must be in radians.

.example {
  color: hsluv.hsluv((h: 0.4049164, s: 83.4, l: 43.7));
  background-color: hsluv.hpluv((h: 4.3703044, s: 100, l: 59.1));
}

Migrating from v2

v3 drops @import support. Use @use with a namespace:

// v2
@import "hsluv-sass";
color: hsluv(23.2, 83.4%, 43.7%);

// v3
@use "hsluv-sass" as hsluv;
color: hsluv.hsluv(23.2, 83.4%, 43.7%);

Testing

Tested with True. Continuous integration tests against current Node.js LTS versions on multiple platforms.

You can locally test after installing npm dependencies. Just run npm test.

Support

Have a question or need help? Open an issue

License

This project is provided under the terms of the MIT License.

Original version by Cameron Little · Github · Twitter · CodePen