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?
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!)
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.
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.
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..
- Pure Color
- Pure Color with 40% Opacity (As per Your Designer)
- Pure Color Value Alternating to get nearest value.