Socket
Socket
Sign inDemoInstall

@rpearce/hex

Package Overview
Dependencies
0
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rpearce/hex


Version published
Maintainers
1
Created

Changelog

Source

[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

Readme

Source

hex

npm version bundlephobia size npm downloads All Contributors

Tiny, useful color functions.

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

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!

Keywords

FAQs

Last updated on 10 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc