Palettic is a versatile web application designed for designers, developers, and artists to generate and explore beautiful color palettes with ease. With powerful AI features integrated, Palettic goes beyond basic color tools to deliver mood-based color generation, creative naming, and personalized theme palettes — making color discovery intuitive and inspiring.

• 🎨 Color Input & Conversion
  Use an intuitive color picker to view HEX, RGB, and HSL values instantly.

• 🌈 Dynamic Palette Generation
  Automatically generate palettes including:

  • Complementary
  • Analogous
  • Triadic
  • Split-Complementary
  • Tints and Shades

• 📋 Copy to Clipboard
  Instantly copy any color value or swatch with one click.

• 🌗 Dark Mode Toggle
  Switch between light and dark modes for visual comfort.

• 💾 Export to CSS
  Download generated palettes as CSS variables — perfect for web development.

• 🧠 AI-Powered Creative Color Naming
  Get unique and descriptive names for your colors using Gemini API.

• 🎭 Mood-Based Color Generation
  Enter a mood or theme (e.g., "calm forest") and let AI pick a suitable color.

• 🧩 AI-Suggested Theme Palettes
  Provide keywords (e.g., "sci-fi, vintage") and receive a full thematic palette.

• 📖 AI Palette Description
  Get insights on the mood, feel, and use-case suggestions for your palette.

• 💬 Personalized AI Chatbot
  Ask questions to an AI chatbot trained on the background of AbdElRahman Hesham, an AI Engineer & Data Scientist.

• HTML5 – Web structure
• Tailwind CSS – Utility-first styling
• JavaScript (ES6+) – Interactivity, logic, and API calls
• Google Gemini API – For all AI-driven functionalities

  git clone https://github.com/Boda1607/Palettic.git
  
cd palettic

Get your API key from Google AI Studio:

1. Create a new API key.
2. Replace the placeholder in index.html:

const GENERAL_API_KEY = "YOUR_GEMINI_API_KEY_HERE";

Make sure your app updates all AI-related functions accordingly:

• describePaletteMood()
• generateColorFromMood()
• suggestThemePalette()
• generateCreativeColorName()
• sendMessage()

No server needed — simply open index.html in your browser and start exploring.

Use the color picker — HEX, RGB, and HSL values update instantly.

A harmonious palette is auto-generated based on your base color.

Click any swatch or value to copy it to the clipboard.

Use the sun/moon icon to switch between light and dark mode.

Click “Export as CSS” to download theme-ready variables.

• ✨ Generate Name
  Enter a HEX color — get a creative, AI-generated color name.

• ✨ Generate Color from Mood
  Describe a mood or theme — AI returns a matching HEX color.

• ✨ Suggest Theme Palette
  Write a prompt like "futuristic tech" — AI returns a JSON-based color palette.

• ✨ Describe Palette Mood
  Analyze your current palette — AI describes the mood and best use cases.

Chat interface powered by Gemini AI.

Ask questions about:

• 🎨 Color theory & design
• 🤖 AI & machine learning
• 👤 AbdElRahman Hesham’s career, skills, and experience

Additionally, the chatbot is designed to assist you in choosing colors by providing expert guidance, suggestions, and AI-powered color insights. Whether you're selecting a base color, exploring harmonious palettes, or looking to evoke a specific mood or theme, the chatbot offers personalized recommendations tailored to your creative goals.

Leveraging advanced AI algorithms and deep knowledge of color theory, the chatbot can:

• Suggest complementary, analogous, triadic, or custom palettes based on your preferences
• Generate creative and meaningful color names to inspire your design
• Interpret mood descriptions to produce matching color values that capture the right feeling
• Analyze existing palettes and describe their emotional impact and best use cases
• Answer your questions about color theory, design principles, and practical application

This makes the chatbot an invaluable creative assistant, guiding both beginners and experienced designers to make confident, informed color choices. ing advice

MIT License — Free to use, modify, and distribute.

Created by AbdElRahman Hesham
For collaborations or feedback, feel free to reach out.

1. Open your project folder.
2. Create a new file: README.md
3. Paste this content and save.

Let me know if you want to:

• 🗂 Turn this into a full GitHub repository
• 📛 Add badges (e.g., GitHub stars, license, live demo)
• 📷 Include screenshots/GIFs of the app in action
• 📦 Add manifest.json and service-worker.js to make it a PWA

Just say the word, and I’ll handle the rest!

Thank you for using Color Palette AI Explorer! 🎨🤖