Editor's Path Properties section's 'Color' picker shows a 'matching' indicator for similar colors — user wanting to find an exact match has no 'close enough' visual cue #341

New issue

Closed

opened 2026-10-04 03:54:49 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:54:49 +00:00

Owner

Finding

grep -rn 'colorMatch\|colorDistance' src/components/editor/ returns 0. The color picker doesn't indicate how close each catalog color is to the current path's color.

A user with a path in #FF0000 (pure red):

Opens the color picker
Sees 60+ swatches
Wants to find the "closest Robison-Anton red"
Has to compare each one visually
Or look at the names (some have "Red" in the title, some don't)

The fix is a "color distance" indicator: each catalog swatch is shown with a small badge indicating its distance from the current color (e.g., "Δ 5" for close, "Δ 20" for far).

Where

Color picker: src/components/editor/EditorRightPanel.tsx (the 5-column grid)
No color distance: grep -rn 'colorMatch' src/components/editor/ returns 0

Suggested fix shape

Algorithm: compute the perceptual color distance (Delta E or simpler RGB distance) from the current color to each catalog color:

function colorDistance(c1: string, c2: string): number {
  const r1 = parseInt(c1.slice(1, 3), 16);
  const g1 = parseInt(c1.slice(3, 5), 16);
  const b1 = parseInt(c1.slice(5, 7), 16);
  const r2 = parseInt(c2.slice(1, 3), 16);
  const g2 = parseInt(c2.slice(3, 5), 16);
  const b2 = parseInt(c2.slice(5, 7), 16);
  return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2);
}

UI: each swatch in the picker has a small badge showing the distance:

{catalog.map((c) => {
  const distance = colorDistance(p.threadColor, c.hex);
  return (
    <button
      key={c.id}
      onClick={() => onColorChange(c.hex)}
      style={{ backgroundColor: c.hex }}
    >
      {distance < 10 && <span className="absolute top-0 right-0">●</span>}  {/* very close */}
    </button>
  );
})}

Sort: optionally, sort the catalog by distance, so the closest are at the top.
Use cases:

The user has a path in red and wants to find the "official red" from the catalog
The user is matching a Pantone and wants to see the closest match

Severity

Low. The user can find by visual. Power users with color-critical work notice.

Discovered by

Gap analysis (2026-10-02) of editor color picker.

#256 (open) — Thread color search. The search is one input; the distance is the visual.
#257 (open) — Thread color differentiation. Same picker; the distance is another visual.
Most professional color pickers (Adobe, etc.) have this. The editor's gap is the parallel.

## Finding `grep -rn 'colorMatch\|colorDistance' src/components/editor/` returns 0. The color picker doesn't indicate how close each catalog color is to the current path's color. A user with a path in #FF0000 (pure red): - Opens the color picker - Sees 60+ swatches - Wants to find the "closest Robison-Anton red" - Has to compare each one visually - Or look at the names (some have "Red" in the title, some don't) The fix is a "color distance" indicator: each catalog swatch is shown with a small badge indicating its distance from the current color (e.g., "Δ 5" for close, "Δ 20" for far). ## Where - Color picker: `src/components/editor/EditorRightPanel.tsx` (the 5-column grid) - No color distance: `grep -rn 'colorMatch' src/components/editor/` returns 0 ## Suggested fix shape 1. **Algorithm**: compute the perceptual color distance (Delta E or simpler RGB distance) from the current color to each catalog color: ```ts function colorDistance(c1: string, c2: string): number { const r1 = parseInt(c1.slice(1, 3), 16); const g1 = parseInt(c1.slice(3, 5), 16); const b1 = parseInt(c1.slice(5, 7), 16); const r2 = parseInt(c2.slice(1, 3), 16); const g2 = parseInt(c2.slice(3, 5), 16); const b2 = parseInt(c2.slice(5, 7), 16); return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2); } ``` 2. **UI**: each swatch in the picker has a small badge showing the distance: ```tsx {catalog.map((c) => { const distance = colorDistance(p.threadColor, c.hex); return ( <button key={c.id} onClick={() => onColorChange(c.hex)} style={{ backgroundColor: c.hex }} > {distance < 10 && <span className="absolute top-0 right-0">●</span>} {/* very close */} </button> ); })} ``` 3. **Sort**: optionally, sort the catalog by distance, so the closest are at the top. 4. **Use cases**: - The user has a path in red and wants to find the "official red" from the catalog - The user is matching a Pantone and wants to see the closest match ## Severity Low. The user can find by visual. Power users with color-critical work notice. ## Discovered by Gap analysis (2026-10-02) of editor color picker. ## Related - #256 (open) — Thread color search. The search is one input; the distance is the visual. - #257 (open) — Thread color differentiation. Same picker; the distance is another visual. - Most professional color pickers (Adobe, etc.) have this. The editor's gap is the parallel.