Menu
I have discovered
color: rgb(51, 51, 51);
and
color: #333333;
and
color: black; opacity: 0.8;
all produce equivalent shades of grey.
How can I generalize this?
In other words, given an arbitrary RGB or HEX color/shade of grey, how can I determine the equivalent value of opacity when color: black;?
Here is the Codepen Demo.
<style>
div {
font-family: sans-serif;
font-size: 48px;
margin: 20px;
padding: 60px;
}
.rgb {
color: rgb(51, 51, 51); /* given this value... */
}
.hex {
color: #333333; /* ...or given this value */
}
.opacity {
color: black;
opacity: 0.8; /* how can I determine this value? */
}
<style>
<body>
<div class="rgb">rgb(51, 51, 51)</div>
<div class="hex">hex #333333</div>
<div class="opacity">opacity 0.8</div>
</body>
625
You could use this Hextool site too. Use the RGBA. Fourth value is the opacity of that color.
Eg:-
rgba(51, 51, 51, 0.87)
87% Opacity
Hex Opacity Values
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
After facing a similar problem, I've built a tool to achieve that in your browser. You just have to input your hex color, and it will give you a rgba equivalent. Feel free to test it out ;)
https://aclarembeau.github.io/grayscale-to-opacity/
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
