https://github.com/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 .
https://github.com/virtualvivek/hexalpha

alpha alpha-in-hexadecimal-color color-converter color-scheme converter css cssvariables hexadecimal hexadecimal-color transparency

Last synced: 3 months ago
JSON representation

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 .

• Host: GitHub
• URL: https://github.com/virtualvivek/hexalpha
• Owner: virtualvivek
• License: mit
• Created: 2020-02-11T08:11:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-12-31T17:46:51.000Z (over 4 years ago)
• Last Synced: 2024-04-13T10:08:49.054Z (about 1 year ago)
• Topics: alpha, alpha-in-hexadecimal-color, color-converter, color-scheme, converter, css, cssvariables, hexadecimal, hexadecimal-color, transparency
• Language: JavaScript
• Homepage:
• Size: 67.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
  



	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` :



```js

​

​

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

​

```

---

2. From a `Hexadecimal color to` a `color variable` :



```js

​

​

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

​

```

---

3. Assigning using `color variable` to a `js variable` :



```js

​

​

let alphaColor = HexAlpha('--App_Color4','0.4');

document.getElementById("Img4Alpha").style.background=alphaColor;

```

---

4. Assigning using `Hexadecimal color` to a `js variable` :



```js

​

​

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.

```html

```

​

## 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](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)

--- | --- | --- | --- | --- |

Latest ✔ | Latest ✔ | Latest ✔ | 9.1+ ✔ | Latest ✔ |

## License

HexAlpha Library is licensed under `MIT license`. View [license](https://github.com/virtualvivek/HexAlpha/blob/master/LICENSE).


Copyright (c) 2020-21 `Vivek Verma .`