{"id":30364746,"url":"https://github.com/srummanf/image-palette","last_synced_at":"2026-05-19T14:41:29.965Z","repository":{"id":307988470,"uuid":"1031279785","full_name":"srummanf/image-palette","owner":"srummanf","description":"Extract dominant colors from any image.","archived":false,"fork":false,"pushed_at":"2025-08-03T12:34:25.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T14:19:51.218Z","etag":null,"topics":["color-palette","image-processing","nextjs"],"latest_commit_sha":null,"homepage":"https://color-palette-gen-from-image.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srummanf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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-08-03T12:08:34.000Z","updated_at":"2025-08-03T14:16:48.000Z","dependencies_parsed_at":"2025-08-03T14:20:29.032Z","dependency_job_id":null,"html_url":"https://github.com/srummanf/image-palette","commit_stats":null,"previous_names":["srummanf/color-palette"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/srummanf/image-palette","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srummanf%2Fimage-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srummanf%2Fimage-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srummanf%2Fimage-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srummanf%2Fimage-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srummanf","download_url":"https://codeload.github.com/srummanf/image-palette/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srummanf%2Fimage-palette/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271215037,"owners_count":24720098,"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-08-19T02:00:09.176Z","response_time":63,"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":["color-palette","image-processing","nextjs"],"created_at":"2025-08-19T20:19:40.641Z","updated_at":"2026-05-19T14:41:24.933Z","avatar_url":"https://github.com/srummanf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# COLOR PALETTE GENERATOR FROM IMAGE\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/2d660b49-8faa-437a-8b7d-79859868e491/deploy-status)](https://app.netlify.com/projects/color-palette-gen-from-image/deploys)\n\n![1754230951531](image/README/1754230951531.png)\n\nA brutalist-designed web application that extracts dominant color palettes from images using advanced computer vision algorithms. Built with Next.js and TypeScript, featuring a bold black-and-white interface with industrial typography.\n\n## Features\n\n- **Smart Color Extraction**: Advanced algorithm that considers visual composition, spatial relevance, and aesthetic impact\n- **Multiple Input Methods**: Upload files, drag \u0026 drop, or paste images directly (Ctrl+V)\n- **Dual Format Output**: Get colors in both HEX and RGB formats\n- **Instant Copy**: Click any color to copy to clipboard\n- **Responsive Design**: Works seamlessly across desktop and mobile devices\n- **Brutalist UI**: Bold, industrial design with harsh contrasts and geometric typography\n\n## Algorithm Overview\n\nThe color extraction algorithm goes beyond simple frequency analysis to provide meaningful, contextually relevant color palettes:\n\n```mermaid\nflowchart TD\n    A[Image Input] --\u003e B[Scale \u0026 Process Image]\n    B --\u003e C[Pixel Analysis]\n    C --\u003e D[Color Grouping]\n    D --\u003e E[Calculate Scores]\n    E --\u003e F[Diversity Selection]\n    F --\u003e G[Final Palette]\n\n    C --\u003e C1[Extract RGB Values]\n    C --\u003e C2[Skip Transparent Pixels]\n  \n    D --\u003e D1[Group Similar Colors\u003cbr/\u003e15-point intervals]\n    D --\u003e D2[Count Frequencies]\n  \n    E --\u003e E1[Frequency Score\u003cbr/\u003eCoverage percentage]\n    E --\u003e E2[Visual Impact Score\u003cbr/\u003eSaturation + Colorfulness]\n    E --\u003e E3[Final Score\u003cbr/\u003eBalanced weighting]\n  \n    F --\u003e F1[Sort by Score]\n    F --\u003e F2[Ensure Color Diversity\u003cbr/\u003eMin distance: 40]\n    F --\u003e F3[Adaptive Selection]\n```\n\n### Algorithm Details\n\n1. **Image Processing**: Scales image to optimal size (300px max) for performance\n2. **Pixel Sampling**: Analyzes every pixel for maximum accuracy\n3. **Smart Grouping**: Groups similar colors using 15-point intervals\n4. **Multi-factor Scoring**:\n   - **Frequency Score** (70%): How much space the color occupies\n   - **Visual Impact** (30%): Saturation and colorfulness bonuses\n5. **Diversity Selection**: Ensures colors are perceptually distinct (minimum distance: 40)\n6. **Adaptive Fallback**: Gradually relaxes distance requirements if needed\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18.0 or later\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/yourusername/image-palette.git\n   cd image-palette\n   ```\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n3. **Run development server**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n4. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n### Build for Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Usage\n\n1. **Upload an Image**:\n\n   - Click the upload area\n   - Drag and drop an image\n   - Paste an image using `Ctrl+V` (or `Cmd+V` on Mac)\n2. **Extract Colors**:\n\n   - The algorithm automatically processes your image\n   - Wait for the \"ANALYZING...\" phase to complete\n3. **Copy Colors**:\n\n   - Click any color swatch to copy HEX value\n   - Click HEX button to copy HEX format\n   - Click RGB button to copy RGB format\n4. **Download JSON**: Click the button to download the colors in JSON Format.\n\n```json\n   {\n  \"colors\": [\n    {\n      \"id\": 1,\n      \"hex\": \"#1e2d2d\",\n      \"rgb\": \"rgb(30, 45, 45)\",\n      \"name\": \"Color 1\"\n    },\n    {\n      \"id\": 2,\n      \"hex\": \"#2d3c3c\",\n      \"rgb\": \"rgb(45, 60, 60)\",\n      \"name\": \"Color 2\"\n    },\n    {\n      \"id\": 3,\n      \"hex\": \"#3c5a5a\",\n      \"rgb\": \"rgb(60, 90, 90)\",\n      \"name\": \"Color 3\"\n    },\n    {\n      \"id\": 4,\n      \"hex\": \"#4b6969\",\n      \"rgb\": \"rgb(75, 105, 105)\",\n      \"name\": \"Color 4\"\n    },\n    {\n      \"id\": 5,\n      \"hex\": \"#d2b487\",\n      \"rgb\": \"rgb(210, 180, 135)\",\n      \"name\": \"Color 5\"\n    }\n  ],\n  \"extractedAt\": \"2025-08-03T12:00:45.949Z\",\n  \"totalColors\": 5\n}\n```\n\n## Use Cases\n\n- **Design \u0026 Branding**: Extract brand colors from logos and imagery\n- **UI/UX Design**: Create consistent color schemes from mockups\n- **Photography**: Analyze color composition in photos\n- **Fashion \u0026 Retail**: Match product colors and create collections\n- **Interior Design**: Generate palettes from room photos\n- **Marketing**: Ensure brand consistency across materials\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n# ⚡Extract dominant colors from any image.\n\n---\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\" width=\"50%\"\u003e\n      \u003cstrong\u003eMaintained by\u003c/strong\u003e\u003cbr /\u003e\n      Shaikh Rumman Fardeen\u003cbr /\u003e\n      \u003ca href=\"https://github.com/srummanf\"\u003eGitHub: @srummanf\u003c/a\u003e\u003cbr /\u003e\n      \u003ca href=\"mailto:rummanfardeen4567@gmail.com\"\u003erummanfardeen4567@gmail.com\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"right\" width=\"50%\"\u003e\n      \u003cstrong\u003eProject Links\u003c/strong\u003e\u003cbr /\u003e\n      \u003ca href=\"https://color-palette-gen-from-image.netlify.app/\"\u003eLive Demo\u003c/a\u003e\u003cbr /\u003e\n      \u003ca href=\"https://github.com/srummanf/color-palette/\"\u003eSource Code\u003c/a\u003e\u003cbr /\u003e\n      \u003ca href=\"./LICENSE\"\u003eMIT License\u003c/a\u003e | \u003ca href=\"./CONTRIBUTING.md\"\u003eContributing\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrummanf%2Fimage-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrummanf%2Fimage-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrummanf%2Fimage-palette/lists"}