virtualvivek/HexAlpha

This Light weight library provides opacity to #Hexadecimal Color values dynamically, written in pure javascript.It takes hexadecimal color as both a hex value or a css property variable with an alpha ie 0-9 value and provides alpha transparent color .

A CSS library which provides opacity to Hexadecimal color values, it renders #hex color value to apply opacity at runtime

Usage

1. From one color variable to another :

​
​
HexAlphaTo('--App_Color','0.5','--Alpha_Color');
​

---

2. From a Hexadecimal color to a color variable :

​
​
HexAlphaTo('#018574','0.7','--Alpha_Color2');
​

---

3. Assigning using color variable to a js variable :

​
​
let alphaColor = HexAlpha('--App_Color4','0.4');
document.getElementById("Img4Alpha").style.background=alphaColor;

---

4. Assigning using Hexadecimal color to a js variable :

​
​
let alphaColor5 = HexAlpha('#C30052','0.5');
document.getElementById("Img5Alpha").style.background=alphaColor5;

​

How to start

Install it

Include library/HexAlpha.js in your target html file.

<script src='https://github.com/virtualvivek/HexAlpha/library/HexAlpha.js'></script>

​

Documentation

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

---

A. about HexAlphaTo() :

HexAlphaTo( 'Color1' , 'Alpha' , 'Color2' );

A.1- Color1 -

'Color1'	Type	Example
:root { --Color; }	Property variable var()	HexAlphaTo('--Color','0.5','--Alpha_Color');
#16ab9c	Hexadecimal Color	HexAlphaTo('#16ab9c','0.7','--Alpha_Color');

A.2- Alpha (transparency factor) -

'Alpha'	Opacity
1	100%
0.9	90%
0.8	80%
..	..%
0.1	10%
0	0%

A.3- Color2 -

'Color2'	Type	Example
:root { --A_Color; }	Property variable var()	HexAlphaTo('--Color','0.5','--A_Color');

---

B. about HexAlpha() :

HexAlpha( 'Color' , 'Alpha' );

B.1- Color -

'Color'	Type	Example
:root { --Color; }	Property variable var()	HexAlpha('--Color','0.5');
#16ab9c	Hexadecimal Color	HexAlphaTo('#16ab9c','0.7');

B.2- Alpha (transparency factor) -

'Alpha'	Opacity
1	100%
0.9	90%
0.8	80%
..	..%
0.1	10%
0	0%

---

Browser Compatibility

Latest ✔	Latest ✔	Latest ✔	9.1+ ✔	Latest ✔

License

HexAlpha Library is licensed under MIT license. View license.
Copyright (c) 2020-21 Vivek Verma .