Color Palette Generator

Simplifies color selection for non-designers with palette generation, drag-to-canvas, and custom color picking in Adobe Express.

Comment

Inspiration

Non-designers like marketers and educators often struggle to pick cohesive colors in Adobe Express. I was inspired to create the Color Palette Generator Add-on to simplify this process, drawing from tools like Coolors but tailored for seamless integration with Express’s workflow.

What it does

The Color Palette Generator Add-on empowers non-designers to generate color palettes from images, drag colors to the canvas, or pick custom shades via a color picker. It streamlines design by making color selection intuitive and fast within Adobe Express.

How we built it

We built the add-on using React and TypeScript, leveraging Adobe Express’s Add-on SDK for UI integration. The prototype features a clean panel with a “Generate Palette” button, draggable swatches, and an HTML color picker. A mock UI with animated previews simulates canvas interaction due to SDK limitations.

Challenges we ran into

Adobe Express’s SDK posed challenges, including errors with getSelection and createRectangle, preventing direct canvas color application (canvas stayed white). We pivoted to a mock UI with alerts and a 150x150px animated preview to demonstrate functionality for the demo. Accomplishments that we're proud of We’re proud of creating a polished, user-friendly UI that integrates with Adobe Express and effectively simulates palette generation, drag-to-canvas, and color picking. Despite SDK issues, the mock demo clearly conveys the add-on’s value for non-designers.

What we learned

We learned to adapt to SDK limitations by building robust mock workflows and prioritizing UI feedback (alerts, animations). We also gained insights into Adobe Express’s Document APIs and the importance of iterative testing in sandboxed environments.

What's next for Color Palette Generator

Over six weeks, we’ll:

Weeks 1–2: Implement image pixel analysis for palette generation using k-means clustering.
Weeks 3–4: Enable drag-to-canvas and color picker with stable Document APIs.
Weeks 5–6: Polish UX and submit to the Adobe Express marketplace, empowering non-designers with seamless color tools.

Built With

Share this project:

Updates