OKLCH Gradients

Simple tool for smooth OKLCH color gradients

Honestly, I had never planned properly that i will build this product

My goal in learning Claude Code was to be able to quickly deliver functional prototypes to developers using Claude Code. But during the basic setup, an idea popped into my mind about OKLCH gradients. I had seen websites about OKLCH colors, but not about gradients, so I thought: why not give it a try?

I guided the AI on what I needed, and from that prompt it generated a basic version. The gradients were working, but the overall experience wasn’t what I needed.

Design first

The full interface was designed in Figma first, covering every interaction and state.

The Goal

The goal was to make it easy for everyone in tech to generate gradients. It wasn’t designed only for designers.

The OKLCH Gradients tool: a gradient preview with angle controls and Stop A and Stop B sliders

This is the current view of OKLCH Tool.

The sliders made it easier for everyone to create and use them.

Added some cool sound effects to give users a better experience.

I explored several logo options and selected the one that best aligns with the OKLCH concept.

I animated the logo in Jitter and implemented the animated version on the live website.

People Responded

Once I launched V1 on Twitter, it went viral and 1.3K people used the tool in just four days.

We got a lot of feedback from people and we shipped that.

People’s reactions to the OKLCH Gradients tool on Twitter

We shipped these 2 features as per thier feedback.

Tailwind CSS copy support
Download in multiple formats

The OKLCH Gradients tool with the new Tailwind CSS copy and download options

The best part of shipping is watching people actually enjoy what you made.

Thanks for your attention...