HomeWorkServicesAboutBlogContact
Start a Project
Back to Work
Full-Stack Web App·Product Design·SaaS

Huestar

The colour tool designers actually needed, built from scratch.

Client
Huestar
Year
2024–2025
Scope
11 Weeks · React + TypeScript · huestar.app
Huestar
Generated Spectrum, OKLCH
WCAG AAA ✓
Tailwind · CSS · SCSS · OKLCH
8+
Export formats (Tailwind 3/4, CSS, SCSS, OKLCH, HSL, Hex, RGB)
3
Colorblind types simulated (Protanopia, Deuteranopia, Tritanopia)
50+
Brand palettes curated with psychology associations
15
User interviews before a single pixel was drawn
01·The Challenge

Designers were juggling 8–12 tools to pick a colour.

8–12
tools used per project for colour selection alone
Zero
tools with complete colorblindness simulation
Manual
format conversion, screenshotting palettes

Fragmented Tooling

Separate apps for exploration, checking, exporting, and documenting
No workflow integration, every step broken by a context switch
Manual format conversion between hex, rgb, hsl wasting hours

Accessibility Blind Spot

No tool offered full colorblindness simulation across all three types
WCAG checks treated as afterthought rather than integrated workflow
8% of men affected by CVD, entirely underserved by the market

Constrained Algorithms

Coolors limited to basic complementary relationships
Material Design locked into Google's pre-made colour choices
No tool generating truly custom spectrums for any brand or style

Poor Export Workflow

Tools offering 2–4 formats at most, never Tailwind 4 or OKLCH
No proper naming conventions or documentation in exports
Designers screenshotting palettes to hand off to developers
02·Research Foundation

Not a single pixel drawn before 15 interviews were done.

Before opening any design tool, three rounds of research shaped every subsequent decision, from the feature set to the information architecture to the export formats. The product was built from documented pain, not assumed frustration.

01

Stakeholder Interviews

15 practising designers across 4 specialties
Web, mobile app, brand identity, digital marketing
Systematic workflow mapping and pain-point documentation
Every screenshot, badly exported hex, and workaround catalogued
02

Contextual Inquiry

3 designers observed on real, live projects
Natural environment, not a research lab or test scenario
Surfaced pain points that interviews hadn't captured
Tool-switching behaviour mapped in real time
03

Competitive Audit

15+ colour tools systematically evaluated
Market split confirmed: expert tools vs. simple tools
Accessibility gap identified as unoccupied white space
OKLCH colour space identified as technically superior

The critical discovery: 8% of men have colour vision deficiency, and not a single major colour tool implemented proper colorblindness simulation. That was the gap Huestar was built to close.

Research finding, Huestar user research phase
03·User Personas

Four distinct users. One tool that serves them all.

Pulkit, Agency Designer

Quick palette generation for diverse, fast-moving projects
Brand inspiration to spark direction without starting from zero
Export flexibility, different clients need different formats

Shikha, Freelancer

Consistent, documented palettes that hold up in design systems
Professional exports that communicate precision to clients
Saved palettes she can return to and refine over time

Ishika, Accessibility Advocate

Comprehensive colorblindness simulation, all three types
Real-time WCAG compliance checking, not a separate audit step
Active suggestions for improving palette accessibility

Maitrey, Developer

Multiple code-ready export formats without manual conversion
Proper naming conventions and documentation baked into exports
Technical precision, OKLCH, not approximated hex values
04·The Build Journey

A designer building a full-stack app with AI.

The designer behind Huestar is not a developer. The entire production-ready application was built through a structured collaboration with AI, not as a shortcut, but as a genuine partnership where each brought something the other couldn't.

01

Discover the real frustrations

15 designer interviews and 3 contextual observation sessions mapped the colourful chaos of real projects, every tool-switching moment documented.

02

Decode what matters most

Every story, screenshot, and badly exported hex code distilled into hard design goals: streamlined discovery, authentic brand palettes, and accessibility baked in from the first click.

03

Dream wild, invent solutions

Technical discussions about OKLCH colour space, accessibility algorithms, and brand psychology databases running in parallel with design exploration.

04

Build fast, break fast

Early versions were real, broken, beautiful experiments. Designers tested prototypes on production projects. The architecture (React 18 + TypeScript + Vite) emerged from solving user problems.

05

Iterate in real time

Every mistake became fuel. Feedback sessions turned into improvement sprints, AI solving bugs, new features launching at speed, the design system evolving.

06

Launch, listen, level up

Launch was a starting line, not a finish. Every click, swipe, and survey drove updates, the product continuing to evolve post-launch.

05·Core Features

Four pillars that addressed every pain point in the research.

01

OKLCH Colour Spectrum Generator

