Color Helper

The ColorHelper object contains functions to assist with color conversions between colors implementing the RGBColor interface and the HSVColor interface.

See Interfaces for more information on the RGBColor and HSVColor interfaces.

HSV to RGB

HSVtoRGB (color: HSVColor): RGBColor

The HSVtoRGB function takes an HSVColor as its argument and returns its equivalent RGBColor.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: HSVColor = {
    h: 0,         // Between 0 - 360
    s: 100,       // Between 0 - 100
    v: 100,       // Between 0 - 100
}

// Expected output: { r: 255, g: 0, b: 0 }
const rgbColor: RGBColor = ColorHelper.HSVtoRGB(color);

HSL to RGB

HSLtoRGB (color: HSVColor): RGBColor

The HSLtoRGB function takes an HSVColor as its argument and returns its equivalent RGBColor.

The v property of the HSVColor object is used as the color’s lightness rather than its value.

import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: HSVColor = {
    h: 0,         // Between 0 - 360
    s: 100,       // Between 0 - 100
    v: 50,       // Between 0 - 100
}

// Expected output: { r: 255, g: 0, b: 0 }
const rgbColor: RGBColor = ColorHelper.HSLtoRGB(color);

HSV to HSL

HSVtoHSL (color: HSVColor): HSVColor

The HSVtoHSL function takes an HSVColor as its argument and returns its equivalent HSVColor, where the v property represents the color’s lightness rather than its value.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: HSVColor = {
    h: 0,         // Between 0 - 360
    s: 100,       // Between 0 - 100
    v: 100,       // Between 0 - 100
}

// Expected output: { h: 0, s: 100, v: 50 }
const hslColor: HSVColor = ColorHelper.HSVtoHSL(color);

HSL to HSV

HSLtoHSV (color: HSVColor): HSVColor

The HSLtoHSV function takes an HSVColor in which the v property represents the color’s lightness rather than its value and returns its equivalent HSVColor.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: HSVColor = {
    h: 0,         // Between 0 - 360
    s: 100,       // Between 0 - 100
    v: 50,       // Between 0 - 100
}

// Expected output: { h: 0, s: 100, v: 100 }
const hsvColor: HSVColor = ColorHelper.HSLtoHSV(color);

RGB to HSV

RGBtoHSV (color: RGBColor): HSVColor

The RGBtoHSV function takes an RGBColor as its argument and returns its equivalent HSVColor.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: RGBColor = {
    r: 255,       // Between 0 - 255
    g: 0,         // Between 0 - 255
    b: 0,         // Between 0 - 255
}

// Expected output: { h: 0, s: 100, v: 100 }
const hsvColor: HSVColor = ColorHelper.RGBtoHSV(color);

RGB to HSL

RGBtoHSL (color: RGBColor): HSVColor

The RGBtoHSL function takes an RGBColor as its argument and returns its equivalent HSVColor, where the v property represents the color’s lightness rather than its value.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example (red)
const color: RGBColor = {
    r: 255,       // Between 0 - 255
    g: 0,         // Between 0 - 255
    b: 0,         // Between 0 - 255
}

// Expected output: { h: 0, s: 100, v: 50 }
const hslColor: HSVColor = ColorHelper.RGBtoHSL(color);

Normalize HSV

normalizeHSV (color: HSVColor): HSVColor

The normalizeHSV function takes an HSVColor object as its only argument and returns a “normalized” HSVColor object. In a “normalized” HSV color, the saturation and value are clamped between 0 and 100 and the hue value is restricted to the range 0 - 360 using modular arithmetic. This makes HSVColor objects easier to process and convert.


import { ColorHelper, RGBColor, HSVColor } from 'curves'; // Import

// Example
const color1: HSVColor = {
    h: 415,
    s: 130,
    v: 55,
}

const color2: HSVColor = {
    h: -30,
    s: -10,
    v: 102,
}

// Expected output: { h: 55, s: 100, v: 55 }
const normalizedColor1: HSVColor = ColorHelper.normalizeHSV(color1);

// Expected output: { h: 330, s: 0, v: 100 }
const normalizedColor2: HSVColor = ColorHelper.normalizeHSV(color2);
All conversion functions automatically normalize HSV values. It is not necessary to normalize them before using them in any of the previously listed conversion functions.

Read more

Interfaces Curve