@csstools/css-color-parser

CSS Color Parser

Usage

Add CSS Color Parser to your project:

npm install @csstools/css-color-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev

import { color } from '@csstools/css-color-parser';
import { isFunctionNode, parseComponentValue } from '@csstools/css-parser-algorithms';
import { serializeRGB } from '@csstools/css-color-parser';
import { tokenize } from '@csstools/css-tokenizer';

// color() expects a parsed component value.
const hwbComponentValue = parseComponentValue(tokenize({ css: 'hwb(10deg 10% 20%)' }));
const colorData = color(hwbComponentValue);
if (colorData) {
	console.log(colorData);

	// serializeRGB() returns a component value.
	const rgbComponentValue = serializeRGB(colorData);
	console.log(rgbComponentValue.toString());
}

Similar packages

Other packages similar to @csstools/css-color-parser

color

The 'color' package is a comprehensive library for color conversion and manipulation. It supports a wide range of color formats and provides methods for color transformations. Compared to @csstools/css-color-parser, 'color' offers more extensive functionality for color manipulation beyond just parsing.

tinycolor2

The 'tinycolor2' package is a fast and lightweight color manipulation library. It supports parsing, conversion, and manipulation of various color formats. While @csstools/css-color-parser focuses on parsing, 'tinycolor2' provides additional methods for color adjustments and transformations.

chroma-js

The 'chroma-js' package is a powerful library for color conversions and color scales. It supports a wide range of color formats and provides advanced features for color manipulation and visualization. Compared to @csstools/css-color-parser, 'chroma-js' offers more advanced capabilities for working with color scales and gradients.