Parsers

parseCSS

Parse a CSS color string and optionally convert to a specific format. Supports CSS Color Level 4 syntax including space-separated values, none keyword, and angle units.

parseCSS(input: string, format?: ColorType): HEX | HSL | LAB | LCH | RGB

Parameter	Description	Type
format	Optional output format. Defaults to the input format.	ColorType
input	Any CSS color string or named color	string

import { parseCSS } from 'colorizr';

parseCSS('hsl(344 100% 50%)');    // { h: 344, s: 100, l: 50 }
parseCSS('#ff0044', 'hsl');       // { h: 344, s: 100, l: 50 }
parseCSS('red');                  // '#ff0000'
parseCSS('oklch(0.63 0.29 17)');  // { l: 0.63, c: 0.29, h: 17 }

Playground

{
  "l": 0.63,
  "c": 0.29,
  "h": 17
}

extractColorParts

Parse a CSS color string into its individual components.

extractColorParts(input: string): ExtractColorPartsReturn

Returns an object with the color model and its channel values:

import { extractColorParts } from 'colorizr';

extractColorParts('rgb(255 0 68)');
// { model: 'rgb', r: 255, g: 0, b: 68 }

extractColorParts('hsl(344 100% 50% / 90%)');
// { model: 'hsl', h: 344, s: 100, l: 50, alpha: 0.9 }

extractColorParts('oklch(0.63 0.29 17)');
// { model: 'oklch', l: 0.63, c: 0.29, h: 17 }

Playground

{
  "model": "oklch",
  "l": 0.63,
  "c": 0.29,
  "h": 17
}

getColorType

Detect the type of a color string.

getColorType(input: string): ColorTypeInput | null

import { getColorType } from 'colorizr';

getColorType('#ff0044');               // 'hex'
getColorType('rgb(255 0 68)');         // 'rgb'
getColorType('hsl(344 100% 50%)');     // 'hsl'
getColorType('oklch(0.63 0.29 17)');   // 'oklch'
getColorType('red');                   // 'named'
getColorType('not-a-color');           // null

Playground

oklch