Skip to content

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 .

License

Notifications You must be signed in to change notification settings

virtualvivek/HexAlpha

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Web Library Size License: Apache Release

Usage

  1. From one color variable to another :

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

  1. From a Hexadecimal color to a color variable :

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

  1. Assigning using color variable to a js variable :

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

  1. 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

Chrome Firefox Edge Safari Opera
Latest ✔ Latest ✔ Latest ✔ 9.1+ ✔ Latest ✔

License

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

About

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 .

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published