Search TekSocial
Stay Connected

Enter your email address:

(We respect your privacy!)

Or subscribe with your favorite RSS Reader

  

« Flappy Bird Returns! | Main | Web Design Trends - Typography »
5:10PM

Cool Apps for Creating Color Schemes

Color schemes are a standard part of every designer's job. Whether you're working on a new website, making a logo or decorating a room, you will inevitably have to pay attention to colors. The three apps reviewed in this article are very practical for devising and manipulating color schemes, and you don't have to be a professional designer to use them, as they are highly user-friendly.

Color Schemes

Most designers have a preferred set of tools in their workflow. However, these tools are often “chained” to a single machine; in other words, installed on their main computer. The beauty of web apps is that they're accessible from any computer with an Internet connection, and this is exactly why these tools – namely, 0to255, Color Explorer and Color Scheme Designer - are so useful. Another great feature (which Color Explorer particularly emphasizes) is that they don't require registration or any kind of account – you just open them in your browser and get down to work.

Previously we showed you some examples of stylish color schemes. Now you can peek “behind the scenes” and into the process of creating color schemes with these apps. Without further ado, let's take a look at them, starting with the simplest one.

0to255

0to255 is a simple tool with a very beautiful, clean design. Created by Shaun Chapman, this app could be described as single-purpose, though this is by no means a bad thing. 0to255 lets you select any color, randomly or by entering its hexadecimal code, and then gives you the whole range of variations for that color from white to black.

Color Schemes 0to255

Each variation comes with the color code written on it, and you can copy it with just one click. It's also important to mention that 0to255 optimizes the colors for web design, so you don't have to worry about what they will look like on your website.

Color Scheme Designer

Color Scheme Designer is the real deal – it's much more than just generating tint/shade intervals for one color. It generates whole color schemes based on criteria that you select, starting from base color, contrast and saturation to different types of color schemes (mono, complement, triad, tetrad...).

Color Scheme Designer

You can spend hours playing around in Color Scheme Designer, tweaking all the little details, changing presets and adjusting colors. When you're happy with your creation, you can export the finished color scheme into several formats (HTML/CSS, XML, ACO, GPL... ) by clicking on the Export menu in the top right corner.

There you will find another amazing feature – Color Scheme Designer lets you see the colors from a colorblind person's perspective, offering multiple modes and providing information about the percentage of population affected by each type of anomaly. This feature is incredibly useful when it comes to responsive web design and caring about the consumers of the product you're creating.

Color Scheme Designer Preview

The usefulness of Color Scheme Designer doesn't stop here. You can preview a sample website with every color scheme you create by selecting either “Light page example” or “Dark page example” below the color scheme preview. A new window with the preview page will pop up and let you make some additional tweaks.

The developers are working hard on improving this app, and you can test the beta version at paletton.com. It looks like the future versions will bring a change of name; let's hope the functionality stays the same.

Color Explorer

The last color scheme app in this review combines several tools or functions, which makes it an all-in-one solution. Color Explorer is smooth, responsive and looks professional thanks to its gray theme.

You can start working with color schemes by choosing colors for your palette in Color Picker or by picking them from Color Libraries. You can also import colors from CSS/HTML, or upload an image (JPG or PNG) and let Color Explorer extract colors and palettes from it. (Note: to use any of Color Explorer's tools you must select at least one color and add it to your palette).

Color Explorer Color Libraries

Color Matching is where the magic happens; here you will use Color Explorer to generate color schemes based on different matching algorithms. Details such as hue and saturation can be adjusted manually.

Color Explorer Color Matching

Color Explorer packs two more tools – Color Conversion and Contrast Analysis – and every web designer will surely appreciate the latter. The tool lets you see to what extent your selected colors comply with readability and accessibility standards for the Web. The Color Conversion tool is also neat when you have to ensure compatibility and quickly convert your colors to other color systems.

Color Explorer Color Analysis

If you've ever needed a tool for color schemes and searched the Web hoping for a good recommendation, you know that there are many, many more apps for this purpose. This is not surprising, since it's relatively easy to develop them. The challenging part, however, is making them visually appealing yet undemanding; straightforward but not lacking in features. The user should be able to get down to work without having to figure out the intricacies of the interface. The apps reviewed here pass this challenge - if you'll forgive the pun - with flying colors.

 

 

 

Ivana Isadora Devcic is a freelance writer, copyeditor and translator fluent in English, Swedish, Croatian and Norwegian. She's a Linux user and KDE fan interested in web design, productivity and personal branding. Ivana tweets about the world around her as @skadinna.

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>