Color Transformations

The transforms API provides bidirectional color space conversions. All functions are available via api.transforms.

RGB Conversions

RGB ↔ Hex

Convert between RGB and hexadecimal color formats.

`rgbToHex(rgb: RGB): Hex`

const rgb = { r: 255, g: 128, b: 0 };
const hex = api.transforms.rgbToHex(rgb);
console.log(hex); // { hex: "#FF8000" }

`hexToRgb(hex: Hex): RGB`

const hex = { hex: "#FF8000" };
const rgb = api.transforms.hexToRgb(hex);
console.log(rgb); // { r: 255, g: 128, b: 0 }

`rgbaToHex(rgba: RGBA): Hex`

Converts RGBA (with alpha) to 8-character hex.

const rgba = { r: 255, g: 128, b: 0, a: 0.5 };
const hex = api.transforms.rgbaToHex(rgba);
console.log(hex); // { hex: "#FF800080" }

`hexToRgba(hex: Hex): RGBA`

const hex = { hex: "#FF800080" };
const rgba = api.transforms.hexToRgba(hex);
console.log(rgba); // { r: 255, g: 128, b: 0, a: 0.502 }

RGB ↔ HSL

HSL (Hue, Saturation, Lightness) is intuitive for color manipulation.

`rgbToHsl(rgb: RGB): HSL`

const rgb = { r: 99, g: 102, b: 241 };
const hsl = api.transforms.rgbToHsl(rgb);
console.log(hsl); 
// { h: 238.73, s: 84.52, l: 66.67 }

Returns:

h - Hue (0-360 degrees)
s - Saturation (0-100%)
l - Lightness (0-100%)

`hslToRgb(hsl: HSL): RGB`

const hsl = { h: 239, s: 85, l: 67 };
const rgb = api.transforms.hslToRgb(hsl);
console.log(rgb); // { r: 99, g: 102, b: 241 }

`rgbaToHsla(rgba: RGBA): HSLA`

const rgba = { r: 99, g: 102, b: 241, a: 0.8 };
const hsla = api.transforms.rgbaToHsla(rgba);
console.log(hsla);
// { h: 238.73, s: 84.52, l: 66.67, a: 0.8 }

`hslaToRgba(hsla: HSLA): RGBA`

const hsla = { h: 239, s: 85, l: 67, a: 0.8 };
const rgba = api.transforms.hslaToRgba(hsla);

RGB ↔ HSV

HSV (Hue, Saturation, Value) is commonly used in color pickers.

`rgbToHsv(rgb: RGB): HSV`

const rgb = { r: 255, g: 128, b: 0 };
const hsv = api.transforms.rgbToHsv(rgb);
console.log(hsv);
// { h: 30.12, s: 100, v: 100 }

Returns:

h - Hue (0-360 degrees)
s - Saturation (0-100%)
v - Value/Brightness (0-100%)

`hsvToRgb(hsv: HSV): RGB`

const hsv = { h: 30, s: 100, v: 100 };
const rgb = api.transforms.hsvToRgb(hsv);
console.log(rgb); // { r: 255, g: 127, b: 0 }

`rgbaToHsva(rgba: RGBA): HSVA`

const rgba = { r: 255, g: 128, b: 0, a: 0.9 };
const hsva = api.transforms.rgbaToHsva(rgba);

`hsvaToRgba(hsva: HSVA): RGBA`

const hsva = { h: 30, s: 100, v: 100, a: 0.9 };
const rgba = api.transforms.hsvaToRgba(hsva);

HSV ↔ HSL

Direct conversion between HSV and HSL.

`hsvToHsl(hsv: HSV): HSL`

const hsv = { h: 30, s: 100, v: 100 };
const hsl = api.transforms.hsvToHsl(hsv);
console.log(hsl); // { h: 30, s: 100, l: 50 }

`hslToHsv(hsl: HSL): HSV`

const hsl = { h: 30, s: 100, l: 50 };
const hsv = api.transforms.hslToHsv(hsl);
console.log(hsv); // { h: 30, s: 100, v: 100 }

RGB ↔ CMYK

CMYK is used for print design.

`rgbToCmyk(rgb: RGB): CMYK`

const rgb = { r: 99, g: 102, b: 241 };
const cmyk = api.transforms.rgbToCmyk(rgb);
console.log(cmyk);
// { c: 58.92, m: 57.68, y: 0, k: 5.49 }

