Case Study: Building Huestar — A Designer's Journey Into Colors, Code, and AI
The Project
Huestar is a web-based platform that allows designers to explore, create, and manage color palettes while ensuring usability and accessibility.
From curated brand inspirations to complete color spectrums with tints and shades, from accessibility checks to developer-ready exports, Huestar offers a comprehensive experience for anyone working with colors.
Huestar is a one-stop destination for designers looking for both creative inspiration and technical precision. Whether you’re building a new brand identity, refining a design system, or simply experimenting with colors, Huestar has you covered.
The platform supports multiple formats such as HEX, OKLCH, HSL, and RGB, along with export options for Tailwind, SCSS, and CSS.
My Role
- User Research
- User Interviews
- Journey Mapping
- Sketching
- Screen Flows
- Visual Design & Interaction Design
- AI Powered Development
- Testing & Iteration
Tools
- Cursor
- Bolt
- Vercel
The Huestar Journey
Discover the Real Frustrations
Before a single pixel was drawn, I dove into the colorful chaos of real projects: interviewing dozens of designers, shadowing their workflows, and mapping every “why does this even exist?” moment. Inspiration didn’t come from boardrooms. It came straight from pain points no ordinary tool wanted to fix.
Decode What Matters Most
Every story, every screenshot, every badly exported hex/rgb code was dissected. Instead of guessing problems, hard data sculpted design goals: streamlined color discovery, authentic brand palettes, and accessibility baked in from the first click.
Dream Wild & Invent Solutions
No one wanted another palette generator. So brainstorming collided with wild experimentation mockups sketched on napkins, live ideation sessions with AI, models spinning infinite color wheels, all to invent features that spark joy instead of more copy-paste.
Build Fast, Break Fast
Early versions were real, broken, beautiful experiments. Designers tested prototypes directly on production projects, not just for “feedback,” but to see what lived, what died, and what surprised everyone. The best ideas survived intense trial by fire.
Iterate in Real-Time
Every mistake became fuel for better design. Feedback sessions turned into improvement sprints, with AI solving bugs, and new features launching at warp speed.
Huestar didn’t just change. It evolved.
Launch, Listen, Level Up
Launch wasn’t the end, it was a starting line. Brand color insights, instant accessibility, and lightning-fast exports wowed users. But every click, swipe, and survey drove new updates, smarter suggestions, and features nobody thought possible.
The Midnight Revelation
Picture this: It’s 2 AM, and I’m staring at my computer screen, toggling between seven different browser tabs. One had Coolors open with a half-decent palette, another showed Pinterest boards labeled “Brand Inspo,” and a third displayed a contrast checker that just told me my carefully chosen colors failed accessibility standards. Again.
I was designing a fintech app, and the I wanted something “trustworthy but approachable.” I’d been at this for three hours, and all I had was a desktop cluttered with screenshots, a messy desk and a growing sense that there had to be a better way.
That’s when it hit me: I wasn’t just designing interfaces anymore. I was playing detective, archaeologist, and translator all at once. Detective, hunting for the perfect palette across the internet. Archaeologist, digging through saved inspiration folders from projects past. Translator, converting my creative vision into developer-friendly formats.
“What if,” I thought, stretching back in my chair, “what if there was one place where all of this just… worked together?”
That midnight frustration became Huestar. But before jumping into solutions, I knew I needed to validate whether other designers shared these same struggles.
The Research Foundation
(Discovering the Real Problems)
The next morning, I didn’t immediately start sketching interfaces or researching development frameworks. Instead, I did what any methodical designer should do: I launched a comprehensive user research initiative.
Phase 1: Discovery Research
My discovery phase lasted three weeks and followed established UX research methodologies. I started with stakeholder interviews within my own network of freelance designers and fellow designers, followed by systematic user interviews with 15 practicing designers across different specialties: web design, mobile app design, brand identity, and digital marketing.
The interview structure was semi-structured, allowing for both planned questions and organic follow-ups. My core research questions were:
✻ “Walk me through your typical color selection process for a new project”
✻ “What tools do you currently use and why?”
✻ “Describe the last time you felt frustrated with your color workflow”
✻ “How do you ensure accessibility in your color choices?”
✻ “How do you communicate color decisions to developers?”
Phase 2: Contextual Inquiry
Beyond traditional interviews, I conducted contextual inquiries, observing three designers and front end developer working on real projects in their natural environment. This observational research revealed pain points that participants might not have articulated in interviews. I watched them switch between 8-12 different tools during a single color selection session, take screenshots to remember palette combinations, and manually convert hex codes into different formats.
Phase 3: The Tool Landscape Reality Check
I systematically audited 15+ color tools, and what I discovered was shocking. The market was split into two extremes: either overly complicated tools that required a PhD in color science to operate, or painfully simple tools with barely any useful features.
Adobe Color felt like using Photoshop to write a grocery list… powerful but overwhelming for everyday tasks. On the flip side, tools like Color Hunt looked pretty but offered nothing beyond basic palette browsing. There was no middle ground for professional designers who needed sophisticated functionality wrapped in an intuitive interface.
But here’s what really stunned me: not a single tool I tested had proper colorblindness simulation.
In 2024, with 8% of men having some form of color vision deficiency, every major color tool was ignoring accessibility completely. It wasn’t just a missing feature, it was a fundamental oversight that affected millions of users.
Phase 4: Data Synthesis and Journey Mapping
All research was synthesized using affinity mapping techniques. I created detailed user personas representing different designer archetypes: the systematic corporate designer, the fast-paced freelancer, the accessibility-conscious UXer, and the creative agency designer. Each persona had distinct pain points, goals, and workflow preferences.
The research revealed four critical pain point categories, each validated by multiple data sources and user testimonies. This wasn’t just my personal frustration; it was a systematic problem affecting designers across different contexts and experience levels.
The Discovery Phase Results
User Interviews Revealed Deep Frustrations
Through structured interviews, patterns emerged immediately.
A UX designer at a Edtech startup, told me: “I spend more time managing colors than actually designing with them. I have Notion pages, Figma files, and phone notes all trying to keep track of the same palettes.“
A freelance web designer, shared: “Clients always ask for ‘accessible colors,’ but most palette tools don’t even mention WCAG compliance. I end up running everything through separate checkers afterward.“
But the most telling insight came from, a brand designer at a tech startup: “When I pick a blue, I have no idea if it feels ‘trustworthy like PayPal’ or ‘energetic like Twitter.’ I’m flying blind without any reference to how successful brands actually use these colors.”
Contextual Observations Uncovered Hidden Workflows
I watched designers desperately seeking color inspiration by googling “Airbnb brand colors” or “Stripe color palette” – manually hunting for brand color references that should have been integrated into their tools
Journey Mapping Revealed Systematic Breakdowns
The user journey mapping exercise exposed that the color workflow wasn’t just inefficient, it was fundamentally broken. Every designer followed a similar pattern: Inspiration → Creation → Testing → Implementation, but each transition involved manual, error-prone steps that broke their creative flow.
The Methodology Behind the Madness
Personas and User Stories
From the research, I developed four primary personas with distinct needs:
Pulkit the Agency Designer: Needs speed and inspiration, works on diverse projects
Shikha the Freelancer: Requires consistency and documentation, works within design systems
Ishika the Accessibility Advocate: Prioritizes inclusion, needs comprehensive testing tools
Maitrey the Developer: Needs seamless export options and technical precision.
The Science Behind the Magic
While conducting user research, I simultaneously dove into the technical research. This dual approach ensured that Huestar would be both user-centered and technically sophisticated.
I discovered OKLCH (Oklch Lightness Chroma Hue), a color space that matches human perception better than traditional RGB or HSL.
I researched accessibility guidelines beyond basic contrast ratios, learning about protanopia, deuteranopia, and tritanopia etc types of color vision deficiency affecting about 8% of men and 0.5% of women.
Most importantly, I realized that existing tools were limited by their dependency on pre-built libraries. Tailwind CSS palettes, Material Design colors, they were all constrained by someone else’s color choices.
I wanted Huestar to generate truly sophisticated color spectrums that could work with any brand, any style, any creative vision.
The Build: AI Partnership Evolution
Starting the Collaboration
Armed with validated user needs and technical requirements, I began the build phase. But here’s where the story gets interesting: I’m not a developer. I can barely spell “JavaScript” without autocorrect.
My first conversation with Claude was naive.
But something magical happened. Instead of laughing at my non-technical question, the AI broke down the problem into digestible chunks.
The Architecture Emerges Through Conversation
Instead of starting with a tech stack, I started with user problems. “I need to generate color palettes that feel harmonious but aren’t limited to existing libraries,” I told the AI.
This led to fascinating technical discussions. The AI introduced me to Chroma.js, a powerful color manipulation library that could handle any color space conversion. We explored React 18 with TypeScript for type safety, Vite for lightning-fast development, and Tailwind CSS for rapid UI development.
But the real breakthrough came when I explained the accessibility requirement: “Every color combination needs real-time WCAG compliance checking and color blindness simulation.” The AI didn’t just suggest libraries, it helped me architect a system where accessibility was integrated throughout the entire user experience.
The Learning Curve Documented
I meticulously tracked my progress week by week, measuring four key collaboration metrics: problem-solving efficiency, code understanding, feature complexity I could tackle, and debugging speed.
Week 1-3: The Steep Learning Phase
Initially, every error message felt like a foreign language. “Cannot resolve module ‘react-router-dom'” might as well have been hieroglyphics. But I developed a system: every error became a conversation starter with AI
Me: "What does this mean and how do I fix it?"
AI: "This error means your project can't find the React Router library. Here's how to install it and why you need it..."
Week 4-7: Building Confidence
By month one, I was having technical conversations about color theory algorithms, database structures, and API design. The AI didn’t just give me code; it taught me to think like a developer while maintaining my designer perspective.
This is when we tackled the sophisticated color spectrum generation. Unlike existing tools that relied on pre-built palettes, we implemented algorithms that could generate infinite color variations using mathematical relationships in OKLCH color space. The AI helped me understand concepts like chroma scaling, hue shifting, and perceptual lightness that made our palettes feel naturally harmonious.This is when we tackled the sophisticated color spectrum generation. Unlike existing tools that relied on pre-built palettes, we implemented algorithms that could generate infinite color variations using mathematical relationships in OKLCH color space. The AI helped me understand concepts like chroma scaling, hue shifting, and perceptual lightness that made our palettes feel naturally harmonious.
Week 8-11: True Partnership
The relationship evolved into genuine collaboration. I’d describe complex user needs, and together we’d architect solutions. “Users need to generate harmonious palettes but also have granular control over individual colors” became technical specifications for algorithmic palette generation with manual override capabilities
This phase brought the most ambitious features to life:
Brand Psychology Integration: When users hover over any color, Huestar shows which famous brands use that color and the psychological associations. This required building a comprehensive database of brand colors and their psychological mappings – something no other tool had attempted.
Famous Brand Inspiration Hub: Instead of generic palette collections, I curated actual brand palettes from over 50 companies like Stripe, Airbnb, Notion, and PayPal. Users can explore these palettes, understand the psychology behind brand color choices, and adapt them for their own projects.
The Feature Evolution Through User Feedback
AI-Guided Development with User Validation
Each major feature went through a cycle: user need identification → AI-assisted technical research → prototype development → user testing → iteration.
Sophisticated Color Spectrum Generation
The biggest technical challenge was creating algorithms that could generate truly harmonious color spectrum beyond the limitations of existing libraries. While Coolors relied on basic complementary relationships and Material Design was locked into Google’s color choices, Huestar needed complete flexibility.
Working with AI, I implemented advanced color theory using OKLCH color space, allowing for:
✻ Perceptually uniform lightness scaling
✻ Mathematically precise hue relationships
✻ Chroma adjustments that maintain visual harmony
✻ Spectrum generation for any base color
Here’s where Huestar truly differentiated itself: comprehensive colorblindness simulation for all three major types of color vision deficiency. The AI helped me implement algorithms that simulate:
Revolutionary Colorblindness Integration
Here’s where Huestar truly differentiated itself: comprehensive colorblindness simulation for all three major types of color vision deficiency. The AI helped me implement algorithms that simulate:
✻ Protanopia (red-blind, ~1% of men)
✻ Deuteranopia (green-blind, ~1% of men)
✻ Tritanopia (blue-blind, ~0.01% of people)
But we didn’t stop at simulation. The tool actively suggests palette adjustments to improve accessibility for colorblind users – something no other tool offered.
Brand Color Psychology Engine
The brand psychology feature required building a comprehensive database mapping colors to brand associations and psychological meanings. The AI helped me research color psychology studies and map them to real brand usage patterns.
When users select any color in Huestar, they see:
✻ Which famous brands use similar colors
✻ The psychological associations of that color choice
✻ How that color might be perceived by their target audience
✻ Suggestions for complementary colors based on successful brand combinations
Export Magic Beyond Standard Formats
While other tools offered basic hex exports or limited CSS, Huestar supports 4 export formats:
✻ Tailwind 3
✻ Tailwind 4
✻ CSS Variable
✻ SCSS Variable
✻ Hex
✻ OKLCH
✻ HSL
✻ RGB
Each export format is optimized for specific workflows, with proper naming conventions and documentation
AI as Technical Consultant: Security, Performance, and Deployment
Security Architecture Collaboration
As the project grew more sophisticated, I faced challenges I never anticipated: user authentication, data security, and production deployment. Here’s where AI became not just a coding partner, but a technical consultant.
When I asked, “How do I make this secure for real users?”, the AI guided me through implementing:
✻ JWT token authentication using python-jose
✻ Comprehensive Content Security Policy (CSP) headers to prevent XSS attacks
✻ HTTPS enforcement and security header implementation
✻ Password hashing with proper salt using passlib
✻ SQL injection protection through SQLAlchemy ORM
Here’s where Huestar truly differentiated itself: comprehensive colorblindness simulation for all three major types of color vision deficiency. The AI helped me implement algorithms that simulate:
Performance Optimization Journey
My app feels slow when generating complex palettes,” I told the AI. This led to a deep dive into performance optimization:
✻ Code splitting to reduce initial bundle size
✻ Tree shaking to eliminate unused code
✻ Dependency optimization with Vite’s pre-bundling
✻ Lazy loading for non-critical components
✻ Memoization for expensive color calculations
✻ Web Workers for intensive color processing
The Vercel Deployment Adventure
Getting Huestar live was its own technical challenge. The AI walked me through:
✻ Modern browser targeting for optimal performance
✻ Environment variable configuration for production secrets
✻ Database migration strategies using Alembic
✻ Analytics integration with Google Analytics 4 and PostHog
✻ Error handling and monitoring for production stability
The result? A production-ready application with enterprise-level security and performance that I built as a non-developer through AI partnership.
The Competitive Landscape Reality
After building Huestar, I could finally see the competitive landscape clearly. The comparison wasn’t just about features – it was about fundamental philosophy and execution.
The Feature Gap Analysis
The comparison revealed that Huestar wasn’t just different – it was solving problems other tools didn’t even recognize existed:
✻ Accessibility: While other tools treated accessibility as an afterthought (or ignored it completely), Huestar made it central to the entire experience
✻ Colorblindness Support: Huestar was the only tool offering comprehensive colorblindness simulation and optimization
✻ Brand Context: No other tool provided real-time brand color psychology and famous brand inspiration
✻ Algorithm Sophistication: While competitors relied on basic libraries, Huestar generated mathematically precise color relationships
✻ Export Flexibility: Other tools offered 2-4 export formats; Huestar offered 4 professionally formatted options
The Technical Architecture Behind the Magic
The sophisticated user experience of Huestar is powered by a carefully architected technical stack that balances performance, security, and maintainability.
Frontend Excellence
Built on React 18.2.0 with TypeScript 5.8.3 for maximum type safety and modern development experience. Vite 6.3.5 provides lightning-fast builds and hot module replacement during development.
✻ The color-handling capabilities rely on specialized libraries:
✻ Chroma.js 2.6.0 for sophisticated color manipulation and conversion
✻ ColorThief 2.6.0 for extracting dominant colors from images
✻ Color Namer 1.4.0 for generating human-readable color names
✻ @uiw/react-color-wheel 2.5.5 for interactive color picker components
Interface
Tailwind CSS 3.4.17 provides utility-first styling with a custom design system, while Radix UI components ensure accessibility compliance.
Backend Sophistication
The API layer runs on Python 3.13 with FastAPI 0.115.12 for modern, high-performance API development. SQLAlchemy 2.0.41 provides robust database ORM capabilities with PostgreSQL as the production database, managed through Alembic 1.16.1 for version-controlled schema migrations.
Security and Authentication
Production-grade security includes JWT token management via python-jose 3.5.0, password hashing with passlib 1.7.4, comprehensive CSP headers, and Supabase Auth integration for user management.
Analytics and Monitoring
Dual analytics implementation with Google Analytics 4 and PostHog 1.253.4 provides comprehensive user behavior insights with graceful degradation when ad blockers are present.
The Real Learning
This wasn’t just about building a tool; it was about proving that methodical design thinking, evidence-based research, and strategic AI collaboration could bridge the gap between creative vision and technical execution.
The Research Foundation Made the Difference
Without the comprehensive discovery phase, Huestar would have been just another palette generator. The systematic user research revealed that color tools weren’t just feature problems; they were workflow problems requiring systematic solutions.
AI as Research Amplifier and Technical Partner
AI amplified research while serving as a technical consultant. While AI helped with implementation, security, performance, and deployment, all user needs, workflow insights, and feature priorities came from systematic human-centered research.
Methodology as Competitive Advantage
The rigorous research methodology became Huestar’s secret weapon. While competitors built feature lists, I built solutions to validated user problems discovered through systematic investigation.
The project proved that great products emerge from understanding real problems. Every pixel, every algorithm, every interaction was informed by evidence gathered through established UX research practices.
Most importantly, it demonstrated that non-technical designers can build sophisticated, production-ready tools by combining systematic research methodologies with strategic AI collaboration – creating solutions that truly serve user needs while pushing the boundaries of what’s possible in color design tools.
Curious how intuitive, research-driven, and AI-enhanced color design can feel? Try Huestar now, where every palette starts with real inspiration and ends with impact.
You can also contribute to making Huestar even better: simply log in and post your feature requests to help guide the future of the platform
This case study has been written with the help from my AI friends, Perplexity and ChatGPT.
