Convert

Convert between color spaces. All functions are client-safe.

Material

HexsRGB

RGBsRGB

RGB

HSLcylindrical

HSL

OKLabperceptual

L0.471

a0.071

b0.087

OKLCHcylindrical perceptual

L0.471

C0.112

h50.8°

CSSoklch()

oklch(0.471 0.112 50.8)

Perceptual Uniformity

Same hue and saturation, varying only lightness. OKLab produces visually even steps; HSL does not.

HSL LightnessL: 0% → 100%

OKLab LightnessL: 0 → 1

Notice how HSL's mid-range appears to jump unevenly between perceptually similar tones, while OKLab distributes perceived brightness uniformly across the gradient.

import { hexToRgb, oklabToOklch } from "colorscope/convert";

Functions

hexToRgb

function hexToRgb(hex: string): RGB | null

Convert hex color string to RGB. Accepts #RGB, #RRGGBB (with or without #). Returns null for invalid formats.

Param	Type	Description
`hex`	`string`	Hex color string

hexToRgb("#ff6600"); // { r: 255, g: 102, b: 0 }
hexToRgb("#f60");    // { r: 255, g: 102, b: 0 }
hexToRgb("invalid"); // null

hexToHsl

function hexToHsl(hex: string): HSL | null

Convert hex to HSL. Returns null for invalid formats.

hexToHsl("#ff6600"); // { h: 24, s: 100, l: 50 }

hexToOklch

function hexToOklch(hex: string): OKLCH | null

Convert hex to OKLCH. Returns null for invalid formats.

hexToOklch("#ff6600"); // { L: 0.725, C: 0.199, h: 47.68 }

oklabToRgb

function oklabToRgb(lab: OKLab): RGB

Convert OKLab to sRGB (0-255). Clamps to valid sRGB gamut.

oklabToRgb({ L: 0.628, a: 0.082, b: 0.082 }); // { r: 194, g: 112, b: 74 }

oklabToHsl

function oklabToHsl(lab: OKLab): HSL

Convert OKLab to HSL.

oklabToHex

function oklabToHex(lab: OKLab): string

Convert OKLab to hex color string.

oklabToHex({ L: 0.628, a: 0.082, b: 0.082 }); // "#c2704a"

oklabToOklch

function oklabToOklch(lab: OKLab): OKLCH

Convert OKLab to OKLCH (cylindrical form). Hue is in degrees (0-360).

oklabToOklch({ L: 0.628, a: 0.082, b: 0.082 }); // { L: 0.628, C: 0.116, h: 45 }

oklabToLinearRgb

function oklabToLinearRgb(lab: OKLab): { r: number; g: number; b: number }

Convert OKLab to linear RGB (0-1). Inverse of linearRgbToOklab.

oklchToOklab

function oklchToOklab(lch: OKLCH): OKLab

Convert OKLCH to OKLab. Hue is expected in degrees (0-360).

oklchToOklab({ L: 0.628, C: 0.116, h: 45 }); // { L: 0.628, a: 0.082, b: 0.082 }

rgbToHex

function rgbToHex(r: number, g: number, b: number): string

Convert sRGB (0-255) to hex string.

rgbToHex(255, 102, 0); // "#ff6600"

Types

OKLCH

interface OKLCH {
  L: number; // perceptual lightness (0-1)
  C: number; // chroma / colorfulness (0+, typically 0-0.4)
  h: number; // hue angle in degrees (0-360)
}

RGB

interface RGB {
  r: number; // 0-255
  g: number; // 0-255
  b: number; // 0-255
}