@uiw/color-convert
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    Color Convert

    npm bundle size npm version Open in unpkg

    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.

    Keywords

    Install

    npm i @uiw/color-convert

    DownloadsWeekly Downloads

    4,690

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    98.9 kB

    Total Files

    23

    Last publish

    Collaborators

    • wcjiang