Nice colors,

sssss
Cartoon snake wearing 3D glasses and holding some popcorn

About

When it comes to assigning colors to my designs / components, I've never had much luck with online palette generators. They generally seem to concentrate on picking complementary colors and so fourth, providing you with a palette of 3, 4 or 5 different colors. However, back in the real world, that's not so useful. What I really need is a whole range of shades for each color that I use. Orange isn't just orange, it's needs to be supported by lighter shades and darker shades. If you want to toggle between light and dark modes on your website, then you might even use a different shade of orange between the two versions. So anyway, this page is just a place for me to collate nice palettes; most of them have been taken from a book called Refactoring UI, by Adam Wathan and Steve Schoger (if you're a dev trying to get better at design, I can't recommend this book highly enough).

I like to experiment with different page styles on my blog and I've based this page's style on Wild Fox Squad. Being a landing page for an NFT, it probably doesn't exist anymore; so don't worry about clicking that link. Update: that site no longer exists, just like all the Luna stablecoin I bought.

I particularly liked the animation used on the cards, which makes it feel like you're playing a game of Top Trumps.

The colors

Click on an individual colour to copy it to your clipboard, or use a card's buttons to copy all the colors in that swatch.

blue-grey

050
100
200
300
400
500
600
700
800
900

cool-grey

050
100
200
300
400
500
600
700
800
900

grey

050
100
200
300
400
500
600
700
800
900

warm-grey

050
100
200
300
400
500
600
700
800
900

red

050
100
200
300
400
500
600
700
800
900

red-vivid

050
100
200
300
400
500
600
700
800
900

orange

050
100
200
300
400
500
600
700
800
900

orange-vivid

050
100
200
300
400
500
600
700
800
900

yellow

050
100
200
300
400
500
600
700
800
900

yellow-vivid

050
100
200
300
400
500
600
700
800
900

lime-green

050
100
200
300
400
500
600
700
800
900

lime-green-vivid

050
100
200
300
400
500
600
700
800
900

green

050
100
200
300
400
500
600
700
800
900

green-vivid

050
100
200
300
400
500
600
700
800
900

teal

050
100
200
300
400
500
600
700
800
900

teal-vivid

050
100
200
300
400
500
600
700
800
900

cyan

050
100
200
300
400
500
600
700
800
900

cyan-vivid

050
100
200
300
400
500
600
700
800
900

light-blue

050
100
200
300
400
500
600
700
800
900

light-blue-vivid

050
100
200
300
400
500
600
700
800
900

blue

050
100
200
300
400
500
600
700
800
900

blue-vivid

050
100
200
300
400
500
600
700
800
900

indigo

050
100
200
300
400
500
600
700
800
900

indigo-vivid

050
100
200
300
400
500
600
700
800
900

purple

050
100
200
300
400
500
600
700
800
900

purple-vivid

050
100
200
300
400
500
600
700
800
900

magenta

050
100
200
300
400
500
600
700
800
900

magenta-vivid

050
100
200
300
400
500
600
700
800
900

pink

050
100
200
300
400
500
600
700
800
900

pink-vivid

050
100
200
300
400
500
600
700
800
900

And that's it from me. Check out my home page for other random stuff.