hex

Tiny, useful color functions.

This work is public domain (LICENSE), so feel free to use whatever you like.

Links

• Installation
• Usage
  • blend
  • blendAlpha
  • hexBlend
  • hexToRgba
  • hexToRgbaCss
  • parse
  • parseRgba
  • rgbaCssBlend
  • rgbaCssToHex
  • rgbaToHex
  • rgbaToRgbaCss

Installation

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

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.

interface Blend {
  (x: number, y: number, n?: number): number
}

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.

interface BlendAlpha {
  (x: number, y: number, n?: number): number
}

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.

interface HexBlend {
  (hexA: string, hexB: string, n: number): string
}

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.

interface HexToRgba {
  (hex: string): [number, number, number, number]
}

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().

interface HexToRgbaCss {
  (hex: string, alpha?: number): string
}

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.

interface Parse {
  (hex?: string): string
}

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

interface ParseRgba {
  (rgba?: string): [number, number, number, number]
}

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.

interface RgbaCssBlend {
  (rgbaA: string, rgbaB: string, alpha: number): string
}

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.

interface RgbaCssToHex {
  (rgba?: string): string
}

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.

interface RgbaToHex {
  (rgba?: [number?, number?, number?, number?] | []): string
}

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().

interface RgbaToRgbaCss {
  (rgba?: [number?, number?, number?, number?] | []): string
}

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

Robert Pearce 💻 📖 💡 🤔 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[2.0.0] - 2022-08-10

Changed

• LICENSE is now Unlicense (public domain)
• ESModule-only project and build now

Removed

• Removed CJS & UMD support
• Removed dependency on tslib

[1.0.3] - 2022-08-10

Fixed

• Investigate rgbaToHex function might be a little bit off in some cases (#23)

[1.0.2] - 2022-05-23

Fixed

• fixes bug with hexToRgbaCss when passed an alpha of 0

[1.0.1] - 2020-08-29

Fixed

• tslib wasn't included in dependencies
• function types weren't being exported

[1.0.0] - 2020-03-15

Added

• typescript support
• other bundles (minified CJS, minified UMD)

Changed

• license from ISC to BSD-3

Fixed

• security vulnerabilities from dependencies

Removed

• browser entry point

[0.3.1] - 2019-12-29

Changed

• upgrade yarn.lock for security issues

[0.3.0] - 2019-12-29

Changed

• different main and module build outputs
• now including umd build
• now exposing all modules in output for individual importing
• security fixes
• better README docs

[0.2.4] - 2019-09-10

Changed

• security fixes for mixin-deep and lodash.merge

[0.2.3] - 2019-09-09

Changed

• bumped devDependencies & better dev tooling
• using dist/ instead of src/ now for build output
• now building with rollup
• now building commonjs & ESM files in dist/ folder

[0.2.2] - 2019-03-04

Fixed

• bumped devDependencies
• moved @babel-polyfill to devDependencies
• set "sideEffects": false in package.json

[0.2.1] - 2019-01-21

Fixed

• Updated package.json package info. Nothing to see here...

[0.2.0] - 2019-01-21

Added

Added the following functions:

• blend
• blendAlpha
• hexBlend
• parseRgba
• rgbaCssBlend
• rgbaCssToHex
• rgbaToHex
• rgbaToRgbaCss

[0.1.0] - 2019-01-11

Added

• Added all the things