This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Color Analysis when Designing for Mobile Devices, Part 2: Color Design Tools

8 MINUTE READ | January 26, 2012

Color Analysis when Designing for Mobile Devices, Part 2: Color Design Tools

In part 1 we learned what Color Analysis is, basic color theory, and how important choosing the proper color scheme can be to the success or failure of the mobile application you are building. In this lesson we will examine the tools that will help you decide what colors to use. Whether you are an amateur designer, coder, professional artist, colorblind or just undecided on what colors or color scheme to use for your mobile application, the tools presented here will aid you in choosing the color palette. Most of them are free and can be used online or are available as an app that you can use on your mobile device.

Color Scheme Designer 3

The power of client side scripting with jQuery is demonstrated with Color Scheme Designer (CSD). A clean easy to use, professional interface helps you generate new and appealing color schemes. Included in the free web based program are a number of options allowing a wide range of possibilities and even contains some very neat hidden features.

The Interface

The down to business, clean interface makes the rather complex science of color easily available. The home page jumps right in, allowing you to choose your colors with an interactive color wheel and scheme details.

The toolset

A wide range of tools make getting the colors you want easy to acquire. A color combination selector at the top right lets pick which color relationship will dominate your scheme.

The color wheel dictates the range of colors to be included. A myriad of options help you fine tune your palate.

You can preview your color samples on a webpage simulator or even imitate a colorblind effect based on common vision defects.

Export your color schemes easily and effectively to HTML+CSS (This option is a very powerful easy to use resource for final client project delivery & a tool to use as your designing your mobile app), XML, Text, or even an ACO Photoshop palette or a GPL Gimp palette file for professional designers.

Summary

Color Scheme Designer is a very easy to use free resource able to export palettes in a variety of formats suitable for different media. This is one of the best color palette design resources. Try it out.

Adobe Kuler

Adobe’s solution to the color design process. It’s easy to use and quite powerful.

Troll other peoples color schemes, track color trends with “Pulse”, design & edit your own color combinations, save and download. A collection of links includes access to the Kuler API, downloadable desktop patterns and color theory resources.

There is even an Android App for purchace. So you may prefer to begin your design process by choosing the colors that fit your mobil app on a mobile device where the color schemes can be viewed in an environment where they will eventually be viewed anyways. Convenient, right?

Color Rotate

Create stunning color palettes using this unique tool that has a library of color schemes that you can browse. You can see a 3D rendering of the colors & use the tool to help you better visualize your color combinations. You can use it directly in Photoshop and Fireworks with the ColoRotate plugin.

Colour Lovers

Fall in love with thousands of palettes and color schemes. Colour Lovers currently has almost 2 million color palettes to inspire your ideas. You can browse palettes by submission date, rating, views, and comments, or you can search by keyword. Get the latest palettes RSS feed or use our color palette maker to create and share your favorite color combinations.

Color Schemer

Browse a large library of user-created color schemes by submission date, rating, or number of downloads, or you can search by keyword. Use ColorSchemer Touch for iPhone/iPod Touch to help you design your app on a mobile device.

Here is a preview of the app

0 to 255

0 to 255 is a simple tool that helps web designers find variations of any color.

Perfect for hovers, borders, gradients, and more.

Color Palette Generator

Generate a color palette based on an image. simply upload an image and it will generate a color palette for you.

Color Explorer

You can easily manage and create color palettes through this online toolbox for a better design. Color Explorer includes a few different color tools. With the color picker you can select a color and see different variations. You can also view color libraries and use the color matching tool to help create a palette.

Color Theif

Color Theif is a script for grabbing the dominant color or color palette from an image. The site uses Javascript and the canvas tag to make it happen. This script could be useful for sites that sort and search by color.

Color Hunter

create and find color palettes made from images

Pictaculous

Upload a photo to Pictaculous and it will suggest colors to use with the photo. Download the Adobe swatch of the suggested colors. It’s a simple online tool for generating a color scheme.

Color Grab

Enter the URL of an image and it will show which colors are used most in the photo. Inspiring.

