Reduce Colors
Reduces the number of unique colors in an SVG by merging similar colors together. Useful for preparing files for plotters with limited pen colors.
Usage
node .claude/skills/reduce-colors/index.js <svg-file> [options]
Options
| Option |
Description |
threshold=<n> |
Color distance threshold for merging (0-255, default: 50) |
max=<n> |
Maximum number of output colors |
palette=<name> |
Map colors to a predefined palette |
stroke-only |
Only reduce stroke colors |
fill-only |
Only reduce fill colors |
Predefined Palettes
| Name |
Colors |
basic |
Black, white, red, green, blue, yellow, magenta, cyan |
grayscale |
6 shades from black to white |
warm |
Black, white, reds, oranges, yellows |
cool |
Black, white, blues, cyans, purples |
earth |
Black, white, browns, greens |
neon |
Black, white, bright neon colors |
Examples
Merge Similar Colors (Default Threshold)
node .claude/skills/reduce-colors/index.js output/art.svg
# Merges colors within distance 50
Limit to Specific Number of Colors
node .claude/skills/reduce-colors/index.js output/art.svg max=6
# Reduces to at most 6 colors
Map to Basic Palette
node .claude/skills/reduce-colors/index.js output/art.svg palette=basic
# Maps all colors to nearest basic color (8 colors max)
Aggressive Merging
node .claude/skills/reduce-colors/index.js output/art.svg threshold=100
# Higher threshold = more aggressive merging
Workflow for Multi-Pen Plotter
# 1. Prepare SVG (remove animations, defs, convert text)
node .claude/skills/remove-animations/index.js output/art.svg
node .claude/skills/remove-defs/index.js output/art.svg all keep-paths
node .claude/skills/text-to-path/index.js output/art.svg /path/to/font.ttf stroke-only
# 2. Reduce to plotter pen count (e.g., 4 pens)
node .claude/skills/reduce-colors/index.js output/art.svg max=4
# 3. Split into separate files per color
node .claude/skills/split-by-color/index.js output/art.svg stroke-only to-black
How It Works
Threshold-based: Colors within the threshold distance (Euclidean in RGB space) are merged. The most frequent color becomes the representative.
Max colors: If more colors than max, the two closest clusters are repeatedly merged until the limit is reached.
Palette mapping: Each color is mapped to its nearest color in the chosen palette.
Notes
- Color distance is calculated in RGB space (0-255 per channel)
- Max RGB distance is ~441 (black to white)
- Threshold of 50 merges fairly similar colors
- Threshold of 100+ merges noticeably different colors
- Uses frequency-weighted clustering (common colors preferred as representatives)
1---2name: reduce-colors3description: Reduce number of colors in SVG by merging similar colors4---56# Reduce Colors78Reduces the number of unique colors in an SVG by merging similar colors together. Useful for preparing files for plotters with limited pen colors.910## Usage1112```bash13node .claude/skills/reduce-colors/index.js <svg-file> [options]14```1516## Options1718| Option | Description |19|--------|-------------|20| `threshold=<n>` | Color distance threshold for merging (0-255, default: 50) |21| `max=<n>` | Maximum number of output colors |22| `palette=<name>` | Map colors to a predefined palette |23| `stroke-only` | Only reduce stroke colors |24| `fill-only` | Only reduce fill colors |2526## Predefined Palettes2728| Name | Colors |29|------|--------|30| `basic` | Black, white, red, green, blue, yellow, magenta, cyan |31| `grayscale` | 6 shades from black to white |32| `warm` | Black, white, reds, oranges, yellows |33| `cool` | Black, white, blues, cyans, purples |34| `earth` | Black, white, browns, greens |35| `neon` | Black, white, bright neon colors |3637## Examples3839### Merge Similar Colors (Default Threshold)4041```bash42node .claude/skills/reduce-colors/index.js output/art.svg43# Merges colors within distance 5044```4546### Limit to Specific Number of Colors4748```bash49node .claude/skills/reduce-colors/index.js output/art.svg max=650# Reduces to at most 6 colors51```5253### Map to Basic Palette5455```bash56node .claude/skills/reduce-colors/index.js output/art.svg palette=basic57# Maps all colors to nearest basic color (8 colors max)58```5960### Aggressive Merging6162```bash63node .claude/skills/reduce-colors/index.js output/art.svg threshold=10064# Higher threshold = more aggressive merging65```6667## Workflow for Multi-Pen Plotter6869```bash70# 1. Prepare SVG (remove animations, defs, convert text)71node .claude/skills/remove-animations/index.js output/art.svg72node .claude/skills/remove-defs/index.js output/art.svg all keep-paths73node .claude/skills/text-to-path/index.js output/art.svg /path/to/font.ttf stroke-only7475# 2. Reduce to plotter pen count (e.g., 4 pens)76node .claude/skills/reduce-colors/index.js output/art.svg max=47778# 3. Split into separate files per color79node .claude/skills/split-by-color/index.js output/art.svg stroke-only to-black80```8182## How It Works83841. **Threshold-based**: Colors within the threshold distance (Euclidean in RGB space) are merged. The most frequent color becomes the representative.85862. **Max colors**: If more colors than max, the two closest clusters are repeatedly merged until the limit is reached.87883. **Palette mapping**: Each color is mapped to its nearest color in the chosen palette.8990## Notes9192- Color distance is calculated in RGB space (0-255 per channel)93- Max RGB distance is ~441 (black to white)94- Threshold of 50 merges fairly similar colors95- Threshold of 100+ merges noticeably different colors96- Uses frequency-weighted clustering (common colors preferred as representatives)
brxs