<p>Published on <a href="https://blog.prototypr.io/the-best-free-tools-to-help-choose-colors-for-your-website-25582c9e3e69?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> PageCloud </p>
<blockquote><p>“Color is my day-long obsession, joy and torment.”</p></blockquote>
<blockquote><p>&#8211; Claude Monet</p></blockquote>
<p>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.</p>
<p>But let’s dive deeper. Elements like <a href="https://alistapart.com/article/contrast-is-king">contrast</a> and <a href="https://designmodo.com/gradients/">gradients</a> often come into play when searching for the right palette.</p>
<p>Fortunately, we’ve found the best tools to help you create the perfect collection of colors for your website — without opening your wallet.</p>
<h3>Start Color Scheming!</h3>
<p>So you’ve got a color that you really want to use.</p>
<p>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!</p>
<h4>Colordot</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*cWoTtkPlf7gWbXb-."></p>
<p><a href="https://color.hailpixel.com/">Colordot</a> 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.</p>
<h4>Colorcode</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*bawbMaLIvoItv2dz."></p>
<p><a href="https://colourco.de/">ColorCode</a> 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.</p>
<h4>Coolors</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/502/0*q-tHLSMPUHClFjWL."></p>
<p><a href="https://coolors.co/">Coolors</a> 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 😉</p>
<h4>Canva</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*rn9qqPu2jHN0dupG."></p>
<p><a href="https://www.canva.com/colors/">Canva</a>’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 <a href="https://www.canva.com/colors/combinations/">color combinations</a>.</p>
<h3>Spinning the Color Wheel</h3>
<p>Across the visual spectrum, there are colors that work well together and others that are less compatible, to say the least.</p>
<p>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.</p>
<h4>Adobe Color CC</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aFRjD1pFBAzc-l6Ly0ZSNg.png"></p>
<p>Adobe has a <a href="https://color.adobe.com/create/color-wheel/">quality color wheel tool</a> 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.</p>
<h4>Paletton</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/951/0*HUF6wBk6iJpHUGI7."></p>
<p><a href="http://paletton.com/">Paletton</a> 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.</p>
<h3>Inspire Your Selection</h3>
<p>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.</p>
<h4>Dribbble</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Xn5bi2_mfd4mYy0c."></p>
<p>Chances are, you’ve already heard about the next tool in our roster… <a href="https://dribbble.com/colors/">Dribbble</a> 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!</p>
<h4>Khroma</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2OM4_m8zrTYL9bFw."></p>
<p><a href="http://khroma.co/">Khroma</a> 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.</p>
<h4>Colorspace</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WouXDEEK4O3rtLJr."></p>
<p><a href="https://mycolor.space/gradient">ColorSpace</a> 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.</p>
<h3>Ensure Your Words Are Readable</h3>
<p>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.</p>
<h4>Material Design</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*vThp8qcKcLxhM5bq."></p>
<p><a href="https://material.io/color/">Material Design</a> 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.</p>
<h4>Colorsafe</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WlBuxO6yPXZOBjEl."></p>
<p><a href="http://colorsafe.co/">Colorsafe</a> allows for accessible color palettes based on <a href="https://webaim.org/blog/wcag-2-0-and-link-colors/">Web Accessibility</a> 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.</p>
<h3>Have Fun With Colors!</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p><em>This post was originally published on </em><a href="https://www.pagecloud.com/blog/how-to-integrate-motion-into-your-website-design"><em>The PageCloud Blog</em></a><em>, where we discuss website trends, tips and tricks and go behind the scenes at the website builder you’ll love to use.</em></p>
<p><em>Didn’t see the free color tool you like best? Let us know!</em></p>
<h3>Want to read more like this?</h3>
<ul>
<li><a href="https://www.pagecloud.com/blog/how-to-choose-fonts-for-your-websites">How to Choose Fonts for Your Websites</a></li>
<li><a href="https://www.pagecloud.com/blog/9-free-typography-tools-you-didnt-know-you-needed">9 Free Typography Tools You Didn&#8217;t Know You Needed</a></li>
</ul>
<h3>Looking to build your own website?</h3>
<p>Explore the endless possibilities of color using your favourite color tools with <a href="https://www.pagecloud.com/">PageCloud’s website builder</a>.</p>
<p><a href="https://www.pagecloud.com/lp-0118-gb">PageCloud &#8211; Start Your Free Trial</a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=25582c9e3e69" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-best-free-tools-to-help-choose-colors-for-your-website-25582c9e3e69">The Best Free Tools to Help Choose Colors for Your Website</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


The Best Free Tools to Help Choose Colors for Your Website

Top Stories