TweetFollow Us on Twitter

Outside The Web-Safe Palette

Volume Number: 21 (2005)
Issue Number: 5
Column Tag: Programming

Outside The Web-Safe Palette

New Software Gives Designers A New Way To Look At Color

by Dean Wilcox

Thinking Outside the 216-Color Box

Let's talk a little about how we select colors in 2005. Consider this:

  • The average human eye can see about 3,000,000 colors
  • 72% of monitors today display millions of colors (24-32 bit)
  • 25% of monitors today display thousands of colors (16 bit)

Then why do Web designers tend to keep within the old 216 "Web-safe" color palette? I realize that you don't anymore but I'm talking about the other guy.

First a quick history lesson for the youngsters. Back in the old days, we became aware that certain colors we picked on our Macintosh PowerPC didn't look right on the client's Windows 3.1 machine. Some looked all mushy and on close inspection, they were not even a solid color but were a collection of different colored pixels - they were "dithered." Due to this fact of computer hardware life, we quickly adopted a set of colors that would not dither between an 8-bit (256 colors) Mac and PC. We ended up with a fine palette of 216 colors.

So it's 2005 and if you ever take a tour on the Internet to explore articles, discussions or software regarding color for the Web, this same 216 palette is still with us. We seem to embrace the latest server-side technology, the newest tool to make our sites cool and functional, but we still do it in 216 colors.

OK, I know not everyone stays with the old Web-safe palette and all you Flash people are exempt, but I'd like to discuss that as we move outside into the light of thousands or millions of colors, there is a new tool to help us look at color in a new way.

Master Colors HVC Color Composer

Even though we always say it's our skill alone that makes us so good in our client's eyes, every once in a while a new graphics tool comes along that can make you a better designer. The HVC Color Composer(TM) from Master Colors(TM) is just such a tool. In fact, this Photoshop plugin for Mac can make you look like a genius to your clients., or at least good enough to get paid on time. Considering the fact that this software has the potential to make every design professional a master of color composition, its $129.95 price tag is actually quite a bargain.

Master Colors adds a fifth color space to the Photoshop color picker to create a color space that actually makes sense. The "HVC" in the product name stands for hue, value and chroma (intensity). To get access to the unique HVC color space is worth the price of this software alone. All the other color spaces are still available on the Photoshop Color Picker, but the HVC model is the most user friendly and the one that makes the most intuitive sense.


Fig 1. Master Colors Color Composer color picker for Photoshop. Showing new color space controls: hue, value and chroma.

What's interesting about the new color dialog box is the visual representations of the color spaces. As you click on the various radio buttons, H (Hue), V (Value) or C (Chroma), you see new visualizations of the colors and their relationships to other colors. Clicking the H radio button, you view the HVC space by hue slices and can navigate the hue axis with the vertical slider, exactly the same in the basic Photoshop color picker. The shape of the visualization changes upon the amount of chroma in any particular color. By clicking the V radio button, you view HVC by value slices. Value is a color lightness property; with this we view all colors of a certain lightness at once The visualization is similar to hue, but now you see all of the other colors and their relative chroma value. With the C radio button selected, you view all colors of a certain intensity at once. In Fig 2. the small dot represents the same color (blue) within each color space.


Fig 2. Visual representation of color space. First example is your typical HSB, second through fourth demonstrating hue, value and chroma.

Color Quantification Technology

We all know there is an underlying mathematical coherence in music (and many software writers are also musicians). Although musicians do not have to think about math when they perform, mathematical orderliness plays a crucial role in their ability to control their medium. Essentially, Master Colors has brought this same order to the use and manipulation of color.

Master Colors is a pioneer in color quantification technology. Simply put, this is a method whereby numerical distance between all colors can be measured by contrast. (See Fig. 3). Contrast is the line that gets created when two colors are placed next to each other. The softer the line, the lower the number, the sharper the contrast, of course, the higher the number. The HVC Color Composer not only determines just the contrast between values, which is the way a lot of us think about contrast, but the combined contrast of hue, value and chroma. This is not a simple exercise in desaturating colors and then just measuring the resulting values.


Fig 3. Visual diagram of how we typically view "contrast." Linear black and white is what we're all familiar with. Color diagram visualizes the concept of contrast between colors.

Just as in music, once the numerical relationships between colors can be established, an orderly system of harmonics can be created. This is exactly what Master Colors has done. But enough with color contrast theory for now, we're designers after all.

The great thing that the Color Composer does is to create user-defined palettes based upon colors you select. They can be saved (as swatch .aco file) and then loaded into the Swatches window. Select a color, or multiple colors with the Color Composer, the software crunches the numbers and opens up an intuitive and aesthetic process for color selection from the dynamic palettes the software generates. These are not static palettes. These are palettes created by the software at the request of the designer to work specifically with their own color choices. They are absolutely unique. And they are way beyond 216 regimented colors.

