what is the reason behind adopting hsl instead of hex or rgb?

[raiyansarker]

I understand for some people out there, the color can be understood easily given their values. But the way this ui library is setup, it is hard to see colors in the editor if you are not that comfortable with hsl. On top of that, I believe some libraries doesn't have hsl support. Recently I tried using shadcn UI with framer motion and it seems that framer motion doesn't support hsl css variables, or at least as much as I tried to solve the issue.

So why not adopt something like rgb?

[IRediTOTO]

I have the same question. I don't understand when look at this code...

[Th1nhNg0]

Each color is defined using the HSL (Hue, Saturation, Lightness) color model. The HSL values allow you to adjust the colors in terms of human color perception more intuitively than RGB.
For example, --primary: 276, 86%, 57%; means:
Hue: 276 (which is around a purple shade),
Saturation: 86% (a very vibrant version of the hue),
Lightness: 57% (neither too dark nor too light, a medium brightness).

[tauren]

The issue in my opinion is lack of editor tooling. Devs are accustomed to seeing their color palette within their editors, which can be a massive time saver.

In VSCode, color values in CSS files are rendered in color. But due to the way these color variables are used within this framework, hsl(), rgb(), etc should be excluded. The plain HSL and RGB values are not colorized in our editors.

Also note that fractional values are not colorized either. It might be best to round these numbers when they are generated.

Does anyone know of an editor plugin that can render these strings in color? It probably wouldn't be too hard to adapt an existing plugin to support it.

Edit: fixed the image

[tauren]

Found one!
#215

Someone else had the same frustration and created a plugin:
https://marketplace.visualstudio.com/items?itemName=meouwu.css-var-color-decorator

[raiyansarker]

Looks good but I am not sure why it is not working in my project.

[moroya]

Looks good but I am not sure why it is not working in my project.

It is possible that the language setting is set to "PostCSS".
Adding "postcss" to "cssVarColorDecorator.supportedLanguages" made it work.

[tauren]

Looks good but I am not sure why it is not working in my project.

Yeah, I posted here too soon, before trying it out. I'm having the same problem you are:
#215 (comment)

[dzcpy]

IMO it's not the best practice. At least let users choose to use HSL or RGB. I've never used HSL and all the design files, color pickers are using RGB which makes it so tidous to convert RGB to HSL. and, for what?

[sleeyax]

The reasoning behind it is already explained in the theming section of the docs. It points to this article.