The Problem
Pantone Color Finder was one of the highest-traffic tools on pantone.com — a search interface that let designers, printers, and manufacturers look up any of the thousands of Pantone colors by name, number, or value. The original was built in VB.NET.
When Pantone launched Pantone Connect (a subscription SaaS product), Color Finder was discontinued from the website. The assumption was that users would migrate to Connect. They didn't. Traffic to pantone.com dropped 50%. Color Finder was the front door that brought people to the site, and without it, they stopped coming.
The decision was made to bring it back — fast.
What I Built
I was tasked with rebuilding Color Finder from the ground up. The VB.NET codebase was gone. There was no porting — this was a clean-sheet rebuild.
Version 1 (Vanilla JS): The first version needed to ship quickly. I built it in vanilla JavaScript with no framework, keeping it lightweight and fast. This is what's currently live at pantone.com/color-finder.
Version 2 (Next.js / BigCommerce): Now I'm porting it into the new headless BigCommerce/Next.js stack that powers all 10 of Pantone's multilingual sites. This version integrates with the broader e-commerce platform — color pages link to products, search results feed into the shopping experience, and the entire UI is localized across 7 locales and 4 regions.
The entry point is a clean search interface. Users can type a color name, Pantone number, hex value, or even a palette concept like "Marilyn Monroe."
Technical Complexity
This isn't a simple search box. The Color Finder handles:
Fuzzy search across thousands of colors. Users search by Pantone number ("PMS 186 C"), color name ("Flame Scarlet"), hex value ("#CD212A"), or even abstract palette concepts. The search engine handles all of these input types, ranking results by relevance with color distance algorithms for hex-based lookups.
Real-time color preview rendering. Every search result renders an accurate color swatch. The system converts between multiple color spaces (RGB, HEX, CMYK, LAB) and renders swatches that match the physical Pantone standard as closely as screen technology allows.
Complex filtering. Results can be filtered by guide type (Formula Guide, Cotton TCX, Pastels & Neons, Metallics, and more), color family, and industry application. Each filter combination queries against a different subset of the color database.
API architecture. The color data comes from a REST API that serves thousands of color records. Search debouncing, request deduplication, and caching ensure the interface stays responsive even on slow connections. In the Next.js version, this integrates with the broader BigCommerce product catalog.
Cross-region deployment. The Next.js version deploys via AWS Amplify across multiple regions. Debugging API endpoint behavior across AWS regions was a significant part of the integration work.
Clicking into any color opens a full detail page with specifications, color harmonies, and direct links to purchase the physical guide containing that color.
Results
The vanilla JS version restored traffic to pantone.com — the 50% decline reversed after Color Finder returned. The tool remains one of the most-visited pages on the site.
The Next.js version brings Color Finder into a modern, maintainable architecture shared across 10 multilingual Pantone sites, replacing what was a standalone legacy tool with a fully integrated component of the e-commerce platform.
Tech Stack
Next.js 15, TypeScript, BigCommerce, Vanilla JS (v1), REST API, AWS Amplify, next-intl