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...

[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.

[CoolZonee]

I mean I don't need to understand the color by reading the hex or hsl or anything else, I just want easy to develop, the hsl just bring so much trouble...

[sleeyax]

Skill issue tbh. HSL is by far more 'easy to develop' than hex. Grasp the basics of HSL and you'll never want to use hex again...

[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.