BranchesTags

Repository files navigation

Color Palette Generator 🎨✨

AI-powered color palette extraction from any image

LicenseVue.jsTailwind CSSPWA Ready

Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.

Screenshot

✨ Features

  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:
    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:
    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:
    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:
    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions

Setup

Prerequisites

  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).

Installation

  1. Clone the repository:

    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator

  2. Install dependencies:

    npm install

  3. Set up environment variables:

    • Create a .env file in the root directory and add your Unsplash API key: 
      VITE_API_KEY=your_unsplash_api_key

  4. Run the development server:

    npm run dev

  5. Open your browser and visit http://localhost:5173 to view the application.

Technologies Used

  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.

Production

Color Palette Generator

Screenshots

Screenshot 1Screenshot 2

How to Use

  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:
    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:
    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.

Environment Variables

The following environment variables need to be configured:

  • VITE_API_KEY: Your Unsplash API key.

Deployment on Vercel

  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:
    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.

Unsplash API Guidelines

To comply with the Unsplash API guidelines:

  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.

Legal and License

  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

About

Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.

image-color-palette-generator.vercel.app/

Topics

axioscolorthiefhtml2canvasprismjsunsplash-apivitevue

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Color Palette Generator 🎨✨
AI-powered color palette extraction from any image
LicenseVue.jsTailwind CSSPWA Ready
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
Screenshot
✨ Features
  • AI-Powered Color Extraction - Extract dominant colors from any image
  • Multiple Input Methods:

    • 🔍 Search Unsplash library with keywords
    • 🎤 Voice commands for hands-free operation
    • 📤 Upload your own images
  • Advanced Color Information:

    • HEX, RGB, and HSL color formats
    • Color accessibility information
    • Color scheme suggestions
  • Export Options:

    • 📋 Copy CSS variables with one click
    • 🖼️ Download palettes as PNG images
    • 📱 Save palettes for offline access (PWA)
  • User Experience:

    • 🌙 Responsive design for all devices
    • ⚡ Fast performance with optimized loading
    • 👆 Drag and reorder colors
    • 🎉 Delightful animations and interactions
Setup
Prerequisites
  • Node.js: Ensure that you have Node.js installed on your system.
  • Vercel account: For deployment (optional).
Installation
  1. Clone the repository:
    git clone https://github.com/peterbenoit/ColorPaletteGenerator.git
cd ColorPaletteGenerator
  2. Install dependencies:
    npm install
  3. Set up environment variables:
    • Create a .env file in the root directory and add your Unsplash API key:

      VITE_API_KEY=your_unsplash_api_key
  4. Run the development server:
    npm run dev
  5. Open your browser and visit http://localhost:5173 to view the application.
Technologies Used
  • Vue.js: Front-end framework for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Vite: Build tool that provides fast, hot-reloading development environments.
  • Axios: Promise-based HTTP client used for API calls to Unsplash.
  • ColorThief: Library used for extracting the dominant colors from an image.
  • html2canvas: Library used for converting the color palette to a downloadable PNG image.
  • Prism.js: Syntax highlighting library for displaying CSS code with color previews.
  • annyang: Voice recognition library for enabling voice search functionality.
Production
Color Palette Generator
Screenshots
Screenshot 1Screenshot 2
How to Use
  1. Enter a keyword and click "Search" to fetch a random image from Unsplash.
  2. Use voice search by clicking the microphone icon or upload your own image.
  3. View the generated color palette with the following options:

    • Switch between different color formats (HEX, RGB, HSL) using the format toggle.
    • Lock specific colors to keep them while generating new palettes.
    • Adjust palette size (5, 7, or 9 colors) from the settings menu.
    • Drag and reorder colors to customize your palette.
  4. Save your work:

    • Copy the CSS with one click to use in your projects.
    • Download the palette as a PNG image.
    • View your palette history to recall previously generated color schemes.
  5. Get real-time notifications for successful actions and helpful tips.
Environment Variables
The following environment variables need to be configured:
  • VITE_API_KEY: Your Unsplash API key.
Deployment on Vercel
  1. Push the repository to GitHub.
  2. In your Vercel dashboard, import the project from GitHub.
  3. Add your environment variable in Vercel:

    • VITE_API_KEY: Set this to your Unsplash API key.
  4. Deploy the project.
Unsplash API Guidelines
To comply with the Unsplash API guidelines:
  • Reporting Image Views: Use the src attribute of the image URLs provided by the API to report image views.
  • 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.
  • Attribution: Provide proper attribution to the photographers and Unsplash.
Legal and License
  • 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.
  • Unsplash API Usage: Make sure to comply with the Unsplash API Terms of Use.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
About
Generate beautiful color palettes from images with ease. Perfect for designers, developers, and creatives looking for unique color inspiration.
image-color-palette-generator.vercel.app/
Topics
axioscolorthiefhtml2canvasprismjsunsplash-apivitevue
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages