Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 01 : Design mode

Categories

(thinking…)

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.

132 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Naruhito Kubota shared this idea  ·   ·  Report…  ·  Admin →

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Vlad Fratila commented  ·   ·  Report

    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.

  • Greg commented  ·   ·  Report

    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!

  • Alexander Sebastian commented  ·   ·  Report

    Don't believe this has not been added yet... I have page builders that have this functionality.

  • Clayton commented  ·   ·  Report

    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.

  • Lucelia Foote commented  ·   ·  Report

    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  ·   ·  Report

    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  ·   ·  Report

    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.

  • Cyril commented  ·   ·  Report

    Hell yeah! Why is HSL still not supported? It's really important for web design. Please add it quickly.

  • Naazira commented  ·   ·  Report

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