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

Usage

Installation

npm install hsluv-sass

Example

Create demo.csss:

With @use:

@use "./node_modules/hsluv-sass" as hsluv;

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

With @import:

@import "./node_modules/hsluv-sass";

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

Compile:

$ npx sass demo.scss 

Emitted css:

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

API

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

Creates a sass color object in HSLuv color space.

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

Creates a sass color object in HPLuv color space.

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

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

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 function 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((h: 0.4049164, s: 83.4, l: 43.7));
  background-color: hpluv((h: 4.3703044, s: 100, l: 59.1));
}

Testing

Tested with True. Continuous integration tests againsts the last several version of node 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