DEV Community

Cover image for How to Build a Color Wheel with Tints & Shades

How to Build a Color Wheel with Tints & Shades

Mads Stoumann on April 23, 2021

I've built a handful of color pickers through the years, so when I in this book stumbled upon a color-wheel with β€œbuilt-in” shades and tints, I had...
Collapse
 
afif profile image
Temani Afif

My CSS only idea: codepen.io/t_afif/pen/VwPqGyj and with rotation: codepen.io/t_afif/pen/KKabxJJ (need more html here)

Collapse
 
shaijut profile image
Shaiju T

Nice πŸ˜„, Can you show us how to make CSS based animations like Thank you and Successful and congrats messages to users, using confetti css or some other technique. Like below:

tympanus.net/Development/AnimatedM...

Example:

  1. Google Play Successful Payment animation with a tick mark and Confetti
  2. Hackerearth Congrats Confetti as shown here
Collapse
 
afif profile image
Temani Afif • Edited

are you challenging me ? πŸ˜›

Ok, I will think about it, maybe this will be my next post πŸ˜‰

Thread Thread
 
shaijut profile image
Shaiju T • Edited

Not challenging. Just asking if you have seen those kind of messages anywhere. I dont know how they do those kind of animation maybe using CSS or SVG.

Just want to learn cool CSS animations πŸ˜„

Thread Thread
 
afif profile image
Temani Afif

Such animations are generally made using canvas. If you inspect the code you will notice a <canvas> element and then you have to dig into the JS because it's there where you will find the whole logic

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Nice! But it has the same issue on Chrome (MacOS), as I encountered - the edges are blurry :-(
That's why I went the svg-way, although the CSS-way is way simpler!
Looks great in Safari, though!

blurry

Collapse
 
afif profile image
Temani Afif • Edited

yes it's a known issue when the gradient contain a lot of color stops. You can fix it by using multiple background instead: codepen.io/t_afif/pen/VwPqEmr

Thread Thread
 
madsstoumann profile image
Mads Stoumann

Wow! I'm super-impressed - also at the speed you've been making these demos!

Collapse
 
yellowbluevase profile image
YellowBlueVase

Hi, but your solution doesn't let pick a color. As I understand for this purpose you HAVE TO have this color wheel on canvas to extract data with ImageData

Collapse
 
braydoncoyer profile image
Braydon Coyer

Lovely! Thanks for sharing!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!