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
• [x] 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.