color-parse

library2.0.2jsnpmunverified

color-parse is a fast and compact JavaScript library designed for parsing a wide array of CSS-compatible color strings into a structured object representation. It supports numerous formats including color keywords (e.g., 'red'), hex codes (`#RGB`, `#RRGGBB`, with optional alpha), functional notations like `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, `cmyk()`, and modern color spaces such as `xyz()`, `luv()`, `lab()`, `lch()`, `oklab()`, `oklch()`, and the generic `color()` function. Additionally, it can parse custom formats like `R:10 G:20 B:30` and array-like inputs. The library currently ships as version 2.0.2 and is actively maintained. It emphasizes performance and minimal bundle size, differentiating itself from alternatives by focusing solely on parsing without performing color space conversions, which helps keep its footprint small compared to libraries like `parse-color` or `color-string` that offer extensive conversion APIs.

serialization

npm install color-parse

github ↗package ↗

INSTALL

IMPORT

SIG · COLOR-PARSE

color-parse

serializationjavascriptv2.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parse

✓ import parse from 'color-parse';

✗ import { parse } from 'color-parse';

The library exports its main parsing function as a default export for ESM.

parse

✓ const parse = require('color-parse');

CommonJS usage for Node.js environments. The function is the default export.

ParsedColor

✓ import type { ParsedColor } from 'color-parse';

Importing the TypeScript type definition for the parsed color object.

Demonstrates parsing various color formats including keywords, hex, HSLA, custom RGB, and the generic `color()` function, showing the structured output and error handling for unparseable strings.

import parse from 'color-parse'; // Parsing various CSS color strings const parsedRed = parse('red'); console.log('Parsed Red:', parsedRed); // { space: 'rgb', values: [ 255, 0, 0 ], alpha: 1 } const parsedHex = parse('#00FF00AA'); console.log('Parsed Hex with Alpha:', parsedHex); // { space: 'rgb', values: [ 0, 255, 0 ], alpha: 0.6666666666666666 } const parsedHSLA = parse('hsla(12 10% 50% / .3)'); console.log('Parsed HSLA:', parsedHSLA); // { space: 'hsl', values: [ 12, 10, 50 ], alpha: 0.3 } // Example of a custom format const parsedCustom = parse('R:10 G:20 B:30'); console.log('Parsed Custom RGB:', parsedCustom); // { space: 'rgb', values: [ 10, 20, 30 ], alpha: 1 } // Example with `color()` function const parsedColorFunc = parse('color(srgb 0.1 0.2 0.3 / 0.5)'); console.log('Parsed color() function:', parsedColorFunc); // { space: 'srgb', values: [ 0.1, 0.2, 0.3 ], alpha: 0.5 } // Invalid input example try { parse('yellowblue'); } catch (e) { console.error('Error parsing invalid string:', e.message); // Will likely be 'Unable to parse color: yellowblue' }

Debug

Known issues

gotchaThe library is a pure parser and does not perform any color space conversions. If you need to convert colors between spaces (e.g., RGB to HSL), you'll need an additional library like `color-space` or `color-rgba`.

fix

Use a dedicated color conversion library in conjunction with `color-parse` for transformations.

affects: >=1.0.0

gotchaWhen parsing modern color spaces like `lab()`, `lch()`, `oklab()`, or `oklch()`, the library will parse the values, but it does not validate if these values fall within the W3C CSS Color Module Level 4 specified ranges for these color spaces. Developers should be aware of these limits (e.g., L from 0-100, a/b from -128 to 127) when providing input.

fix

Implement client-side validation for color component ranges if strict adherence to CSS color specification limits is required.

affects: >=2.0.0

gotchaThe parser is designed for color strings and will throw an error if passed non-string inputs (e.g., objects, arrays, numbers).

fix

Ensure all inputs to the `parse` function are valid color strings.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: parse is not a function

Attempting to use named import syntax (`import { parse } from 'color-parse'`) for a default export in an ESM environment.

fix

Change the import statement to `import parse from 'color-parse';`

Unable to parse color: [your_input_string]

The input string does not match any of the supported color formats, or it contains syntax errors.

fix

Review the input string to ensure it conforms to one of the supported CSS color formats or custom string patterns detailed in the documentation.

TypeError: [input] is not a function/string (or similar errors like 'split is not a function')

A non-string value (e.g., `null`, `undefined`, `object`, `array`, `number`) was passed to the `parse` function.

fix

Always ensure the argument passed to `parse` is a valid string representation of a color.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/colorjs/color-parse ↗

packagehttps://www.npmjs.com/package/color-parse ↗