HSL / HSLA color value
Hi there,
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.
Best.
17 comments
-
Greg
commented
Hey,
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.
-
Clayton
commented
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
-
Anonymous
commented
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.
-
James
commented
100% necessary - HSB is an outdated colour form, so much so that even since 1997 there have been calls to abandon it!
(see: http://poynton.ca/notes/colour_and_gamma/ColorFAQ.html#RTFToC36)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
-
Anonymous
commented
Need HSL asap
-
Evan Richards
commented
This would be very helpful
-
Robert Thompson
commented
This needs to be a thing and fast.
-
Murray
commented
Yes please!
-
Anonymous
commented
I really need this as well.
-
Cyril
commented
Hell yeah! Why is HSL still not supported? It's really important for web design. Please add it quickly.
-
Naazira
commented
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... :(
