The Ultimate List of Online Color Palette Generators for Web Design

The Ultimate List of Online Color Palette Generators for Web Design
Color palette generators

When working on multiple design projects, it’s sometimes easy to be a victim to habit when it comes to color selection. The overwhelming spectrum of tones, hues, and shades available makes it easier to stick with what we know works, rather than experiment with something new and bold. But color experimentation shouldn’t be something that scares us. Instead, its potential for creative freedom should be something that inspires our daily work and drives us to innovate.

Color is one of the most powerful design elements that will appear on your client’s website. It has the ability to communicate a brand’s personality without saying a single word, and it influences a consumer’s perception of a company or product within a matter of seconds. With the potential for such a huge impact, it’s worth taking the time to explore the world of color and carefully select a scheme for each design.  

To help you in your search for the perfect color combination, we’ve compiled the ultimate list of the best and free-to-use online color palette generators. We hope that you’ll find a tool you like, and that will inspire you to move outside of your color comfort zone.

You might also like: 10 Beautiful Ecommerce Website Color Schemes

Adobe’s Color CC Color Wheel

Formerly Kuler, Adobe’s Color Wheel is an online colour palette generator that should probably be bookmarked in your web browser. This tool is extremely useful for designers who rely on Adobe CC for their builds as it gives them the option to save your color palettes and directly upload them as swatches to your CC programs.

Adobe's Color Wheel

BrandColors

Ever wonder what colors some of the world’s leading brands and startups use to differentiate their business? Then check out the open source Git project BrandColors, where the authors and community members submit website color schemes for the world’s biggest companies. Pretty neat to see the popularity of blue and red!

BrandColors

Cohesive Colors

If you have an existing palette in mind but it just doesn’t fit with your concept, then Cohesive Colors might be the tool for you. This tool takes your current palette and allows you to add an overlay tint using a color of your choice. The result is a quickly generated alteration of your favourite palette!

Cohesive Colors

Color Hexa

It would be insulting to call Color Hexa a palette generator because it is so much more. Its creators describe it as a “color encyclopedia”, which is pretty accurate considering that when you enter a single colour value you are given nearly every piece of relevant information possible. This includes composition information, alternative colors, various sample colour schemes, as well as previews of the color in various design elements. Plug in your favourite color and try it yourself!

Color Hexa

ColorHunt

ColorHunt’s homepage is updated everyday with new color palettes created by community members. Each scheme is comprised of simple, yet elegant tones that can be used for inspiration on any design project. Find the perfect website color scheme by browsing through the “New” or “Popular” tabs.

ColorHunt

Color Picker by HTML Color Codes

By far my favourite resource on this list, Color Picker is probably the only colour palette generator you’ll need. With this resource, you can quickly access the RGB, Hex, or HSL values of a colour with a single click. From there, you’re instantly presented with various color schemes and shades based on the harmony relationship of your choice. From there you can export your newly created website color scheme in Hex, RGB, HTML, CSS, or sCSS formats.

HTML Colour Code

Colourcode

Colourcode offers similar palette composition options found in other tools including analogic, complementary, and triad to name a few. But it’s how you discover these schemes that’s different. Just move your mouse around on screen until you find a root color and then use the composition tab to create your full palette. Once you’re happy with your color creation, you can download it as a .scss, .less, or .png file.

Colourcode

COLOURlovers

A favourite of many designers, COLOURlovers is a hub of color inspiration. It features thousands of color schemes, pattern templates, and shade variations to help your design communicate your message the right way.

COLOURlovers

ColRD

Have you ever found a beautifully composed photo and instantly felt inspired by its color scheme? The creators of ColRD have, and they created a web app that allows you to generate a color palette from images you already have. This is an awesome place to find inspiration from your favourite pieces of art, photographs, or other websites.

ColRD

Coolors

Coolors’ interface is as simple and intuitive as it gets. To create a palette, all you need to do it select your starting colors, lock them in place, and press your spacebar until you land on something that resonates with your design concept. You can save your generated palettes to Coolors for others to use as well.

Coolers

Material Palette

With the rising popularity of Google’s Material Design guidelines as the go-to coloring style for websites, it was inevitable that a palette generator would be released soon after. That’s where Material Palette comes into play. This generator not only creates simple palettes based off Material’s design guidelines, but it also gives you suggestions for what your primary and secondary colors of your scheme should be. It gets even more detailed by suggesting which colors are most appropriate for backgrounds versus text.

Material Palette

Mudcube Sphere

Mudcube’s Sphere is a sophisticated color palette generator that allows you to design schemes to meet your client’s visitors various needs. Not only does Sphere offer you ten different composition options, but it also allows you to test your schemes against various color-blinded vision types. You can download your finalized palettes as either .AI or .ACO files, which can be directly uploaded into either Illustrator or Photoshop.

Mudcube Sphere

Paletton

Paletton is all about the color palette discovery process. It’s great for designers who are working with a client’s existing brand colors and want to create a full scheme that is complementary to the business. Plus, Paletton includes a cool feature that quickly generates a mockup that illustrates how you can implement the colors on your site.

Paletton

Palettr

Palettr is the final tool on our list, but a great one. It has reimagined the way we discover color palettes. You can search for color schemes based entirely off the theme of your website or the industry your client operates within (like automotive or fashion). The resulting palettes are generated from the tonal composition of individual images sourced from 500px’s photo library.

Palettr

You might also like: The Use of Color Contrast in Mobile Ecommerce Design

How do you discover the perfect palette for your design projects? Tell us in the comments below.

About the Author

Simon is a coffee lover, former agency digital strategist, and Shopify Partners' Content Marketing Lead. When he isn’t hustling at the Shopify HQ, you can most likely find him dining at restaurants across the city or brushing up on the latest design trends.

Grow your business with the Shopify Partner Program

Learn more