A simple web app that generates beautiful 3-color palettes based on user-provided themes or preferences. Users can view, edit, and customize their palettes directly on the app. Built with HTML, CSS, and JavaScript, this project serves as a foundation for future features like account creation and advanced design tools.
- Generate harmonious 3-color palettes using the GPT.
- View and edit colors in the web app.
- User-friendly interface.
This demo is intended to demonstrate the custom GPT and the web app. To view the GPT, you must have a ChatGPT Plus Plan. The GPT will provide an opportunity to request a custom 3-color palette and a link to the associated web app.
To view the Color Palette GPT, visit the GPT store: Color Palette GPT
Example prompt:
Create a retro-style palette for a gaming website.
Example response:
🎨 Retro-Style Gaming Website Palette:
Vibrant Coral Red (#FF5E5B)
Classic Cobalt Blue (#2E86AB)
Goldenrod Yellow (#F6C85F)
🔗 View and customize your palette here: Color Palette Generator
To view the Color Palette Generator web app without using the GPT, visit the live app: Color Palette Generator. Pass the colors query parameter to display them on the home page. The colors query parameter should be a comma-separated list of HEX codes.
Example URL:
https://hblake316.github.io/color-palette/?colors=%23FF5E5B,%232E86AB,%23F6C85F
The GPT is returning an invalid link such that it is not clickable in the GPT response. This is a known issue with work-arounds. For now, the GPT returns the URL in a code snippet so that it may easily be copied and pasted into a browser address.
- HTML: For the structure of the app.
- CSS: For styling and layout.
- JavaScript: For functionality and interactivity.
- GitHub Pages: For hosting the app.
- ChatGPT Store: For creating and hosting the GPT.
- Handle invalid link
- Add account creation and user login system.
- Expand palettes to 5 or more colors with advanced customization options.
- Allow users to download palettes in various formats (e.g., CSS, JSON).
Created by Heather Blake
For questions or feedback, reach out at: hblake.dev@gmail.com