Returns:

c - Cyan (0-100%)
m - Magenta (0-100%)
y - Yellow (0-100%)
k - Black/Key (0-100%)

`cmykToRgb(cmyk: CMYK): RGB`

const cmyk = { c: 59, m: 58, y: 0, k: 5 };
const rgb = api.transforms.cmykToRgb(cmyk);
console.log(rgb); // { r: 99, g: 101, b: 242 }

RGB ↔ Linear RGB

Linear RGB removes gamma correction for accurate color blending.

`rgbToLinearRgb(rgb: RGB): LinearRGB`

const rgb = { r: 128, g: 128, b: 128 };
const linear = api.transforms.rgbToLinearRgb(rgb);
console.log(linear);
// { r: 0.212, g: 0.212, b: 0.212 }

`linearRgbToRgb(linear: LinearRGB): RGB`

const linear = { r: 0.212, g: 0.212, b: 0.212 };
const rgb = api.transforms.linearRgbToRgb(linear);
console.log(rgb); // { r: 128, g: 128, b: 128 }

RGB ↔ XYZ

CIE XYZ is the foundation for many color spaces.

`rgbToXyz(rgb: RGB): XYZ`

const rgb = { r: 99, g: 102, b: 241 };
const xyz = api.transforms.rgbToXyz(rgb);
console.log(xyz);
// { x: 24.89, y: 16.36, z: 89.45 }

Uses D65 illuminant and sRGB color space.

`xyzToRgb(xyz: XYZ): RGB`

const xyz = { x: 24.89, y: 16.36, z: 89.45 };
const rgb = api.transforms.xyzToRgb(xyz);
console.log(rgb); // { r: 99, g: 102, b: 241 }

RGB ↔ LAB

CIE LAB provides perceptually uniform color space.

`rgbToLab(rgb: RGB): LAB`

const rgb = { r: 99, g: 102, b: 241 };
const lab = api.transforms.rgbToLab(rgb);
console.log(lab);
// { l: 47.42, a: 44.88, b: -75.12 }

Returns:

l - Lightness (0-100)
a - Green-Red axis (-128 to +127)
b - Blue-Yellow axis (-128 to +127)

`labToRgb(lab: LAB): RGB`

const lab = { l: 47.42, a: 44.88, b: -75.12 };
const rgb = api.transforms.labToRgb(lab);
console.log(rgb); // { r: 99, g: 102, b: 241 }

RGB ↔ LCH

LCH is cylindrical LAB (Lightness, Chroma, Hue).

`rgbToLch(rgb: RGB): LCH`

const rgb = { r: 255, g: 0, b: 0 };
const lch = api.transforms.rgbToLch(rgb);
console.log(lch);
// { l: 53.24, c: 104.55, h: 40.00 }

Returns:

l - Lightness (0-100)
c - Chroma (0-150+)
h - Hue angle (0-360 degrees)

`lchToRgb(lch: LCH): RGB`

const lch = { l: 53.24, c: 104.55, h: 40 };
const rgb = api.transforms.lchToRgb(lch);
console.log(rgb); // { r: 255, g: 0, b: 0 }

LAB ↔ LCH

Direct conversion between LAB and LCH.

`labToLch(lab: LAB): LCH`

const lab = { l: 53.24, a: 80.09, b: 67.20 };
const lch = api.transforms.labToLch(lab);
console.log(lch);
// { l: 53.24, c: 104.55, h: 40.00 }

`lchToLab(lch: LCH): LAB`

const lch = { l: 53.24, c: 104.55, h: 40 };
const lab = api.transforms.lchToLab(lch);
console.log(lab);
// { l: 53.24, a: 80.09, b: 67.20 }

XYZ ↔ LAB

Direct conversion between XYZ and LAB.

`xyzToLab(xyz: XYZ): LAB`

const xyz = { x: 41.24, y: 21.26, z: 1.93 };
const lab = api.transforms.xyzToLab(xyz);
console.log(lab);
// { l: 53.24, a: 80.09, b: 67.20 }

`labToXyz(lab: LAB): XYZ`

const lab = { l: 53.24, a: 80.09, b: 67.20 };
const xyz = api.transforms.labToXyz(lab);
console.log(xyz);
// { x: 41.24, y: 21.26, z: 1.93 }

RGB ↔ OKLAB

