CSS Color Wheel

If you checked out my previous snippet about the Circular Progress Component that I used to indicate the scrolling progress, I wanted to show you another use case for it: Using it as a color wheel to visualize a product's colors!

Demo

Halfsize Tote

$210

tan

High Wall Tote

$210

Multi

Zip Tote Basket

$140

Multi

Zip High Wall Tote

$150

Multi

Code

We just apply the conic-gradient CSS property again and calculate the color stops and we're already done! I'm often fascinated about how a few lines of code can create such cool things.