From the main page, it may not look like much. It’s mostly a collection of hand-picked gradients featuring different hues and color choices. Yet, if you visit the GitHub repo you’ll find a whole other story. This collection is the best choice for finding personalized color palettes, all specifically designed for websites.

It’s easy enough to port these gradients into a mobile app UI as well. But I’ve found they’re most useful with newer design trends like drop shadows.

When editing your site you can pass color hues into a custom array variable colorData. This should appear inside your main HTML along with all your gradient elements.

Using JavaScript you have complete control over how the colors blend together. CSS3 can also support multiple colors but it’s tougher to get them working across all page elements and all browsers.

With the coolHue site, you can even download free PNG files of the gradients. This way you can edit them into graphic design projects, website mockups, or use them outside of raw HTML/CSS/JS code.

And if you’re a big Photoshop user there’s even a .grd gradient file with all the coolHue gradients. Awesome right?

Visit the GitHub repo for setup instructions and sample code snippets. There you’ll also find the PS gradient file along with the Sketch gradient file and so much more.