ChromaGen

Unleash Your Creativity with AI-Powered Color Harmony

Comment

Inspiration

The vision for ChromaGen was born from a deep passion for the emotional power of colors and the persistent challenge of crafting accessible, harmonious palettes. Inspired by the stunning gradients of tropical sunsets and the growing demand for tools that democratize design while adhering to accessibility standards like WCAG, I embarked on a journey to harness AI’s potential to revolutionize this process.

What it does

ChromaGen is an innovative, AI-powered tool designed to generate harmonious color palettes from three distinct input types: text prompts, uploaded images, or website URLs. It organizes the resulting colors into primary, secondary, and accent categories, providing HEX, RGB, and HSL codes for easy use. The tool ensures WCAG AA and AAA accessibility compliance by automatically auditing contrast ratios and offering a color-blindness simulation, making it a versatile solution for inclusive design.

How we built it

The development of ChromaGen centers around a sophisticated agentic system, a dynamic AI framework that autonomously processes and responds to user inputs. Our website supports three input modalities: text, images, and URLs. For text inputs, such as "a calming palette for a meditation app," the agentic system—powered by a fine-tuned large language model (LLM)—analyzes the context, interprets the user’s intent, and generates a tailored color scheme. For images, the system employs computer vision techniques, using libraries like OpenCV and PIL, to extract dominant colors and patterns, converting visual data into a cohesive palette. For URLs, the agentic system leverages web scraping with BeautifulSoup and requests to analyze the target website’s CSS and HTML, identifying its existing color scheme for inspiration or replication.

At the heart of this agentic system is a multi-agent architecture. A primary AI agent coordinates the workflow, delegating tasks to specialized sub-agents: one for natural language processing (NLP) to handle text prompts, another for image analysis, and a third for web scraping and CSS parsing. These agents collaborate seamlessly, using a shared knowledge base to ensure consistency. Once the input is processed, the system employs a generative AI model—fine-tuned on a dataset of color theory principles and design aesthetics—to create five unique palette options. These palettes are then evaluated by an accessibility agent, which computes WCAG contrast ratios using the formula:

[ \text{Contrast Ratio} = \frac{\max(L_1, L_2) + 0.05}{\min(L_1, L_2) + 0.05} ]

where ( L_1 ) and ( L_2 ) are the relative luminance values of the colors, ensuring AA and AAA compliance. The palettes are visually rendered on the front end using a custom-built JavaScript library, integrated with HTML and CSS, allowing users to view and interact with the results. Users can edit the palettes—e.g., requesting "make it darker" or "shift to cooler tones"—triggering the agentic system to dynamically adjust the colors using color manipulation algorithms from the Chroma.js library, all while maintaining accessibility standards.

Challenges we ran into

Achieving consistent WCAG compliance across diverse inputs was a significant hurdle, requiring extensive fine-tuning of the generative model and iterative testing. The agentic system faced challenges in harmonizing outputs from text, image, and URL inputs, often producing inconsistent results due to varying data quality. Optimizing the system for real-time performance was another obstacle, as the multi-agent coordination and accessibility audits demanded efficient resource management. Integrating color-blindness simulation added computational overhead but was crucial for inclusivity.

Accomplishments that we're proud of

We take immense pride in developing an agentic system that autonomously handles multi-modal inputs with remarkable adaptability. The ability to generate five customizable palette options, each audited for accessibility, marks a leap forward in design technology. The seamless integration of web scraping, image analysis, and NLP into a cohesive workflow is a testament to the power of our agent-based approach.

What we learned

This project deepened my expertise in agentic AI systems, color theory, and accessibility standards. I mastered the intricacies of multi-agent coordination, learned to optimize complex workflows, and gained insights into the nuances of user-centered design, particularly the importance of inclusivity in color selection.

What's next for ChromaGen

Looking ahead, we plan to enhance the agentic system with machine learning to improve palette accuracy and personalization. Features like real-time collaboration and support for additional languages will broaden its global reach. User feedback will guide further refinements, ensuring ChromaGen evolves into an indispensable tool for designers worldwide.

Built With

  • agentic-ai
  • fastapi
  • large-language-models
  • llms
  • mongodb
  • next.js
  • python
  • renderer
  • vercel
Share this project:

Updates