# @uiw/color-convert > Color Convert Latest version **2.10.3** (published 2026-05-24) · MIT license · 0 weekly downloads ## Install ```sh npm install @uiw/color-convert pnpm add @uiw/color-convert yarn add @uiw/color-convert bun add @uiw/color-convert ``` ## Health **Score 60/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.10.3 | | Published | 2026-05-24 | | First published | 2021-06-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 62.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 566 | | Author | Kenny Wong | | Maintainers | wcjiang, uiwjs | | Keywords | color, convert | ## Links - npm: https://www.npmjs.com/package/@uiw/color-convert - Repository: https://github.com/uiwjs/react-color - Homepage: https://uiwjs.github.io/react-color/#/convert - Issues: https://github.com/uiwjs/react-color/issues - Funding: https://jaywcjlove.github.io/#/sponsor - npm.io page: https://npm.io/package/@uiw/color-convert ## Alternatives - [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads - [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads - [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads - [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads - [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads ## Recent versions - 2.10.3 (latest) — 2026-05-24 - 2.10.2 — 2026-05-21 - 2.10.1 — 2026-04-08 - 2.10.0 — 2026-04-07 - 2.9.6 — 2026-03-07 - 2.9.5 — 2026-02-10 - 2.9.4 — 2026-02-01 - 2.9.3 — 2026-01-29 - 2.9.2 — 2025-10-28 - 2.9.1 — 2025-10-24 - 2.9.0 — 2025-10-03 - 2.8.1 — 2025-09-29 - 2.8.0 — 2025-08-19 - 2.7.3 — 2025-07-30 - 2.7.2 — 2025-07-30 - … 99 more at https://npm.io/package/@uiw/color-convert/versions ## README

^{Special thanks to:}

SubList - Bill Reminder & Renewal Alerts

^{Using my app is also a way to support me:}

Color Convert === [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor) [![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove) [![npm version](https://img.shields.io/npm/v/@uiw/color-convert.svg)](https://www.npmjs.com/package/@uiw/color-convert) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/color-convert/file/README.md) ## Install ```bash npm i @uiw/color-convert ``` ## Usage ```js import { hsvaToHsla } from '@uiw/color-convert' ``` ## API #### `rgbaToHsva` ```js rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 } ``` #### `hexToHsva` ```js hexToHsva("#ffffff") //=> { h: 0, s: 0, v: 100, a: 1 } ``` #### `hsvaToHex` ```js hsvaToHex({ h: 0, s: 0, v: 100, a: 1 }) // => "#ffffff" ``` #### `hsvaToHexa` ```js 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` ```js hsvaToHsla({ h: 0, s: 0, v: 100, a: 1 }) // => { h: 0, s: 0, l: 100, a: 1 } ``` #### `hslaToHsva` ```js 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` ```js 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` ```js 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` ```js hslStringToHsva('hsl(0, 0%, 100%)') // => { h: 0, s: 0, v: 100, a: 1 } ``` #### `hslaStringToHsva` ```js 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` ```js 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` ```js rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) // => { h: 0, s: 0, v: 100, a: 1 } ``` #### `rgbStringToHsva` ```js rgbStringToHsva('rgb(255, 255, 255)') // => { h: 0, s: 0, v: 100, a: 1 } ``` #### `hsvaToRgbString` ```js hsvaToRgbString({ h: 0, s: 0, v: 100, a: 1 }) // => rgb(255, 255, 255) ``` #### `hsvaToRgbaString` ```js hsvaToRgbaString({ h: 200, s: 40, v: 40, a: 0.5 }) // => rgba(61, 88, 102, 0.5) ``` #### `rgbaStringToHsva` ```js rgbaStringToHsva('rgba(61, 88, 102, 0.5)') // => { h: 200, s: 40, v: 40, a: 0.5 } ``` #### `hsvaToHsvaString` ```js hsvaToHsvaString({ h: 0, s: 0, v: 100, a: 1 }) // => hsva(0, 0%, 100%, 1) ``` #### `hsvaToHsvString` ```js hsvaToHsvString({ h: 0, s: 0, v: 100, a: 1 }) // => hsv(0, 0%, 100%) ``` #### `hsvStringToHsva` ```js 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` ```js rgbaToRgb({ r: 0, g: 0, b: 0, a: 1 }) //=> { r: 0, g: 0, b: 0 } ``` #### `hslaToHsl` ```js hslaToHsl({ h: 0, s: 0, l: 0, a: 1 }) //=> { h: 0, s: 0, l: 0 } ``` #### `hsvaToHsv` ```js hsvaToHsv({ h: 0, s: 0, v: 0, a: 1 }) //=> { h: 0, s: 0, v: 0 } ``` #### `equalHex` ```js equalHex("#8c0dba", "#8c0dba") // => true ``` #### `equalColorObjects` ```js equalColorObjects({ h: 0, s: 0, v: 5, a: 0.5 }, { h: 0, s: 0, v: 5, a: 0.5 }) // => true ``` #### `equalColorString` ```js equalColorString("rgb(0,0,0)", "rgb(0, 0, 0)") //=> true ``` #### `hsvaToHslaString` ```js hsvaToHslaString({ h: 200, s: 40, v: 40, a: 0.5 }) //=> hsla(200, 25%, 32%, 0.5) ``` #### `validHex` ```js validHex("#8c0dba") //=> true ``` #### `rgbaToHexa` ```js rgbaToHexa({ b: 26, g: 2, r: 209, a: 1 }) // => '#d1021aff' ``` #### `hexToXY` ```js hexToXY('#4780f1') // => { x: 0.261, y: 0.231, bri: 0.863 } ``` #### `xyToHex` ```js xyToHex({ x: 0.261, y: 0.231, bri: 0.863 }) // => #4780f1 ``` #### `rgbToXY` ```js rgbToXY({ r: 71, g: 128, b: 241 }) // => { x: 0.261, y: 0.231, bri: 0.863 } ``` #### `xyToRgb` ```js xyToRgb({ x: 0.261, y: 0.231, bri: 0.863 }) // => { r: 71, g: 128, b: 241 } ``` #### `color` ```js 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 ```ts export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor; export 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 type HexColor = `#${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; export declare const getContrastingColor: (str: string | HsvaColor) => "#ffffff" | "#000000"; 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) => hex is HexColor; ``` ## Contributors As always, thanks to our amazing contributors!

Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License. --- _Source: https://npm.io/package/@uiw/color-convert · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._