Accessibility Tools
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
Stephen Hill
Stephen Hill has written this article. More details coming soon.
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
By clicking and subscribing, you agree to our Terms of Service and Privacy Policy
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.
Related Content
Digital Video Trends and How to Create Best-in-Class Digital Video Content
6 MINUTES READ | October 14, 2019
What You Can Learn from the Latest Game of Thrones Brand Partnerships & Activations
7 MINUTES READ | April 18, 2019
Color Analysis when Designing for Mobile Devices, Part 1: Color Theory
8 MINUTES READ | October 29, 2011