{"id":22021495,"url":"https://github.com/peterbenoit/colorpalettegenerator","last_synced_at":"2026-04-20T10:32:02.060Z","repository":{"id":262708625,"uuid":"860072363","full_name":"peterbenoit/ColorPaletteGenerator","owner":"peterbenoit","description":"Vue.js application that allows users to search for random images using the Unsplash API and extract the colors from them.","archived":false,"fork":false,"pushed_at":"2024-11-15T12:58:26.000Z","size":3720,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T16:45:01.850Z","etag":null,"topics":["axios","colorthief","html2canvas","prismjs","unsplash-api","vite","vue"],"latest_commit_sha":null,"homepage":"https://color-palette-generator-chi.vercel.app","language":"Vue","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/peterbenoit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2024-09-19T19:12:35.000Z","updated_at":"2024-11-15T12:58:30.000Z","dependencies_parsed_at":"2025-01-28T16:44:23.029Z","dependency_job_id":"39000f3a-3bd5-40b6-a9a6-42f95863c818","html_url":"https://github.com/peterbenoit/ColorPaletteGenerator","commit_stats":null,"previous_names":["peterbenoit/colorpalettegenerator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FColorPaletteGenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FColorPaletteGenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FColorPaletteGenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FColorPaletteGenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/ColorPaletteGenerator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245084948,"owners_count":20558312,"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","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":["axios","colorthief","html2canvas","prismjs","unsplash-api","vite","vue"],"created_at":"2024-11-30T06:12:19.851Z","updated_at":"2026-04-20T10:32:02.053Z","avatar_url":"https://github.com/peterbenoit.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Palette Generator 🎨✨\n\n\u003e AI-powered color palette extraction from any image\n\n![License](https://img.shields.io/github/license/peterbenoit/ColorPaletteGenerator)\n![Vue.js](https://img.shields.io/badge/Vue.js-v3.4-42b883)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-v3.4-38bdf8)\n![PWA Ready](https://img.shields.io/badge/PWA-Ready-5a0fc8)\n\nGenerate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.\n\n![Screenshot](./public/screenshots/Screenshot1.png)\n\n## ✨ Features\n\n-   **AI-Powered Color Extraction** - Extract dominant colors from any image\n-   **Multiple Input Methods**:\n    -   🔍 Search Unsplash library with keywords\n    -   🎤 Voice commands for hands-free operation\n    -   📤 Upload your own images\n-   **Advanced Color Information**:\n    -   HEX, RGB, and HSL color formats\n    -   Color accessibility information\n    -   Color scheme suggestions\n-   **Export Options**:\n    -   📋 Copy CSS variables with one click\n    -   🖼️ Download palettes as PNG images\n    -   📱 Save palettes for offline access (PWA)\n-   **User Experience**:\n    -   🌙 Responsive design for all devices\n    -   ⚡ Fast performance with optimized loading\n    -   👆 Drag and reorder colors\n    -   🎉 Delightful animations and interactions\n\n## Setup\n\n### Prerequisites\n\n-   **Node.js**: Ensure that you have Node.js installed on your system.\n-   **Vercel account**: For deployment (optional).\n\n### Installation\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git\n    cd ColorPaletteGenerator\n    ```\n\n2. Install dependencies:\n\n    ```bash\n    npm install\n    ```\n\n3. Set up environment variables:\n\n    - Create a `.env` file in the root directory and add your Unsplash API key:\n        ```bash\n        VITE_API_KEY=your_unsplash_api_key\n        ```\n\n4. Run the development server:\n\n    ```bash\n    npm run dev\n    ```\n\n5. Open your browser and visit `http://localhost:5173` to view the application.\n\n## Technologies Used\n\n-   **Vue.js**: Front-end framework for building user interfaces.\n-   **Tailwind CSS**: Utility-first CSS framework for styling.\n-   **Vite**: Build tool that provides fast, hot-reloading development environments.\n-   **Axios**: Promise-based HTTP client used for API calls to Unsplash.\n-   **ColorThief**: Library used for extracting the dominant colors from an image.\n-   **html2canvas**: Library used for converting the color palette to a downloadable PNG image.\n-   **Prism.js**: Syntax highlighting library for displaying CSS code with color previews.\n-   **annyang**: Voice recognition library for enabling voice search functionality.\n\n## Production\n\n[Color Palette Generator](https://color-palette-generator-chi.vercel.app/)\n\n## Screenshots\n\n![Screenshot 1](public/screenshots/Screenshot1.png)\n![Screenshot 2](public/screenshots/Screenshot2.png)\n\n## How to Use\n\n1. Enter a keyword and click \"Search\" to fetch a random image from Unsplash.\n2. Use voice search by clicking the microphone icon or upload your own image.\n3. View the generated color palette with the following options:\n    - Switch between different color formats (HEX, RGB, HSL) using the format toggle.\n    - Lock specific colors to keep them while generating new palettes.\n    - Adjust palette size (5, 7, or 9 colors) from the settings menu.\n    - Drag and reorder colors to customize your palette.\n4. Save your work:\n    - Copy the CSS with one click to use in your projects.\n    - Download the palette as a PNG image.\n    - View your palette history to recall previously generated color schemes.\n5. Get real-time notifications for successful actions and helpful tips.\n\n## Environment Variables\n\nThe following environment variables need to be configured:\n\n-   `VITE_API_KEY`: Your Unsplash API key.\n\n## Deployment on Vercel\n\n1. Push the repository to GitHub.\n2. In your Vercel dashboard, import the project from GitHub.\n3. Add your environment variable in Vercel:\n    - `VITE_API_KEY`: Set this to your Unsplash API key.\n4. Deploy the project.\n\n## Unsplash API Guidelines\n\nTo comply with the Unsplash API guidelines:\n\n-   **Reporting Image Views**: Use the `src` attribute of the image URLs provided by the API to report image views.\n-   **Tracking Download Events**: Trigger a download event when a user downloads an image by making a request to the download URL provided by the Unsplash API.\n-   **Attribution**: Provide proper attribution to the photographers and Unsplash.\n\n## Legal and License\n\n-   This project is licensed under the MIT License. Feel free to use, modify, and distribute it. The full license is available in the `LICENSE` file.\n-   **Unsplash API Usage**: Make sure to comply with the [Unsplash API Terms of Use](https://unsplash.com/documentation#terms).\n\n## Contributing\n\nPull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fcolorpalettegenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fcolorpalettegenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fcolorpalettegenerator/lists"}