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 couldn't get any success yet. How can I know color percentage formula used in Adobe Xd?

percentage used for color variations percentage used for color variations

color percentage bar on appearance section color percentage bar 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 Sep 14 '17 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 Dec 13 '17 at 12:04

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. – John Mcculley Sep 14 '17 at 0:44

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!)

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

Your Answer


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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