Skip to main content

Overview

The RGBirdflop SDK provides comprehensive color space conversion utilities for working with colors in different formats. These utilities enable seamless conversion between hex strings, RGB arrays, and various color spaces including HSL, HSV, OKLAB, OKLCh, CIELAB, and LuvLCh.

Hex Conversions

hexToRGB

Converts a hex color string to RGB values.
function hexToRGB(hex: string): [number, number, number]
hex
string
required
Hex color string (e.g., ‘#FF00AA’ or ‘FF00AA’ or ‘FFF’)
rgb
[number, number, number]
Tuple of [R, G, B] values (0-255 range)

Example

import { hexToRGB } from '@birdflop/rgbirdflop';

const rgb = hexToRGB('#FF5733');
// Returns: [255, 87, 51]

const rgb2 = hexToRGB('FFF');
// Returns: [255, 255, 255] (expands 3-char hex)

rgbToHex

Converts RGB values to a hex color string (without ’#’ prefix).
function rgbToHex(RGBAcolor: number[]): string
RGBAcolor
number[]
required
RGB array [r, g, b] with values in 0-255 range
hex
string
Hex color string without ’#’ prefix (e.g., ‘FF5733’)

Example

import { rgbToHex } from '@birdflop/rgbirdflop';

const hex = rgbToHex([255, 87, 51]);
// Returns: 'FF5733'

hex

Converts a single color channel to hex.
function hex(c: number): string
c
number
required
Color channel value (0-255)
hex
string
Two-character hex string (e.g., ‘00’, ‘FF’)

trim

Removes the ’#’ prefix from a hex color string.
function trim(s: string): string

HSL Color Space

rgbToHsl

Converts RGB to HSL color space.
function rgbToHsl(rgb: number[]): HSL
rgb
number[]
required
RGB array [r, g, b] with values in 0-255 range
hsl
HSL
HSL color object:
  • h: Hue (0-360 degrees)
  • s: Saturation (0-100%)
  • l: Lightness (0-100%)

Example

import { rgbToHsl, hexToRGB } from '@birdflop/rgbirdflop';

const rgb = hexToRGB('#FF5733');
const hsl = rgbToHsl(rgb);
// Returns: { h: 9.6, s: 100, l: 60 }

hslToRgb

Converts HSL to RGB.
function hslToRgb(hsl: HSL): number[]
hsl
HSL
required
HSL color object with h (0-360), s (0-100), l (0-100)
rgb
number[]
RGB array [r, g, b] with values in 0-255 range

hexToHsl / hslToHex

Direct conversions between hex and HSL.
function hexToHsl(hex: string): HSL
function hslToHex(hsl: HSL): string

interpolateHsl

Interpolates between two HSL colors using the shortest path around the color wheel.
function interpolateHsl(color1: HSL, color2: HSL, factor: number): HSL
color1
HSL
required
First HSL color
color2
HSL
required
Second HSL color
factor
number
required
Interpolation factor (0 = color1, 1 = color2)

HSV Color Space

rgbToHsv / hsvToRgb

Converts between RGB and HSV (Hue, Saturation, Value/Brightness).
function rgbToHsv(rgb: number[]): HSV
function hsvToRgb(hsv: HSV): number[]
hsv
HSV
HSV color object:
  • h: Hue (0-360 degrees)
  • s: Saturation (0-100%)
  • v: Value/Brightness (0-100%)

hexToHsv / hsvToHex

Direct conversions between hex and HSV.
function hexToHsv(hex: string): HSV
function hsvToHex(hsv: HSV): string

hslToHsv / hsvToHsl

Converts between HSL and HSV color spaces.
function hslToHsv(hsl: HSL): HSV
function hsvToHsl(hsv: HSV): HSL

interpolateHsv

Interpolates between two HSV colors.
function interpolateHsv(color1: HSV, color2: HSV, factor: number): HSV

OKLAB Color Space

OKLAB is a perceptually uniform color space where Euclidean distance corresponds to perceived color difference.

rgbToOklab

Converts RGB to OKLAB color space.
function rgbToOklab(rgb: number[]): OKLAB
rgb
number[]
required
RGB array [r, g, b] with values in 0-255 range
oklab
OKLAB
OKLAB color object:
  • L: Lightness (0-1 typically)
  • a: Green-red axis
  • b: Blue-yellow axis

hexToOklab

Converts hex color to OKLAB.
function hexToOklab(hex: string): OKLAB

interpolateColor

Linearly interpolates between two OKLAB colors.
function interpolateColor(color1: OKLAB, color2: OKLAB, factor: number): OKLAB

Utility Functions

getBrightness

Calculates the perceived brightness of an RGB color.
function getBrightness(RGBAcolor: number[]): number
RGBAcolor
number[]
required
RGB array [r, g, b] with values in 0-255 range
brightness
number
Brightness value calculated using the formula: sqrt(0.299R² + 0.587G² + 0.114*B²)

getRandomColor

Generates a random hex color.
function getRandomColor(): string
color
string
Random hex color string with ’#’ prefix (e.g., ‘#A3F2B1’)

Example

import { getRandomColor } from '@birdflop/rgbirdflop';

const randomColor = getRandomColor();
// Returns: '#A3F2B1' (example - randomized)

vectorDistance

Calculates the Euclidean distance between two vectors (useful for color comparison in perceptually uniform spaces).
function vectorDistance(vec1: number[], vec2: number[]): number
vec1
number[]
required
First vector
vec2
number[]
required
Second vector (must be same length as vec1)
distance
number
Euclidean distance between the vectors

Advanced Color Spaces

The SDK also includes utilities for:
  • OKLCh - Cylindrical OKLAB (Lightness, Chroma, Hue)
  • CIELAB - CIE Lab* color space
  • LuvLCh - CIE LCh based on CIELUV
These are exported from the package and follow similar patterns to the HSL and OKLAB utilities.

Type Definitions

interface HSL {
  h: number; // Hue (0-360 degrees)
  s: number; // Saturation (0-100%)
  l: number; // Lightness (0-100%)
}

interface HSV {
  h: number; // Hue (0-360 degrees)
  s: number; // Saturation (0-100%)
  v: number; // Value/Brightness (0-100%)
}

interface OKLAB {
  L: number; // Lightness (0-1 typically)
  a: number; // Green-red axis
  b: number; // Blue-yellow axis
}

interface LinearRGB {
  r: number; // 0-1 range
  g: number; // 0-1 range
  b: number; // 0-1 range
}

Implementation

Source files:
  • packages/rgbirdflop/src/util/Colors/Hex.ts
  • packages/rgbirdflop/src/util/Colors/HSL.ts
  • packages/rgbirdflop/src/util/Colors/OKLAB.ts
  • packages/rgbirdflop/src/util/Colors/OKLCh.ts
  • packages/rgbirdflop/src/util/Colors/CIELAB.ts
  • packages/rgbirdflop/src/util/Colors/LuvLCh.ts

Build docs developers (and LLMs) love