Color Taylor
A color picker that shows how color models move together.
- Design Engineer
- 6 months hobby
3 weeks dedicated - September 2026
Most color pickers put RGB and HSB side-by-side, but never show how they relate.
Color Taylor shows you every color and how every slider is interconnected. User interactions highlight affected elements.
I researched, designed and built it as a web app, a narrated explainer presentation, and a Figma plugin.
Try It Yourself
The problem
Every picker shows the numbers. Few show how they relate.
While working on the color picker for Godot 4.0 I did a lot of competitive research. Game engines and creative tools assume a lot of knowledge about color models and do very little to educate. There’s little effort to show the connections between color pickers and values, but there are ways to visualize this information.
Various color pickers from my research.
Challenges
“How do you introduce people to the science behind a tool they use every day?”
Very technical
The documentation that exists is written for engineers, not for the people picking colors all day.
No clear connections
Move one slider and the rest jump. Nothing in the picker shows why.
An afterthought
Pickers are rarely designed to teach, so people work without understanding what’s under the hood.
Design Principles
Let people play their way into the science.
Make it fun
Hands-on play is the best way to really show people how these systems work.
Make it beautiful
It had to look and feel considered and polished.
Keep it simple
Every detail narrows the audience. A simple thesis was essential.
The solution
Color Taylor 1.0:
Using a hexagon to visualize the often mysterious relations between color sliders.
Map Red, Green, and Blue
to a Color Wheel
I found a novel way to graph RGB relations to a shape that reflects HSB/HSL color models. For me, seeing the trigonometry that determines Hue was an epiphany.
Every color model moves together
Moving a single slider highlights every other slider affected by it, revealing the relationships hidden by other color pickers.
Lightness (HSL), when you need it
HSB and HSL describe the same colors with a different third axis: Lightness is HSL’s, as Brightness is HSB’s. Run both slider banks through one sequence of colors and watch where they agree and where Lightness and Brightness part ways.
All 141 HTML colors, on the hex and searchable by name
Plot every named HTML color on the hexagon, faded by how far it sits from the current brightness. The search field names the nearest one and how far away it is.
Save swatches and play through them like a timeline
Save colors to your swatches slots. Press play and the swatches run in sequence, with the hexagon following each one: the stems, the dot and the bars move as one.
Process
6 months as a hobby project.
815 commits (saved snapshots of the code, tracked with Git and kept on GitHub) between March 28 and launch on September 17, in two bursts around a summer break. The hexagon was there on day one; the months went into everything around it: which sliders, in what order, and how much to show before someone asks.
First Steps
It started with the charts and equations behind HSV. On paper the math read as complicated. Mapped out visually, it was easy to understand.
Six hues around a hexagon,
every number in its place.
Red, Yellow, Green, Cyan, Blue and Magenta sit sixty degrees apart at the corners of a hexagon, with hue as the angle around the center, saturation as the distance from it, and brightness on its own bar. That is the polar view of HSV, from Wikipedia: every conversion formula I had struggled with was sitting in this one picture, and every number in RGB, HSB and HSL has a place on it.
Early Exploration
Show the work
While Color Taylor is meant to feel like a playground, the Equations panel shows the classroom view. As the user interacts with the Hex and Color Editor, they can see the math behind the colors.
Look to see how RGB is translated to HSB, HSL, HEX, and Normalized values.
Findings
A few things the hexagon made obvious.
RGB makes it hard to maintain a hue.
Each change of an RGB value changes the Hue value. To keep Hue consistent, you need to adjust RGB values proportionally.
Raising the lowest value desaturates.
Saturation measures the gap between the largest and smallest channel. Close the gap and the color washes toward gray while the hue holds still.
The highest RGB value is Brightness.
In HSB, Brightness is simply the largest of Red, Green and Blue. Push the top channel down and the whole hexagon dims with it.
Design Decisions
What to focus on from the research and discovery.
One picker, everywhere
The app, the Figma plugin and the presentation render the same hexagon component. A fix in one ships to all three.
One vocabulary on the main screen
Consistent language throughout, which also meant choosing HSB over HSL as the entry point, so the main screen carries one set of terms and the complexity stays out of the way.
An Easter egg
An audio synthesizer is embedded in the project, left over from an early lab that was too fun to say no to and too far out of field to detail.
Outcomes
What shipped, and what I learned.
Color Taylor launched on September 17 as a web app, a narrated presentation and a Figma plugin. It began as a way to understand color for myself, and became a way to show it to others.
Project Presentation
In hopes to spread my enthusiasm for the project, I decided to record a presentation walking through the project and some of the themes to explore. The presentation is available in the app, as well as a YouTube video.
A/B Testing Thumbnails on YouTube
A Presentation Authoring Tool
A dev-only view under the app kept the narration and the choreography in step.
A dev-side tool to pass notes from the presentation’s voice and animation timing to Claude Code for rapid iteration.
The clip editor: one spoken line’s waveform with a tick for each word, its in and out points, and the gap before it.
I made a Figma plugin, too!
The hex and sliders provide color selection options and affordances that the default Figma color picker doesn’t. This was also a fun experiment to build a Figma plugin.
Get Figma Plugin
Takeaways
What I’d carry into the next one.
Lead with an entry point,
not the depth
Color models are fascinating. The way to share that is a compelling way in, not the full technical weight.
Understand it before explaining it
Even though I’ve used color pickers my entire career, I really had to understand the topic myself, before I could turn around to show others.
Agentic coding changes the scale of a side project
Directing Claude Code let one designer ship a tested app, a plugin and an in-app presentation on nights and weekends.
Try It Yourself
Thank you for checking this case study, but don’t take my word for it, now you play with it.
Appendix
Experiments that stayed in the lab
Part of the process, but not part of the initial product.
Rather than crowd the project, I would spin up “Lab” prototypes to explore ideas that came up during the process. This ranged from different ways to visualize colors (Spectrum and Cube), deep dives into color science (CIE and OKLCH), as well as an audio synthesizer that maps colors to tones.
Lab 1
Spectrum
Plots Red, Green, and Blue values as lines across the spectrum. This project shows how each RGB channel is a syncopated wave, and how changing Saturation and Brightness changes the size of that wave.
Lab 2
3D Cube = Hexagon
Ever since using HEX colors in the early days of web development, I was curious what it would be like to map RGB colors to a 3D space. With Claude Code it was a trivial challenge to test out. This was a valuable lab to pursue, though became too complex to reveal in the initial version of Color Taylor.
Lab 3
CIE 1931
Getting deeper into the science, I did a battery of experiments with the Color Hexagon and the iconic CIE 1931 chromaticity diagram, the horseshoe that maps every color the eye can see, with the pure spectral wavelengths around its curved edge. While fascinating, this was getting well out of scope for v1… and my own comprehension. 🤯
Lab 4
OKLCH
OKLCH is a fascinating but complex system for mapping colors. It has been picked up as a standard in CSS, though the nuances of visible chroma are quite hard to understand. While this lab helped my understanding a great deal, I was not ready to try to explain it to others. Perhaps in a future version or project.
Lab 5
Audio Synthesizer and Sequencer
At some point I found an audio synthesizer that was accessible via JavaScript and thought mapping colors to auditory notes would be an interesting experiment. It was! You can find the audio synthesizer in the main app’s settings, under “Audio”. This lab was used to see how far we could push the audio synthesizer by packing audio data into RGB color values.
