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 reads any supported color string. rgbaToColorValue expands the result into every format, and formatColor turns each one back into CSS. Type a color below to try it.

parseColor · formatColor

Type any color

hex#6366f1

rgbrgb(99, 102, 241)

rgbargba(99, 102, 241, 1.00)

hslhsl(238.7, 83.5%, 66.7%)

hslahsla(238.7, 83.5%, 66.7%, 1.00)

oklchoklch(58.5% 0.204 277.1)

oklchaoklch(58.5% 0.204 277.1 / 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