A CSS library which provides opacity to Hexadecimal color values, it renders #hex color value to apply opacity at runtime
- From one
color variable to another
:
HexAlphaTo('--App_Color','0.5','--Alpha_Color');
- From a
Hexadecimal color to
acolor variable
:
HexAlphaTo('#018574','0.7','--Alpha_Color2');
- Assigning using
color variable
to ajs variable
:
let alphaColor = HexAlpha('--App_Color4','0.4');
document.getElementById("Img4Alpha").style.background=alphaColor;
- Assigning using
Hexadecimal color
to ajs variable
:
let alphaColor5 = HexAlpha('#C30052','0.5');
document.getElementById("Img5Alpha").style.background=alphaColor5;
Include library/HexAlpha.js
in your target html file.
<script src='https://github.com/virtualvivek/HexAlpha/library/HexAlpha.js'></script>
Function | Results | Arguments |
---|---|---|
A. HexAlphaTo('Color1','Alpha','Color2'); | Takes Color1 apply Alpha and assign to Color2 |
3 |
B. HexAlpha('Color2','Alpha'); | Returns a Hex Color from Color2 with an Alpha |
2 |
HexAlphaTo( 'Color1' , 'Alpha' , 'Color2' ); |
---|
'Color1' | Type | Example |
---|---|---|
:root { --Color; } | Property variable var() | HexAlphaTo('--Color' ,'0.5','--Alpha_Color'); |
#16ab9c | Hexadecimal Color | HexAlphaTo('#16ab9c' ,'0.7','--Alpha_Color'); |
'Alpha' | Opacity |
---|---|
1 | 100% |
0.9 | 90% |
0.8 | 80% |
.. | ..% |
0.1 | 10% |
0 | 0% |
'Color2' | Type | Example |
---|---|---|
:root { --A_Color; } | Property variable var() | HexAlphaTo('--Color','0.5','--A_Color' ); |
HexAlpha( 'Color' , 'Alpha' ); |
---|
'Color' | Type | Example |
---|---|---|
:root { --Color; } | Property variable var() | HexAlpha('--Color' ,'0.5'); |
#16ab9c | Hexadecimal Color | HexAlphaTo('#16ab9c' ,'0.7'); |
'Alpha' | Opacity |
---|---|
1 | 100% |
0.9 | 90% |
0.8 | 80% |
.. | ..% |
0.1 | 10% |
0 | 0% |
Latest ✔ | Latest ✔ | Latest ✔ | 9.1+ ✔ | Latest ✔ |
HexAlpha Library is licensed under MIT license
. View license.
Copyright (c) 2020-21 Vivek Verma .