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.Hex color string (e.g., ‘#FF00AA’ or ‘FF00AA’ or ‘FFF’)
Tuple of [R, G, B] values (0-255 range)
Example
rgbToHex
Converts RGB values to a hex color string (without ’#’ prefix).RGB array [r, g, b] with values in 0-255 range
Hex color string without ’#’ prefix (e.g., ‘FF5733’)
Example
hex
Converts a single color channel to hex.Color channel value (0-255)
Two-character hex string (e.g., ‘00’, ‘FF’)
trim
Removes the ’#’ prefix from a hex color string.HSL Color Space
rgbToHsl
Converts RGB to HSL color space.RGB array [r, g, b] with values in 0-255 range
HSL color object:
h: Hue (0-360 degrees)s: Saturation (0-100%)l: Lightness (0-100%)
Example
hslToRgb
Converts HSL to RGB.HSL color object with h (0-360), s (0-100), l (0-100)
RGB array [r, g, b] with values in 0-255 range
hexToHsl / hslToHex
Direct conversions between hex and HSL.interpolateHsl
Interpolates between two HSL colors using the shortest path around the color wheel.First HSL color
Second HSL color
Interpolation factor (0 = color1, 1 = color2)
HSV Color Space
rgbToHsv / hsvToRgb
Converts between RGB and HSV (Hue, Saturation, Value/Brightness).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.hslToHsv / hsvToHsl
Converts between HSL and HSV color spaces.interpolateHsv
Interpolates between two HSV colors.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.RGB array [r, g, b] with values in 0-255 range
OKLAB color object:
L: Lightness (0-1 typically)a: Green-red axisb: Blue-yellow axis
hexToOklab
Converts hex color to OKLAB.interpolateColor
Linearly interpolates between two OKLAB colors.Utility Functions
getBrightness
Calculates the perceived brightness of an RGB color.RGB array [r, g, b] with values in 0-255 range
Brightness value calculated using the formula: sqrt(0.299R² + 0.587G² + 0.114*B²)
getRandomColor
Generates a random hex color.Random hex color string with ’#’ prefix (e.g., ‘#A3F2B1’)
Example
vectorDistance
Calculates the Euclidean distance between two vectors (useful for color comparison in perceptually uniform spaces).First vector
Second vector (must be same length as vec1)
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
Type Definitions
Related
- Gradient Types - Use these colors in gradients
- Generate Output - Apply colors to text
Implementation
Source files:packages/rgbirdflop/src/util/Colors/Hex.tspackages/rgbirdflop/src/util/Colors/HSL.tspackages/rgbirdflop/src/util/Colors/OKLAB.tspackages/rgbirdflop/src/util/Colors/OKLCh.tspackages/rgbirdflop/src/util/Colors/CIELAB.tspackages/rgbirdflop/src/util/Colors/LuvLCh.ts