The Best Free Tools to Help Choose Colors for Your Website

PageCloud
Prototypr
Published in
5 min readMar 9, 2018

--

“Color is my day-long obsession, joy and torment.”

- Claude Monet

If you’ve ever felt this way while trying to pick the right hue for your new toolbar or call-to-action button, you’re not alone. Color is a science.

But let’s dive deeper. Elements like contrast and gradients often come into play when searching for the right palette.

Fortunately, we’ve found the best tools to help you create the perfect collection of colors for your website — without opening your wallet.

Start Color Scheming!

So you’ve got a color that you really want to use.

The next step is to find other colors that will work to complement it, setting the right tone for your website. Here are 4 color scheme generators that you can put to work to help you find the perfect match!

Colordot

Colordot has a fun, simple color scheme builder that allows you to customize swatches and see how they look together. Once you find a color you like, it provides the RGB value, and you can alter it.

Colorcode

ColorCode is a little more interactive and allows for more scheme building by applying color rules to your chosen hue. You can also download your schemes easily on the toolbar as SCSS or PNG file types, with permalink options.

Coolors

Coolors lets you take colors from images with a quick drag and drop. If there’s a graphic or photo you’ve chosen, the app will quickly show what colors could work with it in your design. Pretty cool ;)

Canva

Canva’s color tool goes the extra mile, starting with a wiki-style collection of all available colors you can use in your designs. You have access to a detailed history of the color, its meaning, equivalent hex codes, and can explore thousands of color combinations.

Spinning the Color Wheel

Across the visual spectrum, there are colors that work well together and others that are less compatible, to say the least.

A color wheel is a spectacular tool for understanding color relationships. Whether you’re aiming for an analogous group or a custom collection of hues, these color wheel tools will let you piece together the perfect palette.

Adobe Color CC

Adobe has a quality color wheel tool that works with various color rules, plus a custom option. It saves the different hex and RGB codes, and can also create a wheel based off a previously chosen image.

Paletton

Paletton lets you customize a full color palette based off its wheel, with different options for color rules and styles. It also has a unique randomize option, if you’re feeling a little adventurous.

Inspire Your Selection

Having a hard time getting ideas or just curious about how others have handled colors? Take a look at these resources to generate the creative spark.

Dribbble

Chances are, you’ve already heard about the next tool in our roster… Dribbble has a unique fount of interesting images and art pieces. Viewers can browse by color code using a special search function. This tool is loved far and wide by professional designers and amateurs alike!

Khroma

Khroma creates a personalized color algorithm for you to work with. The site asks you to choose 50 colors out of thousands of hues to ensure that the generated combinations work perfectly.

Colorspace

ColorSpace has a gradient feature that shows gradual change between two tones of your choosing. The site also offers full and random palettes based off of a single color choice.

Ensure Your Words Are Readable

The perfect colors for your site won’t mean much if no one can read your text. These resources will make sure your content visible to readers and that your messages are legible within your chosen palette.

Material Design

Material Design has a color tool that allows you to measure the accessibility and legibility of your chosen color combination. It offers recommended opacity and warns you when text will be impossible to read.

Colorsafe

Colorsafe allows for accessible color palettes based on Web Accessibility guidelines and contrast ratios. It’s easy to use and generates a recommended series of color palettes for fonts based on a chosen background hue.

Have Fun With Colors!

Coming up with the perfect colors for your site doesn’t have to be an unpleasant experience. With the help of schemes and wheels, you can have fun trying out new, complementary hues that will customize your site.

There’s no single way to choose a palette, so give the tools a try and feel free to get carried away! Remember to ensure readability with the colors you pick, and if you get stuck, don’t be afraid to look (or ask) around for inspiration.

The world is full of colorful ideas that will embolden you to make your site into a work of art that really reflects your own brand and style.

--

--

Do more of what you love and share it with the world with a custom landing page, website, and online store. Create your website with Pagecloud’s website builder