VergeX

From Inspiration to Implementation

Comment

VergeX — Your Palette, Perfected

Pick a mood. Paint your story. Make every pixel count.

Inspiration

Color defines how users feel and interact with a product — yet creating palettes that are both beautiful and accessible remains a challenge. Designers often juggle multiple tools for palette generation, contrast validation, and localization. We wanted to create a single intelligent system that not only generates harmonious color schemes but also ensures global accessibility and inclusivity. That vision gave birth to VergeX - Your Palette, Perfected.

What it does

VergeX is a next-generation color palette generator that empowers designers and developers to craft stunning, accessible, and globally adaptable color systems.

  • 🎨 Generates scientifically accurate color harmonies (analogous, complementary, triadic, split-complementary)
  • ✅ Validates accessibility in real time with WCAG 2.1 compliance
  • 🌍 Translates all UI text into 40+ languages via the Google Translate API
  • 🧩 Simulates color blindness modes (Deuteranopia, Protanopia, Tritanopia)
  • 💻 Provides instant UI previews and multi-format exports (CSS, Tailwind, JSON, Figma tokens)
  • ⚙️ Saves user preferences for themes and languages persistently

It’s a unified, intelligent workspace for color design - from idea to implementation.

How we built it

  • Frontend: React + TypeScript for modular, component-driven architecture
  • Styling: Tailwind CSS for responsive, modern UI with dark/light mode
  • Accessibility Engine: Custom WCAG 2.1 contrast ratio validator with real-time feedback
  • Color Logic: Implemented advanced color harmony algorithms (complementary, triadic, etc.) using HSL math
  • Internationalization: Integrated Google Translate API for real-time UI translation across 40+ languages
  • Persistence: LocalStorage-based system for saving user theme and language preferences
  • Deployment: Vite for fast builds and smooth developer experience

Challenges we ran into

  • Ensuring accurate color contrast calculations across multiple color models (HEX, RGB, HSL)
  • Managing real-time translation latency and caching translated strings efficiently
  • Building an intuitive yet powerful UI that caters to both designers and developers
  • Simulating color blindness conditions accurately while maintaining performance
  • Handling cross-browser rendering differences for color previews

Accomplishments that we're proud of

  • Built a fully responsive, accessibility-first design tool that integrates seamlessly into modern workflows
  • Achieved real-time color harmony generation and validation
  • Implemented multi-language translation across 40+ languages using AI
  • Created color blindness simulation and contrast feedback for inclusive design
  • Delivered a product that blends aesthetic precision with global accessibility

What we learned

  • Deepened our understanding of color theory and accessibility standards (WCAG 2.1)
  • Learned how to build highly modular and scalable React components
  • Explored AI integration for localization and its impact on design inclusivity
  • Gained insight into UX design for accessibility, particularly visual impairments
  • Strengthened collaboration between design and development disciplines

What's next for VergeX

  • 🔮 AI-Powered Palette Suggestions - Context-aware color recommendations based on project type or mood
  • 🧠 LLM Integration - “Describe your design” → get a palette generated from text prompts
  • 🖼️ Figma & VS Code Extensions - Bring VergeX directly into popular design and dev tools
  • 📊 Team Collaboration Mode - Shared palette editing and versioning
  • 🌈 Export to More Frameworks - Support for Chakra UI, MUI, and Styled Components

⚙️ Installation

git clone https://github.com/aditisingh02/vergex.git  
cd vergex  
npm install  
npm run dev

Built With

Share this project:

Updates