Skip to content

Conversions

HEX ↔ RGB / HSL / HSV

hexToRgb(hex)

  • Takes: hex: string — a HEX color (#rgb, #rrggbb, the # is optional, case-insensitive)
  • Returns: [r, g, b] — an RGB component tuple, each 0–255

Converts a HEX color into RGB components.

hexToRgba(hex, opacity)

  • Takes: hex: string — a HEX color; opacity: number — opacity 0–1 (defaults to 1)
  • Returns: string — an rgba(r, g, b, opacity) string

Converts a HEX color into a CSS rgba(...) string at the given opacity.

hexToHsl(hex)

  • Takes: hex: string — a HEX color
  • Returns: [h, s, l] — hue 0–360°, saturation and lightness 0–100%

Converts a HEX color into HSL components.

hexToHsv(hex)

  • Takes: hex: string — a HEX color
  • Returns: [h, s, v] — hue 0–360°, saturation and value 0–100%

Converts a HEX color into HSV components.

hslToHex(h, s, l)

  • Takes: h: number — hue in degrees (wraps into 0–360); s, l: number — saturation and lightness 0–100 (clamped)
  • Returns: string — a #rrggbb color

Converts HSL into a HEX color.

hsvToHex(h, s, v)

  • Takes: h: number — hue in degrees; s, v: number — saturation and value 0–100
  • Returns: string — a #rrggbb color

Converts HSV into a HEX color.

RGB ↔ HSL / HSV / HWB

rgbToHsl({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: [h, s, l] — hue 0–360°, saturation and lightness 0–100%

Converts RGB into HSL components.

hslToRgb(h, s, l)

  • Takes: h: number — hue in degrees; s, l: number — saturation and lightness 0–100
  • Returns: { r, g, b } — RGB components, each 0–255

Converts HSL into an RGB object.

rgbToHsv({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: [h, s, v] — hue 0–360°, saturation and value 0–100%

Converts RGB into HSV components.

hsvToRgb(h, s, v)

  • Takes: h: number — hue in degrees; s, v: number — saturation and value 0–100
  • Returns: { r, g, b } — RGB components, each 0–255

Converts HSV into an RGB object.

rgbToHwb({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: [H, W, B] — hue 0–360°, whiteness and blackness 0–100%

Converts RGB into HWB components.

hwbToRgb(H, W, B)

  • Takes: H: number — hue in degrees; W, B: number — whiteness and blackness 0–100 (a combined total ≥ 100 yields a gray)
  • Returns: { r, g, b } — RGB components, each 0–255

Converts HWB into an RGB object.

RGB ↔ HEX strings

rgbToHex({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: string — a #rrggbb color (lowercase)

Converts RGB into a HEX color.

rgbaToHex({r, g, b, a})

  • Takes: { r, g, b, a } — RGB components (0–255) and alpha a (0–1)
  • Returns: string — a #rrggbbaa color

Converts RGBA into an 8-digit HEX color with the alpha channel appended.

rgbaToHex8({r, g, b, a})

  • Takes: { r, g, b, a } — same as rgbaToHex
  • Returns: string — a #rrggbbaa color

Alias for rgbaToHex — identical behavior under a more explicit name.

rgbToRgbaString({r, g, b}, a)

  • Takes: { r, g, b } — RGB components; a: number — alpha as a separate argument
  • Returns: string — an rgba(r, g, b, a) string (alpha rounded to 3 decimals)

Builds a CSS rgba(...) string from RGB components and an alpha value.

RGB ↔ CMYK

rgbToCmyk({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: { c, m, y, k } — CMYK components in the 0–1 range (not percentages)

Converts RGB into CMYK components.

cmykToRgb({c, m, y, k})

  • Takes: { c, m, y, k } — CMYK components in the 0–1 range
  • Returns: { r, g, b } — RGB components, each 0–255

Converts CMYK into an RGB object.

RGB ↔ Lab / LCH / Oklab / Oklch

rgbToLab({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: { L, a, b } — CIE Lab (D65) — lightness, the green↔red axis, and the blue↔yellow axis

Converts RGB into CIE Lab via an intermediate XYZ space.

labToRgb({L, a, b})

  • Takes: { L, a, b } — CIE Lab coordinates
  • Returns: { r, g, b } — RGB components, each 0–255

Converts CIE Lab back into an RGB object.

rgbToLch({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: { L, C, H } — lightness, chroma (saturation), and hue angle in degrees

Converts RGB into CIE LCH — the cylindrical representation of Lab.

lchToRgb({L, C, H})

  • Takes: { L, C, H } — CIE LCH coordinates
  • Returns: { r, g, b } — RGB components, each 0–255

Converts CIE LCH back into an RGB object.

rgbToOklab({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: { L, a, b } — Oklab: lightness (≈0–1) and two color axes

Converts RGB into the perceptually uniform Oklab space.

oklabToRgb({L, a, b})

  • Takes: { L, a, b } — Oklab coordinates
  • Returns: { r, g, b } — RGB components, each 0–255

Converts Oklab back into an RGB object.

rgbToOklch({r, g, b})

  • Takes: { r, g, b } — RGB components, each 0–255
  • Returns: { L, C, H } — lightness, chroma, and hue angle in degrees

Converts RGB into Oklch — the cylindrical representation of Oklab.

oklchToRgb({L, C, H})

  • Takes: { L, C, H } — Oklch coordinates
  • Returns: { r, g, b } — RGB components, each 0–255

Converts Oklch back into an RGB object.

RGB ↔ Display P3

rgbToDisplayP3({r, g, b})

  • Takes: { r, g, b } — sRGB components, each 0–255
  • Returns: { r, g, b } — components in the Display P3 space, each in the 0–1 range

Converts sRGB into the wider Display P3 color space (linearize → transform matrix → gamma encode).

displayP3ToRgb({r, g, b})

  • Takes: { r, g, b } — Display P3 components, each in the 0–1 range
  • Returns: { r, g, b } — sRGB components, each 0–255

Converts Display P3 back into sRGB.

toDisplayP3Hex(color)

  • Takes: color: string — a color in any recognized format (HEX, rgb(), hsl(), etc.)
  • Returns: string — a HEX string

Converts an arbitrary color through the Display P3 space and returns the result as HEX.