OKLAB is a modern perceptual color space with better uniformity than LAB.

`rgbToOklab(rgb: RGB): OKLAB`

const rgb = { r: 99, g: 102, b: 241 };
const oklab = api.transforms.rgbToOklab(rgb);
console.log(oklab);
// { l: 0.554, a: 0.097, b: -0.195 }

Returns:

l - Lightness (0-1)
a - Green-Red axis
b - Blue-Yellow axis

`oklabToRgb(oklab: OKLAB): RGB`

const oklab = { l: 0.554, a: 0.097, b: -0.195 };
const rgb = api.transforms.oklabToRgb(oklab);
console.log(rgb); // { r: 99, g: 102, b: 241 }

RGB ↔ OKLCH

OKLCH is cylindrical OKLAB (better for color manipulation).

`rgbToOklch(rgb: RGB): OKLCH`

const rgb = { r: 255, g: 0, b: 0 };
const oklch = api.transforms.rgbToOklch(rgb);
console.log(oklch);
// { l: 0.628, c: 0.258, h: 29.23 }

Returns:

l - Lightness (0-1)
c - Chroma (0-0.4+)
h - Hue angle (0-360 degrees)

`oklchToRgb(oklch: OKLCH): RGB`

const oklch = { l: 0.628, c: 0.258, h: 29.23 };
const rgb = api.transforms.oklchToRgb(oklch);
console.log(rgb); // { r: 255, g: 0, b: 0 }

OKLAB ↔ OKLCH

Direct conversion between OKLAB and OKLCH.

`oklabToOklch(oklab: OKLAB): OKLCH`

const oklab = { l: 0.628, a: 0.225, b: 0.126 };
const oklch = api.transforms.oklabToOklch(oklab);
console.log(oklch);
// { l: 0.628, c: 0.258, h: 29.23 }

`oklchToOklab(oklch: OKLCH): OKLAB`

const oklch = { l: 0.628, c: 0.258, h: 29.23 };
const oklab = api.transforms.oklchToOklab(oklch);
console.log(oklab);
// { l: 0.628, a: 0.225, b: 0.126 }

RGB ↔ LMS

LMS represents cone responses (Long, Medium, Short wavelengths).

`rgbToLms(rgb: RGB): LMS`

const rgb = { r: 255, g: 128, b: 0 };
const lms = api.transforms.rgbToLms(rgb);
console.log(lms);
// { l: 0.612, m: 0.465, s: 0.042 }

Used primarily for color vision deficiency simulation.

`lmsToRgb(lms: LMS): RGB`

const lms = { l: 0.612, m: 0.465, s: 0.042 };
const rgb = api.transforms.lmsToRgb(lms);
console.log(rgb); // { r: 255, g: 128, b: 0 }

Type Definitions

interface RGB {
  r: number; // 0-255
  g: number; // 0-255
  b: number; // 0-255
}
 
interface RGBA extends RGB {
  a: number; // 0-1 (alpha)
}
 
interface Hex {
  hex: string; // "#RRGGBB" or "#RRGGBBAA"
}
 
interface HSL {
  h: number; // 0-360 degrees
  s: number; // 0-100 percent
  l: number; // 0-100 percent
}
 
interface HSV {
  h: number; // 0-360 degrees
  s: number; // 0-100 percent
  v: number; // 0-100 percent
}
 
interface CMYK {
  c: number; // 0-100 percent
  m: number; // 0-100 percent
  y: number; // 0-100 percent
  k: number; // 0-100 percent
}
 
interface LAB {
  l: number; // 0-100
  a: number; // -128 to +127
  b: number; // -128 to +127
}
 
interface LCH {
  l: number; // 0-100
  c: number; // 0-150+
  h: number; // 0-360 degrees
}
 
interface OKLAB {
  l: number; // 0-1
  a: number; // typically -0.4 to +0.4
  b: number; // typically -0.4 to +0.4
}
 
interface OKLCH {
  l: number; // 0-1
  c: number; // 0-0.4+
  h: number; // 0-360 degrees
}
 
interface LMS {
  l: number; // Long cone response
  m: number; // Medium cone response
  s: number; // Short cone response
}
 
interface XYZ {
  x: number;
  y: number;
  z: number;
}
 
interface LinearRGB {
  r: number; // 0-1
  g: number; // 0-1
  b: number; // 0-1
}

Color Transformations

On this page