hue-radar

🎨 A tool for discovering all of the colors used in your project.

---

hue-radar is a CLI tool for discovering all of the colors used in your project.

Purpose

If not maintained well, large and long-running web app projects are likely to have colors littered throughout the codebase. This can make it difficult for your design or front-end team to audit, scale and maintain in the long run. This tool was created to help you identify and wrangle every color in your codebase.

It's sort of like greping for various colors, but better for the following reasons:

• Handles lots of edge-cases that a complex grep may miss.
• Supports all color types (eg: hex, hsl, rgb(a)).
• Presents findings in a normalized and reasonable way.
• Can produce a comprehensive color audit report for you.

Installation

Note: This has only been tested on NodeJS v12+. It is unlikely to work on versions below this.

Install the tool in your project, or (optionally) you can do it globally.

yarn add hue-radar
npm i hue-radar

# Or globally
npm i -g hue-radar

Usage

Call hue-radar with the options you desire, in the project.

hue-radar -p "*/**.{less,jsx}"

Options

Option	Description	Default	Notes
--pattern, -p	Glob pattern for files to match. More info.	"**/*.css,!node_modules/**/*"	Defaults are always included before these patterns., so specify overrides if these do not suit you.
--debug, -d	Print debug statements.	false
--format, -f	Output format for the color report, json or html	json
--output, -o	Path to the color report outputted file (optional).	hue-radar.report.{format}
--sort-algorithm, -s	Algorithm for sorting colors (`distance	deltaE`).	distance
--convert-to-hex, -h	Converts all rgb/hsl colors in the report to hex, for grouping purposes.	false	You will still see the discovered source color, this just helps group same colors.

Contributing

Feel free to file issues with ideas or questions, or submit pull requests with new features or bugfixes.

When submitting pull requests, at the very least please add unit tests for any new functionality, and follow the code styles set forth in the config.

License

---

✌️ Built by Dave.