Putting the Technology to Work

For the rest of the article, we'll take you through the process of using the HVC Color Composer Professional(TM) to create color combinations for a Web site for a fictitious textiles dyes firm. The color compositions created were complicated enough that there is no way they could have been created without this software product. Well, OK they could have, but only if you were a student in color theory, had plenty of time, patience, Mountain Dew and not to mention an amazing skill at selecting just the right colors. These compositions were extraordinarily easy to create using the Color Composer.

Granted, as with any tool, it's still up to the designer to make a series of intuitive color choices from the palettes. If you insist upon a composition of purple, orange, pink and green, there's no helping you (BTW I don't want any emails if you actually have used those colors together). But the software instantly creates harmonically coherent palettes that work with certain target colors as a design progresses.

For our little demonstration, we have a new client that specializes in organic and earth-friendly dyes for the textile industry. Mr. NewCompany (how original) has stated how his new dyes are so unique that the viewer must be able to see all the wonderful colors they can produce. Obviously his target audience is not the 1 in 12 folks who have some sort of color deficiency and have at the minimum a 16 bit monitor. Plus we'd never get the results we need with just 216 colors. We'll start with a quilt-like diamond and square pattern and see how using the Color Composer produces many successful color combinations.


Fig 4. Client wants see various color combinations. Our scenario will utilize the Auto Range palette using the white background as the target color.

The Amazing Auto Range Function

The software offers three functions for building color palettes, the Proportion button, the Range button and the Auto Range button.

The Proportion function creates a palette of colors that are a certain proportional distance from any two colors, such as 1:1, 1:2, 1:3, etc. This is incredibly useful for such tasks as finding one or two colors that work well with let's say two logo colors a client gives you to work with. No matter how difficult these colors may be to work with, the Proportion function instantly generates hundreds of colors that will work with the original two colors imposed on you by your client.

The Range function gives the designer control of specific contrast numbers, so you can create your own harmonic progressions. The Range function is important for complicated color relationships where three or more colors are touching. This is somewhat of an advanced user function, which we won't get into detail in this article. However, there is an excellent online manual you can download from Master Colors' Web site that goes into advanced user functions in some detail.

The Auto Range function creates a simple proportional collection of contrast numbers in a doubling progression, but the beauty of Auto Range is the designer doesn't have to think about the harmonic technicalities. Instead, you simply get these great palettes where every color has a mathematically coherent relationship to the white background we decided to work with.


Fig 5. Auto Range palette shows colors with a contrast range of 5, 10, 20 and 40 contrast steps from white.

Starting with our white background, we'll create a palette with the Auto Range function. This produces a collection of colors with pre-determined contrast levels of 5, 10, 20 and 40. Next, we'll save the palette, replace our original palette in the Swatches window and start filling in the diamond and square pattern. For our first example we'll restrict ourselves to colors solely in one contrast range.


Fig 6. In Photoshop, replacing swatches with new palette representing color contrasts 5, 10, 20 and 40.


Fig 7. Selecting colors within the 5 contrast range.


Fig 8. Resulting color composition from the saved palette.

All of the colors within this range of 5 work very well together, even if they are very light. And it didn't take any time at all. In fact all of the color compositions done for this article were done in short order.

But remember, Mr. NewCompany wants to see lots and lots of color combinations. So next we'll demonstrate how other color combinations look with the full compliment of all contrast ranges 5 to 40. We'll also explore some other compositions using a few slight modifications to our original palette.


Fig 9. Resulting color composition from a palette with full contrast range of 5, 10, 20 and 40.


Fig 10. Resulting color composition from a slightly modified palette. In this case using black as the target color.


Fig 11. Mix 'n Match. There's no limit to the combinations that can be created.

Moving Forward

Within a short amount of time we've been able to create various color combinations for review by Mr. NewCompany. It's pretty amazing when creating these complicated color compositions with dozens of relationships to know exactly what each color is doing in the composition from a harmonic point of view, and to finally have total and absolute control of your color design. When the client ask you how you came up with so many great combinations, you just smile and remind him that's why you're getting the big-bucks (you're supposed to chuckle at this point).

These examples were created from just a few palettes using the Auto Range function. You can imagine if we used the other functions, Range and Proportion, the more combinations we could have arrived at. And did I mention it's incredibly easy to use?

So, your client loves the work, you're a hero. He just can't decide upon one combination and decides he wants to use all of them. We'll deal with that some other day. I realize it's not every day we have to deal with situations as we've described, many times we don't have the luxury of selecting dozens of colors. Added to the fact that from usability and accessibility points of view, certain color combinations are to be avoided. But that's also where this software can help in quickly exploring and discovering good color combinations no matter what the restraints.

Nevertheless, once you get your head around the concept of hue, value, chroma and color contrast and start creating your own palettes with the HVC Color Composer, your relationship with the Photoshop color picker will be irrevocably changed. Between the new visual relationships of the color spaces to palette creation, it's another great tool for your tool belt. Use it enough and you won't be able to live without it. In fact, I would have to recommend that anyone who works with color professionally should really have this product. The results are fast and extremely impressive. Best of all, the process one goes through to get these results is remarkably intuitive. In a matter of minutes, just about anyone can be proficient with this amazing new product.

To purchase the HVC Color Composer, to download the on-line tutorial or to simply get a more comprehensive explanation of how to become a master of the new HVC color universe visit the Master Colors Web site at www.master-colors.com You can also submit queries to the Master Colors staff at, questions@master-colors.com. Happy color picking.


Dean Wilcox has spent 25 years as a graphic designer and the last ten in Web design, and has worked on projects for some of the world's most recognized companies. Most of his professional life was spent at Landor Associates in New York and San Francisco and now has his own modest practice in Sausalito. He can be reached at dean@wilcoxdesigns.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Together 3.6.1 - Store and organize all...
Together helps you organize your Mac, giving you the ability to store, edit and preview your files in a single clean, uncluttered interface. Features Smart storage. With simple drag-and-drop... Read more
Cloud 4.1.1 - File sharing from your men...
Cloud is simple file sharing for the Mac. Drag a file from your Mac to the CloudApp icon in the menubar and we take care of the rest. A link to the file will automatically be copied to your clipboard... Read more
OmniFocus 2.7.1 - GTD task manager with...
OmniFocus helps you manage your tasks the way that you want, freeing you to focus your attention on the things that matter to you most. Capturing tasks and ideas is always a keyboard shortcut away in... Read more
CleanApp 5.1.1 - Application deinstaller...
CleanApp is an application deinstaller and archiver.... Your hard drive gets fuller day by day, but do you know why? CleanApp 5 provides you with insights how to reclaim disk space. There are... Read more
ForkLift 3.0 Beta 2 - Powerful file mana...
ForkLift is a powerful file manager and ferociously fast FTP client clothed in a clean and versatile UI that offers the combination of absolute simplicity and raw power expected from a well-executed... Read more
Sublime Text 3126 - Sophisticated text e...
Sublime Text is a sophisticated text editor for code, markup, and prose. You'll love the slick user interface, extraordinary features, and amazing performance. Features Goto Anything. Use Goto... Read more
1Password 6.3.3 - Powerful password mana...
1Password is a password manager that uniquely brings you both security and convenience. It is the only program that provides anti-phishing protection and goes beyond password management by adding Web... Read more
WhatsApp 0.2.1880 - Desktop client for W...
WhatsApp is the desktop client for WhatsApp Messenger, a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS. WhatsApp Messenger is available for... Read more
NeoFinder 6.9.3 - Catalog your external...
NeoFinder (formerly CDFinder) rapidly organizes your data, either on external or internal disks, or any other volumes. It catalogs all your data, so you stay in control of your data archive or disk... Read more
Amadeus Pro 2.3.1 - Multitrack sound rec...
Amadeus Pro lets you use your Mac computer for any audio-related task, such as live audio recording, digitizing tapes and records, converting between a variety of sound formats, etc. Thanks to its... Read more

How to Rule With a Firm Hand in My Majes...
My Majesty is a kingdom management sim not unlike August’s magisterial hit, Reigns. It’s essentially a reskin of developer Tigrido’s previous management sim, Dictator. As supreme ruler of the land, you must consult with a number of subjects to... | Read more »
Our 5 Favorite iMessage Sticker Packs
At long last, iMessage joins the ranks of messaging apps the likes of LINE and Whatsapp, adding an impressive collection of stickers. They’re a great way to add a little something extra to your daily conversations. [Read more] | Read more »
How to get past Vulture Island's tr...
Vulture Island is a colorful and quirky mish-mash of platforming and puzzles. It’s creative and fresh, but sometimes the game can throw a curveball at you, leaving you stuck as to how you should progress. These tips will help you explore smoothly... | Read more »
The new Clash of Kings is just for Weste...
If you’ve played the original Clash of Kings, you’ll probably recognise the city building, alliance forging and strategic battles in Clash of Kings: The West. What sets this version apart is that it’s tailor made for a Western audience and the... | Read more »
Frost - Survival card game (Games)
Frost - Survival card game 1.12.1 Device: iOS Universal Category: Games Price: $3.99, Version: 1.12.1 (iTunes) Description: *Warning: the game will work on iPhone 5C and above and iPad Pro / 4. Other devices are not supported* | Read more »
How to build and care for your team in D...
Before you hit the trail and become a dog sledding legend, there’s actually a fair bit of prep work to be done. In Dog Sled Saga, you’re not only racing, you’re also building and caring for a team of furry friends. There’s a lot to consider—... | Read more »
How to win every race in Dog Sled Saga
If I had to guess, I’d say Dog Sled Saga is the most adorable racing game on the App Store right now. It’s a dog sled racing sim full of adorable, loyal puppies. Just look at those fluffy little tails wagging. Behind that cute, pixelated facade is... | Read more »
Let the war games commence in Gunship Ba...
Buzz Lightyear famously said, “This isn’t flying, this is falling – with style!” In the case of Gunship Battle: Second War, though, this really is flying - with style! The flight simulator app from Joycity puts you in control of 20 faithfully... | Read more »
How to get a high score in Fired Up
Fired Up is Noodlecake Games’ high score chasing, firefighting adventure. You take control of a wayward firefighter who propels himself up the side of a highrise with blasts of water. Sound silly? It is. It’s also pretty difficult. You can’t... | Read more »
NBA 2K17 (Games)
NBA 2K17 1.0 Device: iOS iPhone Category: Games Price: $7.99, Version: 1.0 (iTunes) Description: Following the record-breaking launch of NBA 2K16, the NBA 2K franchise continues to stake its claim as the most authentic sports video... | Read more »

Price Scanner via MacPrices.net

15-inch 2.2GHz Retina MacBook Pro on sale for...
B&H Photo has the 2015 15″ 2.2GHz Retina MacBook Pro (MJLQ2LL/A) on sale for $1799, including free shipping plus NY sales tax only. Amazon also has the 2015 15″ 2.2GHz Retina MacBook Pro (... Read more
Toughbook Celebrates 20 Years of Ruggedized M...
Panasonic System Communications Company of North America, Division of Panasonic Corporation of North America (Panasonic) today celebrates the 20th anniversary of its industry-leading Toughbook mobile... Read more
12-inch 1.1GHz Gray Retina MacBook on sale fo...
B&H Photo has the 2016 12″ 1.1GHz Gray Retina MacBook on sale for $1199.99 including free shipping plus NY sales tax only. Their price is $100 off MSRP. Read more
13-inch 2.5GHz MacBook Pro (Apple refurbished...
Apple has Certified Refurbished 13″ 2.5GHz MacBook Pros available for $829, or $270 off the cost of new models. Apple’s one-year warranty is standard, and shipping is free: - 13″ 2.5GHz MacBook Pros... Read more
Save 30% on Camera Guard’s Secure Protection...
To celebrate the release of macOS Sierra, Miami-based security solutions company, ProtectStar has announced a special 30% discount on Camera Guard Professional for Mac 2016. This innovative security... Read more
DVDFab Special Deal – Get a 1-Year Free Licen...
Beijing, China based specialist in the field of DVD, Blu-ray and video backup solutions, Fengtao Software has launched its Autumn Special Deals 2016, giving a 1-year free license of a randomly picked... Read more
21-inch iMacs on sale for up to $120 off MSRP
B&H Photo has 21″ iMacs on sale for up to $120 off MSRP including free shipping plus NY sales tax only: - 21″ 3.1GHz iMac 4K: $1379 $120 off MSRP - 21″ 2.8GHz iMac: $1199.99 $100 off MSRP - 21″ 1... Read more
13-inch 2.7GHz/256GB Retina MacBook Pro on sa...
Amazon.com has the 13″ 2.7GHz/256GB Retina Apple MacBook Pro on sale for $151 off MSRP including free shipping: - 13″ 2.7GHz/256GB Retina MacBook Pro (sku MF840LL/A): $1348 $151 off MSRP Read more
Apple TVs on sale for up to $50 off MSRP
Best Buy has 32GB and 64GB Apple TVs on sale for $40-$50 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Sale prices for online orders only, in-store... Read more
Apple refurbished 13-inch Retina MacBook Pros...
Apple has Certified Refurbished 13″ Retina MacBook Pros available for up to $270 off the cost of new models. An Apple one-year warranty is included with each model, and shipping is free: - 13″ 2.7GHz... Read more

Jobs Board

Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
Sr. *Apple* Mac Engineer - Net2Source Inc....
…staffing, training and technology. We have following position open with our client. Sr. Apple Mac Engineer6+ Months CTH Start date : 19th Sept Travelling Job If Read more
*Apple* Retail - Multiple Positions-Norfolk,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
Lead *Apple* Solutions Consultant - Apple (...
# Lead Apple Solutions Consultant Job Number: 51829230 Detroit, Michigan, United States Posted: Sep. 19, 2016 Weekly Hours: 40.00 **Job Summary** The Lead ASC is an Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.