HSL / HSLA color value
I usually use hsl color in CSS.
Thanks to awesome Design Spec, It's piece of cake to get the hsl value.
But the problem is the way to reflect the changes to XD files.
Let me tell you a story.
A designer publish Design Spec, which use RGB(240, 156, 30) as their site's brand color.
Then, a coder get the color as hsla(36, 87%, 52%, 1) and make a mockup.
Then, members review it and the product owner say,
"The brand color seems less attractive than I expected..."
Awful, why he didn't point out it before, at least when he reviewed XD prototype? But this kind of things are very familiar for us.
Then, the coder start to adjust it with inspector and say
"Okay how about this one? I made it lighter."
"Awesome! This is it!"
So, they change their brand color from hsla(36, 87%, 52%, 1) to hsla(36, 87%, 62%, 1) and designer update the XD documents.
But who convert hsla to rgba?
This kind of problem make us bothered and easily break the color consistency, further more the site consistency.
That's why I wanna directly set the hsl value in XD.
Александр Укштейн commented
any progress with HSL/HSLA?
Vlad Fratila commented
This is one of the main issues with XD when it comes to UI design for the web. Tons of frontend devs / UI designers will simply move away from XD. Sorry, but small things make or break it. Figma and Sketch have this, which makes them a better fit for web work, period.
I've just found out you can get the HSLA values by opening the development share link.
1. Go to the "Share" tab
2. Change the view setting to "Development"
3. Open the link that's generated
4. Open the code panel on the right
4. Click on your coloured element that you want the HSLA value for
5. In the appearance area you can change the value from HEX to HSLA
6. You can then copy the HSLA colours from there 🙌🏻
Hope that helps!
Martin Clément commented
Still waiting. This is the feature I miss the most!
Alexander Sebastian commented
Don't believe this has not been added yet... I have page builders that have this functionality.
Adding this would make my life so much easier. If XD added HSL along with a way to easily copy the colors to the clipboard, then it would basically go from great to perfect.
Ellen Escarcega commented
NEED VERY BADLY
very important feature!
Lucelia Foote commented
Why is HSL not already implemented? This is a UI design tool, and web is a huge part of that. Web uses HSL.
100% necessary - HSB is an outdated colour form, so much so that even since 1997 there have been calls to abandon it!
Please add this, I'm in the same boat as Stacey Lane in having to switch to a browser to pick new colours, which is extremely frustrating when XD has a colour list right there in the app.
Stacey Lane commented
The HSL color model is more similar to color mixing in the real world and more accurately reflects what is happening with the color. Please include this. As a designer, it's incredibly frustrating to have to do the bulk of my work in the browser when considering new colors. Adding HSL to XD would improve my process and workflow - it would also put XD ahead of the competition as no other visual editors have HSL color.
[Deleted User] commented
Yes, we need HSL
Need HSL asap
Evan Richards commented
This would be very helpful
Robert Thompson commented
This needs to be a thing and fast.
I really need this as well.
Hell yeah! Why is HSL still not supported? It's really important for web design. Please add it quickly.
I pick colours in HSL too. I also have a guide and formula for non-designers to pick colors, with or without code, in HSL that is dynamic but is consistent with our design system.
I don't use HSB values because we can't define HSB values on the web... We can only code hsla in css.
Plus HSB and HSL is different. It's noticeably different in the brighter and lighter scales which violates our brand colour guidelines.
And it takes too much time to repeatedly convert HSL colours to RGB in XD... :(