Skip to content
Leave HSL(A) alone! A package enabling HSL to stay HSL in SCSS.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


HSL colors are awesome. Unfortunately, the SASS hsl() and hsla() functions converts the colors to RGB/RGBA format.

hsl.scss replaces the two SASS functions by two others, preserving HSL(A) color declarations.


  1. npm install hsl.scss pulls the package into your project.
  2. @import '~hsl.scss'; in a SCSS files make hsl() and hsla() available.


Write regular CSS, the syntax is exactly the same:

:root {

  // hsl()
  color: hsl(15deg, 100%, 50%);

  // separator: coma (`,`)
  --flashy-pink: hsl(15deg, 100%, 50%);

  // separator: space
  $flashy-pink: hsl(15deg 100% 50%);

  // hsl() accepts opacity as fourth parameter          👇
  --hue: 15deg;
  --transparent-flashy-pink: hsl(var(--hue), 100%, 50%, .7);

  // hsla()
  $transparent-flashy-pink: hsla(15deg, 100%, 50%, .7); 

  // hsla(): opacity after a slash (`/`) when separator is a space
  $transparent-flashy-pink: hsla(15deg 100% 50% / .7);

Before / after hsl.scss

Before: lot of issues. Now: no issues anymore.

Before: boring interpolation. Now: standard CSS.


There’s currently no test enforcing the validity of what is passed to hsl() and hsla(), like in CSS. They are passthrough function.

You can’t perform that action at this time.