shadealchemy

Mix Colors with AI Magic

Comment

Inspiration

We wanted to reimagine how people interact with colours — not just as HEX codes, but as something personal, emotional, and creative. From painting walls to designing websites, colour mixing often feels technical and intimidating. Our idea was to make it playful, intuitive, and beginner-friendly.

What it does

  • ShadeAlchemy is a pastel-themed web app where users can:
  • Convert colours between HEX, RGB, and HSL formats.
  • Mix two colours and generate step-by-step “paint recipes.”
  • Explore mood-based colour palettes (happy, calm, energetic, etc.).
  • Save and view their own “colour inventory.”
  • All of this is built with vanilla web technologies (HTML, CSS, and JS) for the hackathon.

How we built it

  • Frontend: Vanilla HTML, CSS, and JavaScript (no frameworks).
  • Design: Soft pastel palette, mobile-first responsive design.

Features:

  • Custom functions for color conversions.
  • A recipe generator algorithm that blends RGB values.
  • Local storage for user’s saved palettes.
  • Tools: GitHub Pages for hosting, Canva/Figma for UI sketching.

Challenges we ran into

  • Implementing accurate color mixing math without libraries.
  • Making the UI look clean and friendly while sticking to vanilla CSS.
  • Managing state (like saved colors and recipes) without React or frameworks.
  • Accomplishments that we're proud of
  • Designed a fully working, interactive tool with zero frameworks.
  • Created mood-based palettes that connect emotions to colors.
  • Built a clean, pastel-themed interface that feels polished and beginner-friendly.
  • Learned how to manage app-like interactions with just HTML, CSS, and JS.

What we learned

  • How to implement algorithms (like color blending) in raw JavaScript.
  • The importance of UI/UX — even simple apps can feel magical if they’re designed well.
  • Better GitHub project structuring and writing clear README files.

What's next for ShadeAlchemy

  • Add drag-and-drop mixing and real-time sliders.
  • Enable sharing palettes with friends via links or QR codes.
  • Expand “mood colors” into a full AI-driven recommendation system.
  • Mobile PWA support so users can save it like an app on their phone.
Share this project:

Updates