hsluv-sass

Sass implementation of HSLuv (revision 4)

Showing:

Popularity

Downloads/wk

3

GitHub Stars

31

Maintenance

Last Commit

3mos ago

Contributors

5

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

HSLuv Sass

Build Status Dependency Status devDependency Status Package Version

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100