Color Extractor is a powerful web application that allows users to extract and analyze the dominant colors from images. Built with Next.js and React, it provides an intuitive interface for uploading images or using image URLs for color analysis and visualization.
- Upload images or provide image URLs for color analysis
- Extract dominant colors using K-means clustering algorithm
- Adjust the number of colors to extract
- Choose different color spaces (RGB, HSL, LAB) for analysis
- Resize images for improved performance and accuracy
- Customize export options including layout and color formats
- Export results as JSON or PNG
- Interactive color charts (pie and bar) for visual representation
- Copy color values in various formats (HEX, RGB, HSL, HSV, CMYK, LAB)
- Analyze color harmony and suggest color schemes
- Provide harmony scores for different color combinations
- Generate complementary, triadic, and analogous color schemes
-
Clone the repository:
git clone https://github.com/yourusername/color-extractor.git -
Navigate to the project directory:
cd color-extractor -
Install dependencies:
npm install -
Run the development server:
npm run dev -
Open http://localhost:3000 in your browser to see the application.
- Upload an image or provide an image URL.
- Adjust the number of colors to extract using the slider.
- Toggle the "Resize Image" option if needed and select a preset size or enter custom dimensions.
- Click the "Extract Colors" button to analyze the image.
- View the extracted colors, their percentages, and various color format representations.
- Use the chart toggle to switch between pie and bar chart visualizations.
- Export the results as JSON or PNG using the provided buttons.
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui components
- Color Thief library
- Recharts for data visualization
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.