Package Exports

@uiw/color-convert
@uiw/color-convert/cjs/index.js
@uiw/color-convert/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/color-convert) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Color Convert

Install

npm i @uiw/color-convert

Usage

import { hsvaToHsla } from '@uiw/color-convert'

API

`rgbaToHsva`

rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }

`hexToHsva`

hexToHsva("#ffffff") //=> { h: 0, s: 0, v: 100, a: 1 }

`hsvaToHex`

hsvaToHex({ h: 0, s: 0, v: 100, a: 1 }) // => "#ffffff"

`hsvaToHexa`

hsvaToHexa({ h: 0, s: 0, v: 30, a: 0.4875 }) // => '#4d4d4d7c'
hsvaToHexa({ h: 0, s: 0, v: 100, a: 1 }) // => '#ffffffff'
hsvaToHexa({ h: 60, s: 100, v: 100, a: 1 }) // => '#ffff00ff'

`hsvaToHsla`

hsvaToHsla({ h: 0, s: 0, v: 100, a: 1 }) // => { h: 0, s: 0, l: 100, a: 1 }

`hslaToHsva`

hslaToHsva({ h: 0, s: 100, l: 50, a: 1 }) // => { h: 0, s: 100, v: 100, a: 1 }
hslaToHsva({ h: 0, s: 0, l: 0, a: 1 }) // => { h: 0, s: 0, v: 0, a: 1 }
hslaToHsva({ h: 200, s: 25, l: 32, a: 1 }) // => { h: 200, s: 40, v: 40, a: 1 }

`hslStringToHsla`

hslStringToHsla('')
// => { h: undefined, s: undefined, l: undefined, a: undefined }
hslStringToHsla('hsl(50, 10%, 10%)')
// => { h: 50, s: 10, l: 10 }
hslStringToHsla('hsl(49deg 90% 65% / 39%)')
// => { h: 49, s: 90, l: 65, a: 39 }

`hsvaToHslString`

hsvaToHslString({ h: 200, s: 40, v: 40, a: 1 }) // => 'hsl(200, 25%, 32%)'
hsvaToHslString({ h: 0, s: 0, v: 0, a: 1 }) // => 'hsl(0, 0%, 0%)'

`hslStringToHsva`

hslStringToHsva('hsl(0, 0%, 100%)') // => { h: 0, s: 0, v: 100, a: 1 }

`hslaStringToHsva`

hslaStringToHsva('hsla(0deg, 0%, 0%, 0.5)') // => { h: 0, s: 0, v: 0, a: 0.5 }
hslaStringToHsva('hsla(200, 25%, 32%, 1)') // => { h: 200, s: 40, v: 40, a: 1 }
hslaStringToHsva('hsla(.5turn 25% 32% / 50%)') // => { h: 180, s: 40, v: 40, a: 0.5 }

`hsvaToRgba`

hsvaToRgba({ h: 0, s: 0, v: 100, a: 1 }) //=> { r: 255, g: 255, b: 255, a: 1 }
hsvaToRgba({ h: 128, s: 0, v: 100, a: 1 }) //=> { r: 255, g: 255, b: 255, a: 1 }
hsvaToRgba({ h: 0, s: 100, v: 100, a: 0.567 }) //=> { r: 255, g: 0, b: 0, a: 0.567 }

`rgbaToHsva`

rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) // => { h: 0, s: 0, v: 100, a: 1 }

`rgbStringToHsva`

rgbStringToHsva('rgb(255, 255, 255)') // => { h: 0, s: 0, v: 100, a: 1 }

`hsvaToRgbString`

hsvaToRgbString({ h: 0, s: 0, v: 100, a: 1 }) // => rgb(255, 255, 255)

`hsvaToRgbaString`

hsvaToRgbaString({ h: 200, s: 40, v: 40, a: 0.5 }) // => rgba(61, 88, 102, 0.5)

`rgbaStringToHsva`

rgbaStringToHsva('rgba(61, 88, 102, 0.5)') // => { h: 200, s: 40, v: 40, a: 0.5 }

`hsvaToHsvaString`

hsvaToHsvaString({ h: 0, s: 0, v: 100, a: 1 }) // => hsva(0, 0%, 100%, 1)

`hsvaToHsvString`

hsvaToHsvString({ h: 0, s: 0, v: 100, a: 1 }) // => hsv(0, 0%, 100%)

`hsvStringToHsva`

