Color Utilities

Every conversion and helper the picker uses internally is exported, so you can parse, convert, and analyze colors without rendering any UI.

Live converter

parseColor accepts any format; rgbaToColorValue expands it into all of them. The demo below parses your input and shows formatColor output for each space.

Type any color

hex#6366f1

rgbrgb(99, 102, 241)

rgbargba(99, 102, 241, 1.00)

hslhsl(239, 84%, 67%)

hslahsla(239, 84%, 67%, 1.00)

oklchoklch(59% 0.20 277)

oklchaoklch(59% 0.20 277 / 1.00)

Parse & format

Turn strings into structured colors and back again.

Function	Signature	Description
`parseColor`	`(color: string) => RGBA \| null`	Parse any supported format string to RGBA.
`parseHex`	`(hex: string) => RGBA \| null`	Parse a 3/6/8-digit hex string.
`rgbaToColorValue`	`(rgba: RGBA) => ColorValue`	Expand an RGBA into every format at once.
`formatColor`	`(color: ColorValue, format: ColorFormat) => string`	Render a ColorValue as a CSS string.

Hex

RGBA ↔ hex.

Function	Signature	Description
`rgbaToHex`	`(rgba: RGBA) => string`	6-digit hex.
`rgbaToHex8`	`(rgba: RGBA) => string`	8-digit hex (with alpha).

HSL & HSV

Cylindrical RGB models.

Function	Signature	Description
`rgbToHsl`	`(rgb: RGB) => HSL`	RGB → HSL.
`hslToRgb`	`(hsl: HSL) => RGB`	HSL → RGB.
`rgbaToHsla`	`(rgba: RGBA) => HSLA`	RGBA → HSLA.
`hslaToRgba`	`(hsla: HSLA) => RGBA`	HSLA → RGBA.
`rgbToHsv`	`(rgb: RGB) => HSV`	RGB → HSV.
`hsvToRgb`	`(hsv: HSV) => RGB`	HSV → RGB.
`rgbaToHsva`	`(rgba: RGBA) => HSVA`	RGBA → HSVA.
`hsvaToRgba`	`(hsva: HSVA) => RGBA`	HSVA → RGBA.

OKLAB & OKLCH

Perceptually uniform spaces.

Function	Signature	Description
`rgbToOklab`	`(rgb: RGB) => OKLAB`	RGB → OKLAB.
`oklabToRgb`	`(oklab: OKLAB) => RGB`	OKLAB → RGB.
`rgbToOklch`	`(rgb: RGB) => OKLCH`	RGB → OKLCH.
`oklchToRgb`	`(oklch: OKLCH) => RGB`	OKLCH → RGB.
`oklabToOklch`	`(oklab: OKLAB) => OKLCH`	OKLAB → OKLCH.
`oklchToOklab`	`(oklch: OKLCH) => OKLAB`	OKLCH → OKLAB.
`rgbaToOklaba`	`(rgba: RGBA) => OKLABA`	RGBA → OKLABA.
`oklabaToRgba`	`(oklaba: OKLABA) => RGBA`	OKLABA → RGBA.
`rgbaToOklcha`	`(rgba: RGBA) => OKLCHA`	RGBA → OKLCHA.
`oklchaToRgba`	`(oklcha: OKLCHA) => RGBA`	OKLCHA → RGBA.

HWB, CIE Lab & LCH

Additional CSS Color 4 spaces (Lab and LCH use D50).

Function	Signature	Description
`hwbToRgb`	`(hwb: HWB) => RGB`	HWB → RGB.
`rgbToHwb`	`(rgb: RGB) => HWB`	RGB → HWB.
`labToRgb`	`(lab: LAB) => RGB`	CIE Lab → RGB.
`lchToRgb`	`(lch: LCH) => RGB`	CIE LCH → RGB.
`lchToLab`	`(lch: LCH) => LAB`	CIE LCH → CIE Lab.

Named colors

The 148 CSS color keywords.

Function	Signature	Description
`getNamedColor`	`(name: string) => string \| null`	Resolve a CSS keyword to hex, or null.
`getNamedColorNames`	`() => string[]`	Every supported CSS color keyword.

Color helpers

WCAG contrast helpers and harmony generators built on the conversions above.

Function	Signature	Description
`getRelativeLuminance`	`(rgb: RGB) => number`	WCAG relative luminance.
`getContrastRatio`	`(a: RGB, b: RGB) => number`	WCAG contrast ratio between two colors.
`meetsContrastRatio`	`(ratio, level: 'AA'\|'AAA', size?) => boolean`	Whether a ratio passes a WCAG level.
`getComplementaryColor`	`(rgb: RGB) => RGB`	The opposite hue.
`getAnalogousColors`	`(rgb: RGB, angle?) => RGB[]`	Neighboring hues.
`getTriadicColors`	`(rgb: RGB) => RGB[]`	Three evenly spaced hues.
`getSplitComplementaryColors`	`(rgb: RGB, angle?) => RGB[]`	Split-complementary scheme.
`getTetradicColors`	`(rgb: RGB, angle?) => RGB[]`	Four-color scheme.
`getColorHistory`	`() => string[]`	Read persisted color history.
`addToColorHistory`	`(color: string, maxSize?) => string[]`	Add a color to history.
`clearColorHistory`	`() => void`	Empty the stored history.
`copyToClipboard`	`(text: string) => Promise<boolean>`	Copy text, resolving to success.
`isEyeDropperSupported`	`() => boolean`	Whether this browser can sample screen colors.
`openEyeDropper`	`() => Promise<string \| null>`	Sample a screen color; null if cancelled.

import { parseColor, getContrastRatio, meetsContrastRatio } from 'chromakit-react';

const fg = parseColor('#1a1a1a');
const bg = parseColor('#ffffff');
const ratio = getContrastRatio(fg, bg);          // 18.1
const passes = meetsContrastRatio(ratio, 'AA');  // true