postcss-plugin-hsluv

PostCSS plugin for HSLuv color model functions

• HSL vs HSLuv comparison
• Color spaces for Human Beings

HSL Lightness	HSLuv Lightness

---

Usage

npm install postcss-plugin-hsluv

postcss.config.js

module.exports = {
  plugins: {
    'postcss-plugin-hsluv': {}
  }
}

Example

Input

div {
  background: hsluv(120, 50%, 50%);
  color: hsluv(120, 50%, 85%);
}

Todo

• Transform to HSL instead of hex
• Support for alpha values
• Tests

Acknowledgements

Full credit for HSLuv color model and its design goes to hsluv/shluv and its maintainers. This postcss plugin merely uses the javascript implementation from the repository.