: How to know color percentage formula used in Adobe Xd? 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

@Caterina889

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.



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

Vote Up Vote Down

@Michele215

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.
www.javascripter.net/faq/hextorgb.htm
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!)

Vote Up Vote Down

@Annie732

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:



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.

Vote Up Vote Down