Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rpearce/hex

🎨 Hexadecimal color code & RGBa utility functions
https://github.com/rpearce/hex

hex hex-to-rgb hex-to-rgba hexadecimal hexadecimal-color rgb-to-hex rgba rgba-to-hex typescript

Last synced: 5 days ago
JSON representation

🎨 Hexadecimal color code & RGBa utility functions

Host: GitHub
URL: https://github.com/rpearce/hex
Owner: rpearce
License: unlicense
Created: 2019-01-10T19:20:05.000Z (almost 6 years ago)
Default Branch: main
Last Pushed: 2023-01-09T03:20:40.000Z (almost 2 years ago)
Last Synced: 2024-05-02T00:06:34.113Z (7 months ago)
Topics: hex, hex-to-rgb, hex-to-rgba, hexadecimal, hexadecimal-color, rgb-to-hex, rgba, rgba-to-hex, typescript
Language: TypeScript
Homepage:
Size: 1.13 MB
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # hex

[![npm version](https://img.shields.io/npm/v/@rpearce/hex.svg)](https://www.npmjs.com/package/@rpearce/hex) [![bundlephobia size](https://badgen.net/bundlephobia/minzip/@rpearce/hex)](https://bundlephobia.com/result?p=@rpearce/hex) [![npm downloads](https://img.shields.io/npm/dm/@rpearce/hex.svg)](https://www.npmjs.com/package/@rpearce/hex) [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg)](#contributors-)

Tiny, useful color functions.

This work is public domain ([LICENSE](./LICENSE)), so feel free to use whatever

you like.

## Links

* [Installation](#installation)

* [Usage](#usage)

  * [`blend`](#blend)

  * [`blendAlpha`](#blendalpha)

  * [`hexBlend`](#hexblend)

  * [`hexToRgba`](#hextorgba)

  * [`hexToRgbaCss`](#hextorgbacss)

  * [`parse`](#parse)

  * [`parseRgba`](#parsergba)

  * [`rgbaCssBlend`](#rgbacssblend)

  * [`rgbaCssToHex`](#rgbacsstohex)

  * [`rgbaToHex`](#rgbatohex)

  * [`rgbaToRgbaCss`](#rgbatorgbacss)

## Installation

```sh

npm i --save @rpearce/hex

```

This library's compilation target is `ES2022`, but it only uses features from

`ES2017` and below. If you find you need to support older environments, run this

project through your build system.

## Usage

```typescript

import { rgbaToHex } from '@rpearce/hex'

rgbaToHex([]) // '#000000ff'

rgbaToHex([ 120, 55, 168 ]) // '#7837a8ff'

rgbaToHex([ 120, 55, 168, 1 ]) // '#7837a8ff'

rgbaToHex([ 120, 55, 168, 0.5 ]) // '#7837a87f'

rgbaToHex([ 120, 55, 168, 0 ]) // '#7837a800'

```

### `blend`

Blend together two R, G or B (red, green or blue) color numbers.

```typescript

interface Blend {

  (x: number, y: number, n?: number): number

}

```

```typescript

import { blend } from '@rpearce/hex'

blend(120, 255, 0) // 120

blend(120, 255, 1) // 255

blend(120, 255, 0.7) // 223

blend(120, 0, 0.7) // 66

blend(120, 127, 0.5) // 124

```

### `blendAlpha`

Blend together two alpha values.

```typescript

interface BlendAlpha {

  (x: number, y: number, n?: number): number

}

```

```typescript

import { blendAlpha } from '@rpearce/hex'

blendAlpha(0.1, 0.9, 0) // 0.1

blendAlpha(0.1, 0.9, 1) // 0.9

blendAlpha(0.1, 1, 0.7) // 0.73

blendAlpha(0.4, 0, 0.7) // 0.12

blendAlpha(0, 0.5, 0.5) // 0.25

blendAlpha(0, 1, 0.5) // 0.5

```

### `hexBlend`

Blend two hexadecimal color values together, shifting from one color to the next

via a fraction between `0` and `1`. Hexadecimal equivalent to `rgbaCssBlend`.

```typescript

interface HexBlend {

  (hexA: string, hexB: string, n: number): string

}

```

```typescript

import { hexBlend } from '@rpearce/hex'

hexBlend('#7837A8', '#FFF', 0) // '#7837a8'

hexBlend('#7837A8', '#FFF', 1) // '#ffffff'

hexBlend('#7837A8', '#FFF', 0.7) // '#dfd7e8'

hexBlend('#7837A8', '#000', 0.7) // '#421e5c'

hexBlend('#7837A8', '#ff6602', 0.5) // '#c75277'

hexBlend('#7837A880', '#FFF', 0.7) // '#dfd7e8d8'

```

### `hexToRgba`

Convert hexadecimal color codes to an array of RGBa values.

```typescript

interface HexToRgba {

  (hex: string): [number, number, number, number]

}

```

```typescript

import { hexToRgba } from '@rpearce/hex'

// hex-8

hexToRgba('0099ff80') // [ 0, 153, 255, 0.5 ]

hexToRgba('#0099ff80') // [ 0, 153, 255, 0.5 ]

// hex-6

hexToRgba('0099ff') // [ 0, 153, 255, 1 ]

hexToRgba('#0099ff') // [ 0, 153, 255, 1 ]

// hex-4

hexToRgba('09f9') // [ 0, 153, 255, 0.6 ]

hexToRgba('#09f9') // [ 0, 153, 255, 0.6 ]

// hex-3

hexToRgba('09f') // [ 0, 153, 255, 1 ]

hexToRgba('#09f') // [ 0, 153, 255, 1 ]

```

### `hexToRgbaCss`

Convert hexadecimal color codes to `rgba()`.

```typescript

interface HexToRgbaCss {

  (hex: string, alpha?: number): string

}

```

```typescript

import { hexToRgbaCss } from '@rpearce/hex'

// hex-8

hexToRgbaCss('0099ff80') // 'rgba(0,153,255,0.5)'

hexToRgbaCss('#0099ff80') // 'rgba(0,153,255,0.5)'

hexToRgbaCss('#0099ff80', 0.3) // 'rgba(0,153,255,0.3)'

// hex-6

hexToRgbaCss('0099ff') // 'rgba(0,153,255,1)'

hexToRgbaCss('#0099ff') // 'rgba(0,153,255,1)'

hexToRgbaCss('#0099ff', 0.2) // 'rgba(0,153,255,0.2)'

// hex-4

hexToRgbaCss('09f9') // 'rgba(0,153,255,0.6)'

hexToRgbaCss('#09f9') // 'rgba(0,153,255,0.6)'

hexToRgbaCss('#09f9', 0.12) // 'rgba(0,153,255,0.12)'

// hex-3

hexToRgbaCss('09f') // 'rgba(0,153,255,1)'

hexToRgbaCss('#09f') // 'rgba(0,153,255,1)'

hexToRgbaCss('#09f', 0.45) // 'rgba(0,153,255,0.45)'

```

### `parse`

Parse various forms of hexadecimal colors.

```typescript

interface Parse {

  (hex?: string): string

}

```

```typescript

import { parse } from '@rpearce/hex'

// hex-8

parse('0099ff80') // '0099ff80'

parse('#0099ff80') // '0099ff80'

// hex-6

parse('0099ff') // '0099ff'

parse('#0099ff') // '0099ff'

// hex-4

parse('09f8') // '0099ff88'

parse('#09f8') // '0099ff88'

// hex-3

parse('09f') // '0099ff'

parse('#09f') // '0099ff'

```

### `parseRgba`

```typescript

interface ParseRgba {

  (rgba?: string): [number, number, number, number]

}

```

```typescript

import { parseRgba } from '@rpearce/hex'

parseRgba('') // [ 0, 0, 0, 1 ]

parseRgba('rgb(120, 55, 168)') // [ 120, 55, 168, 1 ]

parseRgba('rgba(120, 55, 168, 1)') // [ 120, 55, 168, 1 ]

parseRgba('rgba(120, 55, 168, 0.3)') // [ 120, 55, 168, 0.3 ]

```

### `rgbaCssBlend`

Blend two `rgba()` color values together, shifting from one color to the next

via a fraction between `0` and `1`. RGBa equivalent to `hexBlend`.

```typescript

interface RgbaCssBlend {

  (rgbaA: string, rgbaB: string, alpha: number): string

}

```

```typescript

import { rgbaCssBlend } from '@rpearce/hex'

rgbaCssBlend('rgba(120, 55, 168, 1)', 'rgba(255, 255, 255, 1)', 0.7) // 'rgba(223,215,232,1)'

rgbaCssBlend('rgba(120, 55, 168, 1)', 'rgba(0, 0, 0, 1)', 0.7) // 'rgba(66,30,92,1)'

rgbaCssBlend('rgba(120, 55, 168, 1)', 'rgba(255, 102, 2, 1)', 0.5) // 'rgba(199,82,119,1)'

```

### `rgbaCssToHex`

Convert `rgba()` to hexadecimal.

```typescript

interface RgbaCssToHex {

  (rgba?: string): string

}

```

```typescript

import { rgbaCssToHex } from '@rpearce/hex'

rgbaCssToHex('') // '#000000ff'

rgbaCssToHex('rgba(120, 55, 168, 1)') // '#7837a8ff'

rgbaCssToHex('rgba(120, 55, 168, 0.5)') // '#7837a87f'

rgbaCssToHex('rgba(120, 55, 168, 0.3)') // '#7837a84c'

```

### `rgbaToHex`

Convert an array of RGBa values to hexadecimal.

```typescript

interface RgbaToHex {

  (rgba?: [number?, number?, number?, number?] | []): string

}

```

```typescript

import { rgbaToHex } from '@rpearce/hex'

rgbaToHex([]) // '#000000ff'

rgbaToHex([ 120, 55, 168 ]) // '#7837a8ff'

rgbaToHex([ 120, 55, 168, 1 ]) // '#7837a8ff'

rgbaToHex([ 120, 55, 168, 0.5 ]) // '#7837a87f'

rgbaToHex([ 120, 55, 168, 0 ]) // '#7837a800'

```

### `rgbaToRgbaCss`

Convert an array of RGBa values to `rgba()`.

```typescript

interface RgbaToRgbaCss {

  (rgba?: [number?, number?, number?, number?] | []): string

}

```

```typescript

import { rgbaToRgbaCss } from '@rpearce/hex'

rgbaToRgbaCss([]) // 'rgba(0,0,0,1)'

rgbaToRgbaCss([  120, 55, 168  ]) // 'rgba(120,55,168,1)'

rgbaToRgbaCss([  120, 55, 168, 1 ]) // 'rgba(120,55,168,1)'

rgbaToRgbaCss([  120, 55, 168, 0.3  ]) // 'rgba(120,55,168,0.3)'

```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    
_{Robert Pearce}
💻 📖 💡 🤔 ⚠️

  

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!