Complete support of the hsl() and hsla() specs

[meduzen]

Hi!

hsl() and hsla() are very permissive. Here are all the formats allowed and their current support in this wonderful ❤️ ColorHighlight plugin.

Supported

.my-class {
  color: hsl(222, 28%, 84%) // unitless hue
  color: hsl(222deg, 28%, 84%) // hue in degrees
  color: hsla(222, 28%, 84%, .5) // opacity
}

Not supported

.my-class {

  /* hue formats in angles */

  color: hsl(3rad, 28%, 84%); // hue in radiants (rad)
  color: hsl(-21grad, 28%, 84%); // hue in degrees (grad)
  color: hsl(0.75turn, 28%, 84%, .5); // hue in turns (turn)

  /* opacity or absence of opacity: hsla() is an alias for hsl()  */

  color: hsl(222, 28%, 84%, .5); // hsl() accepts opacity
  color: hsla(222, 28%, 84%); // hsla() is valid without opacity

  /* space as separator */

  color: hsl(222 28% 84%); // coma isn’t the only valid separator
  color: hsla(222 28% 84% / .5); // when space is separator, opacity is behind `/`
}

I’d love if ColorHighlight could implement all of these. I have no Python knowledge, so unfortunately I can’t help with the implementation.

Resources

• colors in CSS
• hsl(a)
• angles

[stdedos]

This seems to help 12763d3