hsvStringToHsva('hsv(0, 11%, 0%)') //=> { h: 0, s: 11, v: 0, a: 1, }
hsvStringToHsva('hsv(90deg 20% 10%)') //=> { h: 90, s: 20, v: 10, a: 1, }
hsvStringToHsva('hsv(100grad 20% 10%)') //=> { h: 90, s: 20, v: 10, a: 1, }

`rgbaToRgb`

rgbaToRgb({ r: 0, g: 0, b: 0, a: 1 }) //=> { r: 0, g: 0, b: 0 }

`hslaToHsl`

hslaToHsl({ h: 0, s: 0, l: 0, a: 1 }) //=> { h: 0, s: 0, l: 0 }

`hsvaToHsv`

hsvaToHsv({ h: 0, s: 0, v: 0, a: 1 }) //=> { h: 0, s: 0, v: 0 }

`equalHex`

equalHex("#8c0dba", "#8c0dba") // => true

`equalColorObjects`

equalColorObjects({ h: 0, s: 0, v: 5, a: 0.5 }, { h: 0, s: 0, v: 5, a: 0.5 }) // => true

`equalColorString`

equalColorString("rgb(0,0,0)", "rgb(0, 0, 0)") //=> true

`hsvaToHslaString`

hsvaToHslaString({ h: 200, s: 40, v: 40, a: 0.5 }) //=> hsla(200, 25%, 32%, 0.5)

`validHex`

validHex("#8c0dba") //=> true

`rgbaToHexa`

rgbaToHexa({ b: 26, g: 2, r: 209, a: 1 }) // => '#d1021aff'

`color`

const { rgb, rgba, hsl, hsv, hsla, hsva } = color('#d1021a');
// rgb   => { b: 26, g: 2, r: 209, }
// rgba  => { b: 26, g: 2, r: 209, a: 1 }
// hsl   => { h: 353.04347826086956, l: 41.37254901960784, s: 98.10426540284361 }
// hsla  => { h: 353.04347826086956, l: 41.37254901960784, s: 98.10426540284361, a: 1 }
// hsv   => { h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548 }
// hsva  => { h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548, a: 1 }
// hex   => '#d1021a'
// hexa  => '#d1021aff'

type

export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
export declare const equalColorString: (first: string, second: string) => boolean;
export declare const equalHex: (first: string, second: string) => boolean;
export declare const validHex: (hex: string) => boolean;
export declare const getContrastingColor: (str: string | HsvaColor) => "#fff" | "#000";
export declare type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
export declare type ColorResult = {
  rgb: RgbColor;
  hsl: HslColor;
  hsv: HsvColor;
  rgba: RgbaColor;
  hsla: HslaColor;
  hsva: HsvaColor;
  hex: string;
  hexa: string;
};
export interface HsvColor {
  h: number;
  s: number;
  v: number;
}
export interface HsvaColor extends HsvColor {
  a: number;
}
export interface RgbColor {
  r: number;
  g: number;
  b: number;
}
export interface RgbaColor extends RgbColor {
  a: number;
}
/**
 * ```js
 * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
 * ```
 */
export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
export declare const hsvaToHslString: (hsva: HsvaColor) => string;
export declare const hsvaToHsvString: ({ h, s, v }: HsvaColor) => string;
export declare const hsvaToHsvaString: ({ h, s, v, a }: HsvaColor) => string;
export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
export declare const hslStringToHsla: (str: string) => HslaColor;
export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
export declare const hslStringToHsva: (hslString: string) => HsvaColor;
export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
export interface HslColor {
  h: number;
  s: number;
  l: number;
}
export interface HslaColor extends HslColor {
  a: number;
}
export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
export declare const parseHue: (value: string, unit?: string) => number;
export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
/** Converts an RGBA color plus alpha transparency to hex */
export declare const rgbaToHex: ({ r, g, b }: RgbaColor) => string;
export declare const rgbaToHexa: ({ r, g, b, a }: RgbaColor) => string;
export declare const hexToHsva: (hex: string) => HsvaColor;
export declare const hexToRgba: (hex: string) => RgbaColor;
/**
 * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
 * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
 */
export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
export declare const hsvaToHex: (hsva: HsvaColor) => string;
export declare const hsvaToHexa: (hsva: HsvaColor) => string;
export declare const hsvaToHsv: ({ h, s, v }: HsvaColor) => HsvColor;
export declare const color: (str: string | HsvaColor) => ColorResult;

License

Licensed under the MIT License.