{"id":28369779,"url":"https://github.com/mallocode300/colour_palette_generator","last_synced_at":"2025-07-29T12:37:10.810Z","repository":{"id":295033615,"uuid":"988863825","full_name":"mallocode300/colour_palette_generator","owner":"mallocode300","description":"Upload an image and immediately obtain a colour palette with the 10 most common colors in HEX codes and RGB","archived":false,"fork":false,"pushed_at":"2025-06-11T07:06:50.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-11T08:24:25.027Z","etag":null,"topics":["numpy","python"],"latest_commit_sha":null,"homepage":"https://colour-palette-generator.onrender.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mallocode300.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-23T07:32:58.000Z","updated_at":"2025-06-11T07:06:53.000Z","dependencies_parsed_at":"2025-05-23T09:13:47.954Z","dependency_job_id":"de50f6ea-e964-41ff-a559-3057e962b442","html_url":"https://github.com/mallocode300/colour_palette_generator","commit_stats":null,"previous_names":["mallocode300/colour_palette_generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mallocode300/colour_palette_generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallocode300%2Fcolour_palette_generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallocode300%2Fcolour_palette_generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallocode300%2Fcolour_palette_generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallocode300%2Fcolour_palette_generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mallocode300","download_url":"https://codeload.github.com/mallocode300/colour_palette_generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallocode300%2Fcolour_palette_generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267686877,"owners_count":24127788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["numpy","python"],"created_at":"2025-05-29T05:44:32.571Z","updated_at":"2025-07-29T12:37:10.802Z","avatar_url":"https://github.com/mallocode300.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Color Palette Generator\n\nA beautiful and modern web application that extracts the top 10 most common colors from uploaded images using advanced image processing with NumPy and machine learning clustering techniques.\n\n## Features\n\n- **Drag \u0026 Drop Interface**: Easy-to-use drag and drop file upload\n- **Multiple Format Support**: PNG, JPG, JPEG, GIF, and BMP files\n- **Color Analysis**: Uses K-means clustering with NumPy for accurate color extraction\n- **Beautiful UI**: Modern, responsive design with gradient backgrounds\n- **Color Information**: Shows hex codes, RGB values, and percentage distribution\n- **Copy to Clipboard**: Click any color to copy its hex code\n- **Mobile Responsive**: Works perfectly on desktop and mobile devices\n\n## Technology Stack\n\n- **Backend**: Flask (Python web framework)\n- **Image Processing**: NumPy for array operations and Pillow (PIL) for image handling\n- **Machine Learning**: Scikit-learn K-means clustering for color grouping\n- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)\n- **Styling**: Modern CSS with gradients and animations\n\n## Installation\n\n1. **Clone or download this repository**\n2. **Install Python dependencies**:\n   ```bash\n   pip install -r requirements.txt\n   ```\n   \n   **Note**: If you encounter NumPy compatibility issues with scikit-learn, run:\n   ```bash\n   pip install \"numpy\u003c2\"\n   ```\n\n## Running the Application\n\n1. **Start the Flask server**:\n   ```bash\n   python app.py\n   ```\n\n2. **Open your web browser** and navigate to:\n   ```\n   http://localhost:8080\n   ```\n\n## How It Works\n\n### Image Processing Algorithm\n\n1. **Image Upload**: User uploads an image through the web interface\n2. **Preprocessing**: \n   - Convert image to RGB format if needed\n   - Resize image for faster processing (thumbnail to 150x150)\n   - Convert to NumPy array for mathematical operations\n3. **Pixel Analysis**: \n   - Reshape image array to list of RGB pixels\n   - Remove any invalid/transparent pixels\n4. **Color Clustering**: \n   - Apply K-means clustering to group similar colors\n   - Extract cluster centers as representative colors\n5. **Frequency Analysis**: \n   - Count pixels in each cluster\n   - Calculate percentage distribution\n6. **Results**: \n   - Sort colors by frequency (most common first)\n   - Return top 10 colors with hex codes, RGB values, and percentages\n\n### Web Interface\n\n- **Modern Design**: Gradient backgrounds, rounded corners, and smooth animations\n- **Responsive Layout**: CSS Grid for color palette display\n- **Interactive Elements**: Hover effects, loading animations, and click-to-copy functionality\n- **User Feedback**: Success/error messages and loading indicators\n\n## File Structure\n\n```\ncolour_palette_generator/\n├── app.py                 # Main Flask application\n├── requirements.txt       # Python dependencies\n├── README.md             # This file\n├── templates/\n│   └── index.html        # Main web interface\n└── static/\n    └── uploads/          # Temporary upload directory (auto-created)\n```\n\n## API Endpoints\n\n### GET `/`\nReturns the main web interface.\n\n### POST `/upload`\nProcesses uploaded image and returns color analysis.\n\n**Request**: Multipart form data with image file\n**Response**: JSON with color palette data\n```json\n{\n    \"success\": true,\n    \"colors\": [\n        {\n            \"rgb\": [255, 128, 64],\n            \"hex\": \"#ff8040\", \n            \"percentage\": 15.3\n        }\n        // ... more colors\n    ],\n    \"image_data\": \"base64_encoded_image\",\n    \"filename\": \"uploaded_filename.jpg\"\n}\n```\n\n## Security Features\n\n- **File Type Validation**: Only allows image file types\n- **File Size Limit**: Maximum 16MB upload size\n- **Secure Filenames**: Uses Werkzeug's secure_filename\n- **Temporary Storage**: Uploaded files are automatically deleted after processing\n\n## Browser Compatibility\n\n- ✅ Chrome/Chromium (latest)\n- ✅ Firefox (latest)\n- ✅ Safari (latest)\n- ✅ Edge (latest)\n\n## Example Usage\n\n1. Visit the website at `http://localhost:8080`\n2. Drag an image onto the upload area or click \"Choose File\"\n3. Wait for processing (usually takes 1-3 seconds)\n4. View the extracted color palette\n5. Click any color to copy its hex code to clipboard\n6. Click \"Upload Another Image\" to analyze a new image\n\n## Performance Notes\n\n- Images are resized to 150x150 pixels for faster processing\n- K-means clustering is optimized for up to 10 color clusters\n- Processing time is typically under 3 seconds for most images\n- Temporary files are automatically cleaned up after processing\n\n## Troubleshooting\n\n**NumPy compatibility issues?**\n- Run `pip install \"numpy\u003c2\"` to downgrade to a compatible version\n- This is due to scikit-learn being compiled with NumPy 1.x\n\n**Port 8080 already in use?**\n- Change the port in `app.py` (last line) to a different number\n- Update the URL in your browser accordingly\n\n**Large files taking too long?**\n- The app automatically resizes images for faster processing\n- Maximum file size is 16MB\n\n**Colors don't look accurate?**\n- The algorithm groups similar colors together\n- Very detailed images may have colors averaged by the clustering algorithm\n- Try images with more distinct color regions for better results\n\n**Browser compatibility issues?**\n- Make sure you're using a modern browser\n- Enable JavaScript\n- Some older browsers may not support all features\n\n## Contributing\n\nFeel free to submit issues, feature requests, or pull requests to improve this color palette generator!\n\n## License\n\nThis project is open source and available under the MIT License. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmallocode300%2Fcolour_palette_generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmallocode300%2Fcolour_palette_generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmallocode300%2Fcolour_palette_generator/lists"}