DeGraeve Color Palette Generator

Straight forward no frills generate colors, Make color schemes. Enter the URL of an image to get a color palette that matches the image.

Colorspire

Select a starting color and Colorspire will suggest a palette of colors to use in combination. Colorspire also provides a basic preview to show how the colors would look on a sample website layout which can easily translate to the mobile site design.

Mudcube Sphere (ColorJack: Sphere ‘Color Theory Visualizer’)

Adjust one of the colors in the scheme and the others will automatically adjust to match.

Color Blender

Choose a preferred color using the Free Color Blender color picker, and a 6-color matching palette (a “blend”) will be automatically calculated. Use radio buttons to switch from a Direct Edit mode to tweak or edit individual colors of your blend. Blends can be saved for future use.

HSL Color Picker

HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, hsl(36, 73%, 10%), it’s clear that if we desaturate 40 steps and lighten 70 steps we get hsl(36, 33%, 80%), a cream color. HSL Color Picker can help you with this.

In graphics software, it feels more natural to work with HSB (Hue, Saturation, Brightness) than RGB or CMYK. Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it’s difficult to understand.

Color Combos

Color Combos built to help web developers quickly select and test website color combinations. Use the Combo Tester to see how different color combinations work together on the screen.

Colors on the Web

Submit base color and get matching colors. Set the hues, saturation, tints and shades with an easy to use color Wizard interface

Real Color Wheel

This is for the artist or painter. Translate your pigment colors to the RGB equivalent and learn how schemes differ when using light. This can translate to your mobile app design if you have a background using pigments and need a translation tool for the way color will work on a device.

CSS Prism

CSS Prism is a CSS color spectrum inspector. Input the path to any .css file, and it will output an easy to scan display of all hex colors from the file. Unwanted colors can be edited via a Photoshop-like color picker and the resulting .css file can be downloaded for your convenience.

The CSS Prism Bookmarklet will insert links to any webpage’s linked .css files just inside the body tag. CSS Prism will be quite helpful to you if you are building more sites at work.

A few more resources:

The designer’s guide to color combinations

Pattern 8

Makes it easy to find high quality free seamless patterns based on color. These can be use in your mobile app or whatever project you’re designing for.

JavaScript ColorPicker 0.9

JavaScript ColorPicker is a light weight all-rounder (only ~46k incl. all 16 files) that can display and let you choose the entire color palette (~16.78 mil. colors) in 6 different color modes (+3 extra modes in RGB).

This highly customizable and easy to install app comes in 4 different sizes (from 151 x 87 pixels to 405 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from ‘easy choice’ to ‘professional determination’. That’s probably all you’ll ever need to let your clients choose the right color.

You’ll also find a lot of extra helpers and smart features like contrast-meter, color-difference-meter, value-slider in input fields, web-smart and web-save button, color memories and much more that can help your clients make the right decision.

COLOR PICKER – JQUERY PLUGIN

A Simple jQuery plugin that let you select color in the same way you select color in Adobe Photoshop.

Name that Color

The name says it all. Give it a try. A fun way to become more color-literate.

Conclusion

Stay in touch

Bringing news to you

Subscribe to our newsletter

Color is a fascinating and wonderful science. The more you learn and play with color the more developed your color intuition will increase and the better your design projects will turn out, specifically your mobile apps.


Posted by Stephen Hill

Related Content

thumbnail image

Get Informed

Direct-To-Consumer Disrupts-The-Competition

7 MINUTES READ | April 12, 2019

Get Informed

The Introduction of IGTV: The Next Generation of Video

4 MINUTES READ | June 22, 2018

Get Informed

What Every Panel Is Preaching During SXSW Sessions

3 MINUTES READ | March 15, 2017

thumbnail image

Get Inspired

Virtual Reality and Its Growing Impact as a Marketing Channel

4 MINUTES READ | February 17, 2017

Get Informed

How to make your own Snapchat Geofilters

3 MINUTES READ | May 13, 2016

ALL POSTS