{"id":13023,"library":"csscolorparser","title":"CSS Color Parser","description":"csscolorparser is a lightweight JavaScript utility designed to parse CSS color strings into an RGBA array. It was initially released in 2012 and has not seen updates since version 1.0.3, published approximately 9 years ago. The package directly exports a single function, `parseCSSColor`, which takes a string (e.g., 'rgba(255, 128, 12, 0.5)', '#fff', 'slateblue') and returns a four-element array `[R, G, B, A]` where R, G, B are integers (0-255) and A is a float (0-1), or `null` for invalid input. Its primary differentiator is its simplicity and lack of dependencies, but its age means it only supports older CSS Color Module Level 3/4 formats and lacks support for newer specifications like HWB, LAB, LCH, Oklab, Oklch, or the `color()` function. It operates as a CommonJS module with interop for ESM.","status":"abandoned","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/deanm/css-color-parser-js","tags":["javascript","css","color","html5","parser"],"install":[{"cmd":"npm install csscolorparser","lang":"bash","label":"npm"},{"cmd":"yarn add csscolorparser","lang":"bash","label":"yarn"},{"cmd":"pnpm add csscolorparser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a single function as its default, so named imports are incorrect. For CommonJS, use `const parseCSSColor = require('csscolorparser');`.","wrong":"import { parseCSSColor } from 'csscolorparser';","symbol":"parseCSSColor","correct":"import parseCSSColor from 'csscolorparser';"}],"quickstart":{"code":"import parseCSSColor from 'csscolorparser';\n\nconsole.log(parseCSSColor('rgba(255, 128, 12, 0.5)')); // Expected: [ 255, 128, 12, 0.5 ]\nconsole.log(parseCSSColor('#fff')); // Expected: [ 255, 255, 255, 1 ]\nconsole.log(parseCSSColor('slateblue')); // Expected: [ 106, 90, 205, 1 ]\nconsole.log(parseCSSColor('hsla(900, 15%, 90%, 0.5)')); // Expected: [ 226, 233, 233, 0.5 ]\nconsole.log(parseCSSColor('invalid-color-string')); // Expected: null\nconsole.log(parseCSSColor('rgb(100% 0% 0%)')); // Expected: [255, 0, 0, 1] (Supports percentages)\nconsole.log(parseCSSColor('hsl(240, 100%, 50%)')); // Expected: [0, 0, 255, 1]","lang":"javascript","description":"Demonstrates importing the default `parseCSSColor` function and using it to parse various valid and invalid CSS color strings, logging the RGBA array or null."},"warnings":[{"fix":"Manually validate results or use a more actively maintained CSS color parser for strict spec compliance.","message":"The package is explicitly noted to be 'not spec compliant' for certain `hsl` and `hsla` inputs. For example, `hsl(900, 0.15, 90%)` is parsed, but the `0.15` saturation is non-standard. Always validate outputs against current CSS specifications.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always provide an explicit alpha value for `hsla` if expecting a non-null output, or use `hsl()` for opaque colors. Example: `parseCSSColor('hsla(900, 15%, 90%, 1)')`.","message":"The parser returns `null` for `hsla(H, S, L)` without an explicit alpha channel (e.g., `hsla(900, 15%, 90%)`), even though the CSS spec defaults alpha to 1 in such cases. Explicitly use `hsla(H, S, L, 1)` or `hsl(H, S, L)` if you intend for full opacity.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For modern CSS color parsing capabilities, consider actively maintained alternatives like `@csstools/css-color-parser` or `color.js`.","message":"This library has not been updated in approximately 9 years. It does not support newer CSS Color Module Level 4 and 5 syntaxes such as `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, `color()`, or `color-mix()` functions, which are now widely supported in modern browsers.","severity":"breaking","affected_versions":"<=1.0.3"},{"fix":"Ensure all hexadecimal color strings include the leading `#` symbol. Example: `parseCSSColor('#ffffff')`.","message":"Hex color strings must start with a `#` symbol. Inputs like `'ffffff'` will return `null` instead of parsing as a white color.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use a default import for ESM (`import parseCSSColor from 'csscolorparser';`) or `require()` for CommonJS (`const parseCSSColor = require('csscolorparser');`).","message":"The `parseCSSColor` function uses `module.exports = parseCSSColor` as its export mechanism, making it a CommonJS module with a default export. While ESM `import parseCSSColor from 'csscolorparser';` works due to Node.js's CJS-ESM interop, importing via named imports (`import { parseCSSColor } from 'csscolorparser';`) will fail.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the import statement is `import parseCSSColor from 'csscolorparser';` for ESM or `const parseCSSColor = require('csscolorparser');` for CommonJS. Do not use `import { parseCSSColor } from 'csscolorparser';`.","cause":"Attempting to use `parseCSSColor` when it hasn't been correctly imported or when attempting a named import from a default-exported CommonJS module.","error":"TypeError: Cannot read properties of undefined (reading 'parseCSSColor')"},{"fix":"Add the `#` prefix to all hexadecimal color strings: `parseCSSColor('#ffffff')`.","cause":"The parser strictly expects hex color strings to be prefixed with a `#`.","error":"console.log(parseCSSColor('ffffff')) outputs 'null' but I expected white."},{"fix":"Provide an explicit alpha value: `parseCSSColor('hsla(120, 50%, 50%, 1)')` or use `hsl()` which implicitly has alpha `1`: `parseCSSColor('hsl(120, 50%, 50%)')`.","cause":"The `hsla()` function requires an explicit alpha channel value (even for opaque colors) to be parsed by this library, unlike the CSS specification which defaults it to `1`.","error":"console.log(parseCSSColor('hsla(120, 50%, 50%)')) outputs 'null' but I expected green."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}