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 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.
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.
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’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?
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.
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.
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.
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.
create and find color palettes made from images
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.
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.
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.
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 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 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
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.
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.
Sign up for weekly articles & resources.
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
6 MINUTES READ | October 14, 2019
4 MINUTES READ | July 17, 2019
7 MINUTES READ | April 18, 2019
7 MINUTES READ | April 12, 2019
4 MINUTES READ | June 22, 2018
3 MINUTES READ | March 15, 2017
4 MINUTES READ | February 17, 2017
3 MINUTES READ | May 13, 2016
4 MINUTES READ | June 28, 2014