How it works
Color extraction
The system analyzes book covers to identify meaningful accent colors, focusing on vibrant, saturated hues that work well as UI elements.
- Extracts numerous color samples from the image
- Filters out colors that are too light, dark, or desaturated
- Selects the most vibrant and suitable color
- Provides smart fallbacks if no ideal color is found
OKLCH color space
Colors are processed in the perceptually uniform OKLCH color space, offering better hue preservation and intuitive manipulation.
- L = Lightness (0-100%): How bright the color appears
- C = Chroma (0-0.4): Color intensity/saturation
- H = Hue (0-360°): Position on the color wheel
- Only the hue (H) is extracted from each image
Hybrid color system
The application uses a refined hybrid approach for optimal performance and designer control:
- Direct CSS Variables: For extracted colors — immediate visual feedback
- Design Token System: For designer changes — maintains design system integrity
- Color hue changes are applied directly to CSS variables without server requests
- Generated color scales follow perceptually balanced lightness and chroma values
Modern architecture
The system is built for modern browsers with efficient design:
- Native OKLCH color support for accurate color representation
- Consolidated color management in a single, cohesive API
- Style Dictionary integration for design token processing
- Optimized CSS with dynamic variables for performance