Color Convert

Install

1npm i @uiw/color-convert

Usage

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

API

rgbaToHsva

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

hexToHsva

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

hsvaToHex

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

hsvaToHexa

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

hsvaToHsla

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

hslaToHsva

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

hslStringToHsla

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

hsvaToHslString

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

hslStringToHsva

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

hslaStringToHsva

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

hsvaToRgba

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

rgbaToHsva

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

rgbStringToHsva

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

hsvaToRgbString

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

hsvaToRgbaString

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

rgbaStringToHsva

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

hsvaToHsvaString

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

hsvaToHsvString

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

hsvStringToHsva

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

rgbaToRgb

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

hslaToHsl

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

hsvaToHsv

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

equalHex

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

equalColorObjects

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

equalColorString

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

hsvaToHslaString

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

validHex

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

rgbaToHexa

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

hexToXY

1hexToXY('#4780f1') // => { x: 0.261, y: 0.231, bri: 0.863 }

xyToHex

1xyToHex({ x: 0.261, y: 0.231, bri: 0.863 }) // => #4780f1

rgbToXY

1rgbToXY({ r: 71, g: 128, b: 241 }) // => { x: 0.261, y: 0.231, bri: 0.863 }

xyToRgb

1xyToRgb({ x: 0.261, y: 0.231, bri: 0.863 }) // => { r: 71, g: 128, b: 241 }

color

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

type

1export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
2export type ColorResult = {
3    rgb: RgbColor;
4    hsl: HslColor;
5    hsv: HsvColor;
6    rgba: RgbaColor;
7    hsla: HslaColor;
8    hsva: HsvaColor;
9    hex: string;
10    hexa: string;
11};
12export interface HsvColor {
13    h: number;
14    s: number;
15    v: number;
16}
17export interface HsvaColor extends HsvColor {
18    a: number;
19}
20export interface RgbColor {
21    r: number;
22    g: number;
23    b: number;
24}
25export interface RgbaColor extends RgbColor {
26    a: number;
27}
28/**
29 * ```js
30 * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
31 * ```
32 */
33export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
34export declare const hsvaToHslString: (hsva: HsvaColor) => string;
35export declare const hsvaToHsvString: ({ h, s, v }: HsvaColor) => string;
36export declare const hsvaToHsvaString: ({ h, s, v, a }: HsvaColor) => string;
37export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
38export declare const hslStringToHsla: (str: string) => HslaColor;
39export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
40export declare const hslStringToHsva: (hslString: string) => HsvaColor;
41export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
42export interface HslColor {
43    h: number;
44    s: number;
45    l: number;
46}
47export interface HslaColor extends HslColor {
48    a: number;
49}
50export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
51export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
52export declare const parseHue: (value: string, unit?: string) => number;
53export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
54export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
55export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
56/** Converts an RGBA color plus alpha transparency to hex */
57export declare const rgbaToHex: ({ r, g, b }: RgbaColor) => string;
58export declare const rgbaToHexa: ({ r, g, b, a }: RgbaColor) => string;
59export type HexColor = `#${string}`;
60export declare const hexToHsva: (hex: string) => HsvaColor;
61export declare const hexToRgba: (hex: string) => RgbaColor;
62/**
63 * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
64 * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
65 */
66export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
67export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
68export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
69export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
70export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
71export declare const hsvaToHex: (hsva: HsvaColor) => string;
72export declare const hsvaToHexa: (hsva: HsvaColor) => string;
73export declare const hsvaToHsv: ({ h, s, v }: HsvaColor) => HsvColor;
74export declare const color: (str: string | HsvaColor) => ColorResult;
75export declare const getContrastingColor: (str: string | HsvaColor) => "#ffffff" | "#000000";
76export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
77export declare const equalColorString: (first: string, second: string) => boolean;
78export declare const equalHex: (first: string, second: string) => boolean;
79export declare const validHex: (hex: string) => hex is HexColor;

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.