{"id":12982,"library":"color-string","title":"CSS Color String Parser and Generator","description":"color-string is a focused utility library for parsing and generating CSS-compatible color strings, supporting various formats like RGB, HSL, HWB, and named colors. The current stable version is 2.1.4. The library maintains a reasonably active release cadence, with recent updates introducing features like case-insensitive string checks and improved parsing for modern CSS color notations, alongside crucial bug fixes. Its key differentiators include its lightweight nature, explicit support for multiple color models, and direct conversion capabilities to and from different string representations, making it a reliable choice for frontend and backend color manipulation tasks where CSS compatibility is paramount. It ships with TypeScript types for enhanced developer experience.","status":"active","version":"2.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/Qix-/color-string","tags":["javascript","color","colour","rgb","css","typescript"],"install":[{"cmd":"npm install color-string","lang":"bash","label":"npm"},{"cmd":"yarn add color-string","lang":"bash","label":"yarn"},{"cmd":"pnpm add color-string","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Since version 2.0.0, color-string is an ESM-only package. Use `import` syntax.","wrong":"const colorString = require('color-string');","symbol":"colorString","correct":"import colorString from 'color-string';"},{"note":"The `get` and `to` properties are nested objects on the default export for parsing and generation functions.","symbol":"get","correct":"import colorString from 'color-string'; const parsed = colorString.get('#FFF');"},{"note":"Access generation methods via `colorString.to`.","symbol":"to","correct":"import colorString from 'color-string'; const hex = colorString.to.hex(255, 255, 255);"}],"quickstart":{"code":"import colorString from 'color-string';\n\n// Parsing a hex color string\nconst hexColor = '#FFFA';\nconst parsedHex = colorString.get(hexColor);\nconsole.log(`Parsed ${hexColor}:`, parsedHex); // { model: 'rgb', value: [255, 255, 255, 0.6666666666666666] }\n\n// Parsing a named color to RGB values\nconst namedColor = 'blue';\nconst rgbValues = colorString.get.rgb(namedColor);\nconsole.log(`RGB values for ${namedColor}:`, rgbValues); // [0, 0, 255, 1]\n\n// Generating a hex string from RGB values\nconst generatedHex = colorString.to.hex(255, 165, 0); // Orange\nconsole.log(`Generated hex for orange:`, generatedHex); // #FFA500\n\n// Generating an RGBA string with transparency\nconst generatedRgba = colorString.to.rgb(128, 0, 128, 0.5);\nconsole.log(`Generated RGBA string:`, generatedRgba); // rgba(128, 0, 128, 0.5)\n\n// Handling invalid input\nconst invalidColor = 'not-a-color';\nconst parsedInvalid = colorString.get.rgb(invalidColor);\nconsole.log(`Parsed invalid color:`, parsedInvalid); // null","lang":"typescript","description":"Demonstrates parsing various CSS color strings and generating color strings in different formats (hex, rgb, rgba), including handling invalid input."},"warnings":[{"fix":"Migrate your codebase to use ES module `import` syntax. For Node.js, ensure your `package.json` has `\"type\": \"module\"` or use `.mjs` file extensions. If stuck on CommonJS, consider using a bundler like Webpack or Rollup, or stick to an older `1.x.x` version.","message":"Version 2.0.0 transitioned color-string to an ESM-only package. This requires `import` statements and affects environments that do not support ESM or rely on CommonJS `require()`.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Refactor your code to no longer depend on 'swizzle'. This might involve using direct color conversion functions or finding an alternative library for color component manipulation.","message":"Version 2.0.0 removed 'swizzle' support. If your application relied on `color-string.swizzle`, this functionality is no longer available.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your code checks for `null` when handling potentially invalid color string results from `colorString.get()` or its sub-methods.","message":"Version 2.0.1 changed typings to consistently return `null` instead of `undefined` for invalid color inputs. While this was a typing change, it might affect runtime assumptions in JavaScript code relying on `undefined` checks.","severity":"breaking","affected_versions":">=2.0.1"},{"fix":"Immediately upgrade to version `2.1.2` or higher. Do not use `2.1.1` under any circumstances. Check your `package-lock.json` or `yarn.lock` files.","message":"The `color-string@2.1.1` package was compromised due to a supply chain attack. It is critical to avoid this specific version.","severity":"breaking","affected_versions":"2.1.1"},{"fix":"Upgrade to version `2.1.3` or newer to ensure correct parsing of named colors into RGB values.","message":"`get.rgb()` for named colors had a bug returning invalid results prior to v2.1.3.","severity":"gotcha","affected_versions":">=2.0.0 <2.1.3"},{"fix":"Review any code that might depend on strict case-sensitive parsing of color string models. Most applications will benefit from this change, but it's a behavioral shift.","message":"String checks in parsing methods became case insensitive in v2.1.4. While this is generally an improvement, if you relied on strict case sensitivity for validation (e.g., 'RGB' vs 'rgb'), this behavior has changed.","severity":"gotcha","affected_versions":">=2.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use `import colorString from 'color-string';` instead of `require()`. For Node.js, ensure your environment is configured for ESM (e.g., `\"type\": \"module\"` in `package.json`).","cause":"Attempting to `require()` color-string in a CommonJS environment after version 2.0.0, which is ESM-only.","error":"TypeError: colorString is not a function"},{"fix":"Upgrade `color-string` to version `2.1.3` or newer.","cause":"A bug in versions prior to 2.1.3 caused `get.rgb()` to return invalid results when parsing named colors.","error":"colorString.get.rgb('blue') returns [0, 0, 0, 0] or similar incorrect values."},{"fix":"Always check if the result of `colorString.get()` or its sub-methods is `null` before attempting to access its properties. For TypeScript, use optional chaining or a null check, e.g., `const parsed = colorString.get(str); if (parsed) { console.log(parsed.model); }`.","cause":"Attempting to access properties like `model` or `value` on the result of `colorString.get()` without checking if the parsed result is `null`, which indicates an invalid color string.","error":"Property 'model' does not exist on type 'null'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}