hue-radar
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
grepmay 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-radarUsage
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.