Web Design

A Coder, A Crafter, A Color Scheme Drafter

ThColor Scheme Color Wheele color wheel on the right is hypnotizing, isn’t it? Did you know it promotes color scheme dreams?

Every time I look at it, I imagine it quietly whispering, “your eyes are getting sleeeepy” only to find that I’ve drifted off into a Pleasantville-inspired dream sequence. That my once black and white days are now experienced in a vivid, mashed-up burst of colors.

And a world in bright, bold colors is great for dreamland, but not for the look and feel of a handmade goods marketplace.

The whole purpose of the Goods Giving Back website is to showcase a maker’s handmade products and the nonprofits that benefit from the product sales.

I want it to be a relaxing destination where people can easily find any information they need and purchase all the products they want without being distracted by too many visual design elements or moving pieces.

My Color Scheme Thinking Cap

To get the goods started, I threw the current design site together knowing it is merely a place holder. Having a presentable but not finished visual design allows me to take some time and really focus on the end product while still getting the word out about its development.

And since Goods Giving Back is a startup in its infancy, it was time for me to wear yet another hat to work. I’ve been the coder and the crafter. Now it was time to be a color scheme drafter.

Yep, when my mind is spinning, it apparently defaults to nursery rhymes.

My design process is “keep it simple,” so I stared at the logo and decided the earth tones in the logo were great a foundation for the evolution of the overall site design.

After all isn’t “brown paper packing tied up with string” among many people’s favorite things? If I were to add the Goods Giving Back branding as an ink stamp on natural paper it will look like a simple, yet elegantly wrapped gift.

color scheme tools

Color Scheme Design Tools

Since a big picture idea does not a complete aesthetic make, I had to find free, easy-to-use tools that would help me design a comprehensive color scheme. So I went to my trusty search engine, typed in “color scheme,” and was presented with a long list of tools.

After taking a quick peek at a handful of links, I focused on three that looked to be the most promising. The color scheme design tools that made the cut were the Adobe Color CC, Paletton, and Coolors. Below are my mini-reviews of each one.

Adobe Color CC

Color commentary: Adobe Color CC‘s user interface is easy to use, especially if you know the subtle nuances between the different spots on the color wheel. Moving the dial around is an intuitive way to interact with the wheel, but a person with little-to-no visual design experience will feel lost with all the spinning.

It’s helpful that the complete color scheme recommendation is shown as color swatches with the RGB and hex values just below, but after many minutes of tinkering I was no further along in my goals than when I started.

Details in black and white: This tools is great for established designers who need a tool to further tweak some ideas they have around color schemes and palette color values, but not meant for a color scheme newbie.

Paletton

Color Commentary: Paletton‘s approach to a color scheme design and generator is conceptually and functionally similar to Adobe’s, but the interaction is different. Instead of winding the wheel, you select from preset positions, one of which is “freestyle” allowing you to move the settings to wherever you need.

Paletton also has an option that allows you to see your chosen color scheme on an sample web page which is helpful if you cannot visualize them easily in your head.

Details In Black and White: Paletton’s interface is easier to understand than Adobe’s but assumes a very high baseline of experience when designing color schemes. This tool is great for intermediate and experienced visual designers.

Coolors (Top Choice)

Color Commentary: The Coolors home page claims to be “the super fast color schemes generator for cool designers” and it lives up to that claim. You can have a functional color scheme within minutes and don’t even have to be a card carrying member of the “cool designers” club.

Generating a color scheme with this tool is as simple pressing the space bar to click through different palettes created by the tool’s algorithm. Even better? When you find a color or two (or three) within the five-color palette sample, you can keep the colors you like using the trusty lock icon so that the tool presents colors that will work with the ones you selected.

Hex values are easily visible with every color swatch therefore it’s easy to jot down the combinations you like at any point in time. If you want to save the palette, you can export it to a PDF, PNG, SVG, SCSS, or COPIC. No sign up or login required.

Details In Black and White: The Coolors color scheme generator is great for the novice or expert. You can spend as a little or as much time as you want paging through the suggested palettes and tweaking them to your liking. No matter your approach, you’ll have the same outcome — a professional-grade working palette for your website’s visual design.

More Color-full Recommendations

Adobe Color CC, Coolors, and Paletton are just three tools currently available.  For additional tool ideas, check out the 28 best tools for choosing a color scheme post from Creative Bloq.

Leave your color commentary by answering this question:

What tools do you think are best for color scheme generation?