Effortless color palettes with Median-cut magic. Perfect for artists, designers, and decorators. Unleash your inner color maestro today! 🌈🪄
Color Alchemy is a powerful yet intuitive web-based color palette extraction tool that transforms your images into beautiful color schemes using the sophisticated Median-cut algorithm. This single-page application empowers designers, artists, and creatives to discover the perfect color combinations hidden within their visual content.
Whether you're extracting colors from nature photographs, brand materials, or artistic creations, Color Alchemy provides a seamless experience for generating professional color palettes that can be directly incorporated into your design projects.
- Drag-and-drop functionality: Simply drag your image onto the designated area
- Click-to-upload option: Traditional file selection dialog for accessibility
- Visual feedback: Interactive highlighting during drag operations
- Image preview: Instant display of uploaded images for confirmation
- Median-cut algorithm: Advanced color quantization for accurate palette generation
- 10 dominant colors: Automatic extraction of the most significant colors from your image
- Interactive swatches: Responsive grid layout displaying extracted colors
- Color preservation: Maintains the integrity of original colors during extraction
- One-click copying: Instantly copy color codes to clipboard with a single click
- Keyboard navigation: Full accessibility support with Tab, Enter, and Space keys
- Visual feedback: Hover effects displaying color codes and copy instructions
- Notification system: Non-intrusive alerts confirming successful color copying
- ARIA labels: Comprehensive screen reader support for all interactive elements
- Keyboard navigation: Complete functionality without requiring a mouse
- Focus management: Logical tab order and visible focus indicators
- Screen reader announcements: Real-time feedback for all user actions
The simplest way to use Color Alchemy is through the live web application:
- Visit https://njirolu.github.io/color-alchemy
- Drag an image onto the drop area or click to select a file
- View your extracted color palette
- Click on any color swatch to copy its hex code
To run Color Alchemy locally:
-
Clone the repository:
git clone https://github.com/njirolu/color-alchemy.git cd color-alchemy -
Open
index.htmlin your preferred web browser:# On macOS open index.html # On Windows start index.html # On Linux xdg-open index.html
No additional dependencies or installation steps are required - everything is contained within the single HTML file.
Color Alchemy utilizes the Median-cut algorithm, a sophisticated color quantization technique that intelligently analyzes and reduces the color information in an image:
-
Initial Color Space Analysis: The algorithm begins by examining all pixels in the uploaded image and mapping them into a 3D RGB color space.
-
Cube Division: The color space is represented as a cube, which is recursively divided along the axis with the largest color range.
-
Median Selection: At each division step, the algorithm finds the median value along the selected axis, ensuring an even distribution of colors.
-
Color Averaging: For each resulting sub-cube, the algorithm calculates the average color value, which becomes one of the palette colors.
-
Palette Generation: This process continues until the desired number of colors (10 in Color Alchemy) is achieved.
The Median-cut algorithm is particularly effective because it:
- Preserves the visual importance of dominant colors
- Maintains good color distribution across the spectrum
- Reduces computational complexity while maintaining quality
- Produces perceptually meaningful color palettes
- Brand development: Extract consistent color schemes from existing brand materials
- Web design: Create harmonious color palettes for websites and applications
- Print design: Generate color combinations for brochures, business cards, and more
- Color inspiration: Discover unique color combinations in your own photographs
- Art analysis: Analyze the color composition of famous artworks
- Series consistency: Maintain color harmony across a collection of works
- Room color schemes: Extract palettes from inspiration images for spaces
- Fabric coordination: Match colors between different textiles and materials
- Mood board creation: Develop cohesive color stories for design projects
- HTML5: Semantic markup for accessibility and SEO
- CSS3: Modern styling with backdrop-filter effects and smooth transitions
- Vanilla JavaScript: Lightweight, performant implementation without framework overhead
- mediancut.js (v2.1.0): Core color quantization library implementing the Median-cut algorithm
- Inter font family: Contemporary, highly readable typeface from Google Fonts
- DNS prefetching: Pre-resolves external domain connections for faster loading
- Resource preloading: Critical assets loaded before rendering
- Asynchronous loading: Non-critical JavaScript loaded after initial render
- Inlined critical CSS: Above-the-fold styles embedded directly in HTML
- Minimal dependencies: Single-file architecture with minimal external requests
- ARIA attributes: Comprehensive labeling of interactive elements
- Keyboard navigation: Full functionality via keyboard controls
- Screen reader support: Announcements for all important state changes
- Focus management: Logical tab order and visible focus indicators
- Semantic HTML: Proper use of HTML5 elements for better assistive technology support
Color Alchemy is designed to work on all modern browsers:
- Chrome (latest version)
- Firefox (latest version)
- Safari (latest version)
- Edge (latest version)
We welcome contributions to Color Alchemy! Whether you're fixing bugs, improving documentation, or adding new features, your help is appreciated.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Maintain the single-file architecture when possible
- Ensure all new features are keyboard accessible
- Test screen reader compatibility
- Keep performance impact minimal
- Follow existing code style and patterns
This project is licensed under the MIT License - see the LICENSE file for details.
- mediancut.js: For providing the excellent implementation of the Median-cut algorithm
- Inter Font Family: For the clean, modern typography that enhances readability
- Normalize.css: For providing consistent cross-browser styling base
- The open-source community for inspiration and best practices in web accessibility
If you have questions, suggestions, or feedback about Color Alchemy:
- Create an issue in the GitHub repository
- Visit the live application at https://njirolu.github.io/color-alchemy
Color Alchemy - Transforming images into inspiration, one palette at a time. 🌈