A modern web application built with React and Vite that allows users to effortlessly extract color palettes from images. Upload an image via drag & drop, file selection, or pasting, and instantly get a visually appealing palette of dominant colors.
- Features
- Project Structure
- Tech Stack
- Getting Started
- Usage
- Contributing
- License
- Author
- Acknowledgements
- Multiple Upload Methods: Offers flexibility for users to provide images:
- 🖱️ Drag and Drop: Intuitively drop image files directly onto the upload zone.
- 📋 Paste from Clipboard: Conveniently paste images copied from other applications.
- 📁 File Selection: Use the standard file browser to select local image files.
- Efficient Color Extraction: Utilizes the powerful
colorthieflibrary to quickly analyze the uploaded image and extract the 8 most prominent colors, forming the palette. - Interactive Palette Display: Presents the generated palette in an engaging and usable format:
- Displays colors in a responsive grid layout.
- 🖱️ One-Click Copy: Instantly copy a color's HEX code to the clipboard by clicking its swatch.
- 👀 Hover Effect: Reveals the HEX code clearly when hovering over a color.
- ⌨️ Keyboard Navigation: Fully accessible via keyboard (arrow keys to navigate, Enter/Space to copy).
- 🎨 Smart Text Contrast: Automatically calculates and applies black or white text for HEX codes, ensuring readability against any background color.
- Versatile Export Options: Allows users to save their palettes for later use:
- JSON: Export the palette data (array of hex codes, timestamp) in a structured JSON format, ideal for integration into other tools or codebases.
- PNG: Export a high-resolution PNG image capture of the visual color palette display using
html2canvas, perfect for presentations, documentation, or sharing.
- User-Friendly Interface: Designed for ease of use and clarity:
- 🖼️ Image Preview: Shows a thumbnail of the uploaded image before processing.
- ⏳ Visual Feedback: Incorporates loading spinners, progress indicators, and success/error messages during processing and export operations.
- ❌ Robust Error Handling: Provides clear feedback for common issues like invalid file types (supports JPG/PNG), exceeding size limits (max 5MB), or color extraction problems.
- 📱 Responsive Design: Adapts seamlessly to various screen sizes, offering a consistent experience on desktops, tablets, and mobile devices.
- Modern Tech Stack: Leverages current web technologies for optimal performance and developer experience:
- Built with React for component-based UI development.
- Powered by Vite for lightning-fast HMR (Hot Module Replacement) and optimized builds.
- Styled with Tailwind CSS for rapid, utility-first styling.
color-palette-extractor/
├── public/ # Static assets (e.g., favicon)
├── src/ # Source code
│ ├── assets/ # Project assets (if any, e.g., images used in UI)
│ ├── components/ # Reusable React components
│ │ ├── ExportButtons.jsx
│ │ ├── PaletteViewer.jsx
│ │ └── UploadArea.jsx
│ ├── App.css # Main application styles
│ ├── App.jsx # Root application component
│ ├── index.css # Global styles and Tailwind directives
│ └── main.jsx # Application entry point
├── .eslintrc.cjs # ESLint configuration
├── .gitignore # Git ignore rules
├── index.html # Main HTML template for Vite
├── LICENSE # Project license file (MIT)
├── package-lock.json # Exact dependency versions
├── package.json # Project metadata and dependencies
├── postcss.config.js # PostCSS configuration (for Tailwind)
├── README.md # This file
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
- Frontend Framework: React - For building the user interface components.
- Build Tool: Vite - Provides a fast development server and optimized build process.
- Styling: Tailwind CSS - A utility-first CSS framework for rapid UI development.
- Color Extraction: ColorThief - A JavaScript library for extracting dominant colors from images.
- File Saving: FileSaver.js - For saving generated files (JSON, PNG) on the client-side.
- Image Generation: html2canvas - For capturing the palette display as an image.
- Clone the repository:
git clone <your-repository-url> cd color-palette-extractor
- Install dependencies:
For production environments, consider using:
npm install # or # yarn install
npm ci
- Start the Vite development server:
npm run dev # or # yarn dev
- Open your browser and navigate to
http://localhost:5173(or the port specified in the console).
-
Create an optimized production build:
npm run build # or # yarn build
The production files will be located in the
distdirectory. -
Preview the production build locally:
npm run preview # or # yarn preview
- Launch the application.
- Use one of the available methods (drag & drop, paste, click to upload) to provide an image (JPG or PNG, up to 5MB).
- Wait for the application to process the image and display the extracted 8-color palette.
- Interact with the palette:
- Hover over colors to view their HEX codes.
- Click a color to copy its HEX code.
- Use arrow keys to navigate and Enter/Space to copy.
- Use the "Export as JSON" or "Export as PNG" buttons to save the palette.
Contributions are welcome! If you have suggestions for improvements or find any issues, please feel free to open an issue or submit a pull request.
- Fork the Project
- Create your 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
This project is licensed under the MIT License - see the LICENSE file for details.
Mahmoud Ashraf (SNO7E)
- GitHub: @SNO7E-G
- LinkedIn: Mahmoud Ashraf
This project utilizes the following open-source software:
- React (License)
- Vite (License)
- Tailwind CSS (License)
- ColorThief (License)
- FileSaver.js (License)
- html2canvas (License)
We are grateful to the developers and communities behind these projects.