I'm a developer and my designer sent me an XD document. He used percentage for color variations. Now, I'm trying to grab the color percentage formula but without success yet.

How can I get the color percentage formula used in Adobe XD?

Alpha channel percentage slider on Color picker Alpha channel percentage slider on Color picker

Opacity percentage slider on Appearance section Opacity percentage slider on Appearance section

  • I am not sure if this could work: graphicdesign.stackexchange.com/questions/75417/… The premise is a bit diferent but could be the same case as a lighter color.
    – Rafael
    Commented Sep 14, 2017 at 3:58
  • 1
    Does the designer want opacity or not? If so you should just use the alpha when programming. If not, send it back to the designer and ask for color codes on all the color variations. They select the colors you codes the website. You just risk the designer saying it's the wrong colors when your done...
    – Anders
    Commented Dec 13, 2017 at 12:04

4 Answers 4


First of all if you are using a web aplication you can simply assign the same transparency value using the alpha value.

6FA298 to RGB would be R111G162B152. Of course we could calculate the HEX to RGB conversion, but here is a webpage that gives you a JavaScript code to convert it.


And now, for the 80% percentage simply use an alpha value

color: rgba (111,162,152,.8);

If you want a solid color take a look at this post: How to make a given color a bit darker or lighter?

The diference is that you need to define this diference between the value and the absolute white. This will give you tour starting 100% and a margin to lower its value.

For example R255G0B0 has a maximum diference to white of 255, the diference between 100% and 80% is 20% so the value is 255x(20/100) = 51

The 80% red would be R255G51B51

In your case

  • R 255-111 = 144x(20/100) Plus the original 111 = 139.8
  • G 255-162 = 93x(20/100) Plus the original 162 = 180.6
  • B 255-152 = 103x(20/100) Plus the original 152 = 172.6

The general formula would be

(255-x) [(100-%)/100]+x = y

  • x= the original value
  • % the percentage used

Of course this will only work asumming the background color is white.

(Dam. I love math!)


As a developer you just need that hex value (#414E5C).

This contains all the color percentage information.

If you are only given the HSBA values you can convert to hex with one of the online color conversion tools, or do it in the adobe color picker:

enter image description here

This shows HSB, RGB, CMYK and HEX. Enter any values and the others change.

Your second image looks like the transparency slider, how invisible the object should be.

  • Well, my designer used percentage bar for color variations. For example : our primary color is #378475. For button color, he used 80% of primary color which is #6FA298. Therefore, I'm trying to create a function which will get color hex code and percentage and returns the expected result. ATM, I'm not getting any formula to build this function. Hope you would understand my point. Commented Sep 14, 2017 at 0:44

Use the eyedropper next to the color. I have an updated version where the eyedropper is in the color panel, but the method is the same.

If you use the eyedrop tool on the color it will give you the HEX code for the wanted color.

enter image description here

Then just set opacity to 100 and the color is the same as the wanted one.

enter image description here


What You Should Actually DO : Ask The Designer

What other Options you can try...

1) Adobe XD has Plug-in Library which also includes "Copy CSS" Plugin. i.e : if you have two square with different color codes, select those square and Use Copy CSS plugin.

2) If you are using LESS/SASS dynamic preprocessor style sheet language and it's very convenient. In LESS you can use Color Functions i.e : alpha (according to % value of Main Color that Designer Given). In SASS it's almost same as LESS with alpha & Opacity Functions..

With HSLA value alteration I got some results. Image Shades


  1. Pure Color
  2. Pure Color with 40% Opacity (As per Your Designer)
  3. Pure Color Value Alternating to get nearest value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.