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?
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.
First of all if you are using a web aplication you can simply assign the same transparency value using the alpha value.
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.
Then just set opacity to 100 and the color is the same as the wanted one.