A perceptual color clustering system that groups colors based on human vision similarity.
This algorithm implements a multi-level hierarchical clustering approach to group colors in a way that matches human color perception. It uses the LAB color space and Delta E 2000 metric to measure color differences as perceived by the human eye.
The initial clustering stage groups colors based on strict perceptual similarity:
- Uses Delta E 2000 distance metric in LAB color space
- Colors are added to a cluster only if they're perceptually similar to ALL colors in that cluster
- Configurable threshold (typically 1.5-20.5) determines the maximum acceptable color difference
- Output: Initial clusters where colors are nearly indistinguishable to human eye
Two-pass similarity-based merging that considers color properties:
-
Pass 1: Uses
colorMatrixto categorize colors by lightness and saturation- Categories: BLACK, WHITE, DARKEST_GREY, DARK_GREY, MEDIUM_GREY, LIGHT_GREY, DARK_COLOR, MEDIUM_COLOR, LIGHT_COLOR
- Merges clusters based on HSL similarity (hue difference < 27°)
- Different thresholds for same vs. different color categories
-
Pass 2: Uses
colorMatrixLevel3with stricter gray categorization- Further consolidates clusters of similar visual characteristics
- Helps merge dark colors and grays more aggressively
Final merging stage using predefined color centroids:
- Maps each color to nearest centroid from 160+ predefined color references
- Groups centroids into 15 color families (Red, Green, Blue, Yellow, Orange, Purple, Brown, Pink, Gray, Black, White, Cyan, Magenta, Beige)
- Merges clusters if >83% of colors belong to same color family
- Ensures semantically meaningful color groups
- Perceptual Accuracy: Uses CIEDE2000, the industry standard for color difference
- Context-Aware: Different merging strategies for light vs. dark colors
- Hue Preservation: Prevents merging of colors with different hues (>27° difference)
- Adaptive Thresholds: Adjusts strictness based on color lightness and saturation
- Sorted Output: Colors within each cluster sorted by lightness (light to dark)
- RGB → XYZ → LAB (for Delta E 2000 calculations)
- RGB → HSL (for hue-based filtering and categorization)
- Uses CIE 1964 10° Standard Observer with D65 illuminant
- Color palette extraction from images
- Reducing color redundancy in design systems
- Identifying dominant colors in datasets
- Color quantization for compression
- Perceptual color matching
npm install
npm run devOpen http://localhost:3000 to see the interactive visualization.
- Mergable Colors: Initial clusters of perceptually identical colors
- Final Clusters: Hierarchically grouped color families
Configurable Parameters:
- Initial clustering threshold (controls perceptual similarity)
- Similarity thresholds for hierarchical merging
- Factor weights for cluster evaluation
- Color family grouping rules
For in-depth technical documentation, implementation details, and iteration notes:
MIT