Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davealdon/hext
🌈 Get hex colors with transparency based on opacity percentage
https://github.com/davealdon/hext
code color colors hex rgb transparency
Last synced: 11 days ago
JSON representation
🌈 Get hex colors with transparency based on opacity percentage
- Host: GitHub
- URL: https://github.com/davealdon/hext
- Owner: DaveAldon
- License: mit
- Created: 2022-02-17T03:10:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-02-17T17:35:13.000Z (over 2 years ago)
- Last Synced: 2024-10-12T13:11:08.880Z (25 days ago)
- Topics: code, color, colors, hex, rgb, transparency
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@davealdon/hext
- Size: 83 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hext
[![NPM Version](https://img.shields.io/npm/v/@davealdon/hext.svg)](https://www.npmjs.com/package/@davealdon/hext)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)Get hex colors with transparency based on opacity percentage. *Wow!* **No more rgb mixed with hex!**
### Install
`npm install @davealdon/hext`
or
`yarn add @davealdon/hext`Then pass your hex color (string), and the percentage (number):
```ts
import { hext } from '@davealdon/hext';const hexColor = hext('#ff0000', 30);
console.log(hexColor); // #ff00004D
```This will output the color with the transparency code tacked onto the end. It's pretty simple!
### Additional API usage
There's are a couple more functions available to you that hext uses to output the whole color code:
| function | usage | description |
| ----------- | ----------- | ----------- |
| hext | `hext('#ff0000', 30) // #ff00004D` | Returns entire hex code with transparency |
| transparencyToHex | `transparencyToHex(30) // 4D` | Returns only the transparency code. Does not include hash |
| convertToSixDigitHex | `convertToSixDigitHex("ff0") // ffff00` | Converts a shorthand hex code and returns the full 6 character code. Does not include hash |