OKLCH matches human colour perception more accurately than RGB or HSL, producing spectrums that feel harmonious because they are mathematically harmonious, perceptually uniform lightness scaling, precise hue relationships, and chroma adjustments that maintain visual balance at any point in the scale.

OKLCH colour space
9-stop spectrum
Perceptual uniformity
Any base colour
02

Revolutionary Accessibility Integration

Accessibility wasn't added as a panel, it was architected into the entire user experience from day one. Real-time WCAG compliance checks ran on every colour combination. Colorblindness simulation covered all three major types. And critically, Huestar actively suggested palette adjustments. No other tool offered this.

Real-time WCAG checks
3 CVD simulations
Active fix suggestions
AA and AAA ratings
03

Brand Colour Psychology Engine

A comprehensive database mapping 50+ famous brand palettes to their psychological associations and colour theory underpinnings. Inspiration grounded in evidence rather than aesthetic guessing.

50+ brand palettes
Psychology associations
Audience perception
Complementary suggestions
04

Professional Export System

Eight formats with proper naming conventions and format-specific optimisation, including Tailwind 4 (rare at launch), OKLCH (which most tools couldn't produce), and SCSS Variables with full token documentation.

8 export formats
Tailwind 3 & 4
OKLCH & HSL
Named conventions
06·Accessibility

The feature no competitor had touched.

Colorblindness simulation was the clearest gap in the market. Each of the three major types of colour vision deficiency produces a fundamentally different experience of colour, requiring separate simulation algorithms and separate accessibility recommendations.

Protanopia

Red-blind · ~1% of men · Reds appear olive/brown. Huestar simulates the full spectrum shift and suggests specific palette swaps.

Deuteranopia

Green-blind · ~1% of men · Most common CVD type. Real-time simulation shows how the entire palette reads under this condition.

Tritanopia

Blue-blind · ~0.01% of people · Blues become green. Rarest CVD type, and the one most overlooked by tools that offer partial simulation only.

Beyond simulation, Huestar actively analyses palettes under each CVD type and surfaces specific recommendations, swap this shade, increase this contrast ratio, avoid this combination, turning a passive visualisation into an actionable accessibility workflow.

07·Export System

Eight formats. Zero manual conversion.

Tailwind 4

OKLCH-native variables for the new Tailwind. Rare at launch, no other colour tool supported it.

Tailwind 3

Standard config.js format with full named scale, ready to paste.

OKLCH

Perceptually uniform values, the most technically precise format available.

CSS Variables

Native custom properties with semantic naming for any web project.

SCSS Variables

Complete SCSS token set with documentation comments included.

HSL

Human-readable format preferred for design system token naming.

Hex

Universal fallback, widely compatible for any tool or handoff.

RGB

Legacy support for older codebases and tools requiring decimal values.

08·Competitive Landscape

Not just more features, a different philosophy.

Capability
Huestar
Coolors
Adobe Color
Tailwind Palette
Colorblindness simulation
✓ All 3 types
▮ Partial
Real-time WCAG checks
✓ Integrated
▮ Separate view
OKLCH spectrum generation
Brand colour psychology
✓ 50+ palettes
Tailwind 4 export
▮ Config only
Total export formats
8 formats
4 formats
3 formats
2 formats
Accessibility fix suggestions
✓ Active
09·Impact

What shipped at the end of 11 weeks.

50+
Curated professional colour combinations with psychology associations
8
Developer-ready formats including Tailwind 4 and OKLCH
3
Complete colorblindness simulation across all CVD types
15
User interviews before a single design decision was made

A designer built a production-ready full-stack application in 11 weeks, not by learning to code, but by learning to collaborate with AI precisely enough that the code that emerged was exactly what the user research demanded.

Project summary, Huestar
10·Learnings

What building a product from scratch actually teaches.

01

Research is the highest-leverage activity

Every feature in Huestar traces back to a specific interview moment or observed behaviour. The 11 weeks of build time were efficient because the preceding research meant there was no guesswork about what to build.

02

AI can bridge creative vision and technical execution

The project proved that a non-developer with precise design thinking can build production-quality software through AI collaboration, provided the human brings the strategic clarity that AI cannot generate.

03

Accessibility is a competitive differentiator

The decision to centre accessibility in Huestar's architecture, not add it later, was both ethically right and commercially sharp. Designing for inclusion doesn't cost you the mainstream market. It expands it.

04

Competitive advantage is born from methodology

Huestar's differentiation came from the research process, not from guessing what features were missing. Systematic competitive analysis revealed the OKLCH and colorblindness gaps.

Designers were juggling 8–12 tools just to select a colour palette. No single tool offered accessibility checks, colorblindness simulation, OKLCH spectrum generation, and developer-ready exports together. Huestar was built to be that one tool, by a designer, with AI, from real user frustration.

More Work

Like what you see?

Let's build something worth a case study.