{"id":26166084,"url":"https://github.com/virtualvivek/hexalpha","last_synced_at":"2026-04-24T12:04:25.825Z","repository":{"id":113144035,"uuid":"239708989","full_name":"virtualvivek/HexAlpha","owner":"virtualvivek","description":"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 . ","archived":false,"fork":false,"pushed_at":"2020-12-31T17:46:51.000Z","size":69,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T06:04:09.167Z","etag":null,"topics":["alpha","alpha-in-hexadecimal-color","color-converter","color-scheme","converter","css","cssvariables","hexadecimal","hexadecimal-color","transparency"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/virtualvivek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-02-11T08:11:15.000Z","updated_at":"2020-12-31T17:46:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"f41a45f2-d429-400f-aeeb-db6aa6b3fd23","html_url":"https://github.com/virtualvivek/HexAlpha","commit_stats":{"total_commits":29,"total_committers":1,"mean_commits":29.0,"dds":0.0,"last_synced_commit":"5944a24288e615fe2b71126ec003275c364f96d7"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/virtualvivek/HexAlpha","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2FHexAlpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2FHexAlpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2FHexAlpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2FHexAlpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/virtualvivek","download_url":"https://codeload.github.com/virtualvivek/HexAlpha/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2FHexAlpha/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32222483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpha","alpha-in-hexadecimal-color","color-converter","color-scheme","converter","css","cssvariables","hexadecimal","hexadecimal-color","transparency"],"created_at":"2025-03-11T16:28:40.686Z","updated_at":"2026-04-24T12:04:25.808Z","avatar_url":"https://github.com/virtualvivek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003e \u003cimg src=\"preview/app_icon_title.png\" width=\"340\" /\u003e \u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\tA CSS library which provides opacity to Hexadecimal color values, it renders #hex color value to apply opacity at runtime\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n\t\n\u003ca href=\"https://www.google.com/search?q=web\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Platform-Web-yellow.svg?color=purple\"\n      alt=\"Web\" /\u003e\n  \u003c/a\u003e\n\n \u003ca href=\"https://github.com/virtualvivek/HexAlpha/blob/master/library/HexAlpha.js\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/size/virtualvivek/HexAlpha/library/HexAlpha.js?color=%2316ab9c\u0026label=Library%20Size\"\n      alt=\"Library Size\" /\u003e\n  \u003c/a\u003e\n  \n \u003ca href=\"https://github.com/virtualvivek/HexAlpha/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/vivekverma007/HexAlpha.svg?color=blue\"\n      alt=\"License: Apache\" /\u003e\n  \u003c/a\u003e\n  \n \u003ca href=\"https://github.com/virtualvivek/HexAlpha\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Release-v1.0-darklime.svg?style=flat\"\n      alt=\"Release\" /\u003e\n  \u003c/a\u003e\n  \n  \n \u003c/p\u003e\n\n\n## Usage\n\n1. From one `color variable to another` :\n\n\u003cimg align=\"left\" src=\"preview/app_preview_1.PNG\" width=\"260\" /\u003e\n\n\n```js\n\n​\n​\nHexAlphaTo('--App_Color','0.5','--Alpha_Color');\n​\n```\n---\n\n2. From a `Hexadecimal color to` a `color variable` :\n\n\u003cimg align=\"left\" src=\"preview/app_preview_2.PNG\" width=\"260\" /\u003e\n\n\n```js\n\n​\n​\nHexAlphaTo('#018574','0.7','--Alpha_Color2');\n​\n```\n---\n\n3. Assigning using `color variable` to a `js variable` :\n\n\u003cimg align=\"left\" src=\"preview/app_preview_3.PNG\" width=\"260\" /\u003e\n\n\n```js\n\n​\n​\nlet alphaColor = HexAlpha('--App_Color4','0.4');\ndocument.getElementById(\"Img4Alpha\").style.background=alphaColor;\n```\n---\n\n4. Assigning using `Hexadecimal color` to a `js variable` :\n\n\u003cimg align=\"left\" src=\"preview/app_preview_4.PNG\" width=\"260\" /\u003e\n\n\n```js\n\n​\n​\nlet alphaColor5 = HexAlpha('#C30052','0.5');\ndocument.getElementById(\"Img5Alpha\").style.background=alphaColor5;\n```\n\n​\n## How to start\n\n#### Install it\n\nInclude `library/HexAlpha.js` in your target html file.\n\n```html\n\u003cscript src='https://github.com/virtualvivek/HexAlpha/library/HexAlpha.js'\u003e\u003c/script\u003e\n```\n​\n## Documentation\n\n| Function                       | Results                    | Arguments                              | \n| :----------------------------- | :------------------------- | :------------------------------------- |\n| A. HexAlphaTo('Color1','Alpha','Color2'); |  Takes `Color1` apply `Alpha` and assign to `Color2` | 3 |\n| B. HexAlpha('Color2','Alpha'); |  Returns a `Hex Color` from `Color2` with an `Alpha` | 2 | \n\n---\n\n## A. about HexAlphaTo() :\n\n\n| HexAlphaTo(  `'Color1'`   ,   `'Alpha'`   ,   `'Color2'`  );|  \n| :---------------------------------------------------------- |\n\n#### A.1- `Color1` -\n\n\n\n| 'Color1'                        | Type                    | Example                                 | \n| :------------------------------ | :---------------------- | :-------------------------------------- |\n| :root { --Color; } |  Property variable var() | HexAlphaTo(`'--Color'`,'0.5','--Alpha_Color'); |\n| #16ab9c |  Hexadecimal Color | HexAlphaTo(`'#16ab9c'`,'0.7','--Alpha_Color'); |\n\n\n#### A.2- `Alpha` (transparency factor) -\n\n| 'Alpha'                        | Opacity | \n| :----------------------------- | :------ |\n| 1 |  100% |\n| 0.9 |  90% |\n| 0.8 |  80% |\n| .. |  ..% |\n| 0.1 |  10% |\n| 0 |  0% |\n\n#### A.3- `Color2` -\n\n| 'Color2'                        | Type                    | Example                          | \n| :------------------------------ | :---------------------- | :------------------------------- |\n| :root { --A_Color; } |  Property variable var() | HexAlphaTo('--Color','0.5',`'--A_Color'`); |\n\n\n---\n\n## B. about HexAlpha() :\n\n\n| HexAlpha(  `'Color'`   ,   `'Alpha'`  );|  \n| :--------------------------------------- |\n\n\n#### B.1- `Color` -\n\n| 'Color'                        | Type                    | Example          | \n| :------------------------------ | :---------------------- | :--------------- |\n| :root { --Color; } |  Property variable var() | HexAlpha(`'--Color'`,'0.5'); |\n| #16ab9c |  Hexadecimal Color | HexAlphaTo(`'#16ab9c'`,'0.7'); |\n\n\n#### B.2- `Alpha` (transparency factor) -\n\n| 'Alpha'                        | Opacity | \n| :----------------------------- | :------ |\n| 1 |  100% |\n| 0.9 |  90% |\n| 0.8 |  80% |\n| .. |  ..% |\n| 0.1 |  10% |\n| 0 |  0% |\n\n---\n\n### Browser Compatibility\n![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)\n--- | --- | --- | --- | --- |\nLatest ✔ | Latest ✔ | Latest ✔ | 9.1+ ✔ | Latest ✔ |\n\n\n## License\n\nHexAlpha Library is licensed under `MIT license`. View [license](https://github.com/virtualvivek/HexAlpha/blob/master/LICENSE).\u003cbr\u003e\nCopyright (c) 2020-21 `Vivek Verma .`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtualvivek%2Fhexalpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvirtualvivek%2Fhexalpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtualvivek%2Fhexalpha/lists"}