Color Selection And Management For The Web

I take a look at ways to approach color selection and scheming for website design and development; and how we can manage the process a bit better.

When it comes to color selection specifically for the web, there are not many rules in place other than what predefined brand guidelines or collateral material will provide beforehand. Whether we’re creating a palette from whatever assets are available, or are simply starting from scratch, there are approaches we can take into consideration as designers.

As front-end developers, we have long been trying to find better ways to contain and facilitate palettes for managing and defining colors in our workflow. But more on that in a little bit.

Creating a palette from scratch

Although this doesn’t happen very often, sometimes we simply don’t have enough assets or information to work with that we are forced to create a color scheme for a website from square one (usually an identity and brand are developed before creating concepts for one). Sometimes there’s just a logo. If there’s nothing to work with right off the bat, there’s a couple of things we can do to get moving in the right direction.

Get the client’s thoughts

It may help to gauge the client’s likes and dislikes from the very start. That will help rule out any colors the client would repel against, and give us some idea of what they might be expecting. If they don’t have any input, sometimes this is a good sign that they have faith the designer will make the right decisions. Part of making the right color choices comes out of the next point.

Research the industry and find inspiration

It goes without saying that designers should look at other websites for inspiration. Consider what colors may best reflect the company, product or industry; and aim to find a color scheme that would help identify it better among competitors. This will give us confidence in our choices, and also allow us to prepare some documentation on why a particular direction would work.

Keep color theory in mind

A good palette will generally consist of either two contrasting brand colors, or two monochromatically similar colors, and a handful of darker or lighter tones for versatility. While that’s not always going to be the answer to every situation, having some knowledge of color theory is essential to apply color successfully to web design.

Utilize a color wheel

Often the best place to start creating a palette from scratch is to use a Color Wheel — It makes color scheming so much faster and logical. If we’ve already decided on a primary color, or at least have one to work with — from a logo for example, we can use that primary as a starting point and discover a scheme with Triad, Complementary, or Compound settings.

When designing

When a color scheme is more or less determined and the website design process is in full swing, the part that is often underestimated is applying the right balance of colors to a layout. It can get subjective, but we can apply certain techniques here.

Try the 60/30/10 method

Some designers like to use the 60/30/10 method. The idea is to apply a primary color 60% of the time, a secondary color 30% of the time, and an accent color 10% of the time. The Best Buy website (as of August 2015) is a great example of this. But this isn’t always going to be applicable to every case — the branding may be just black and white with one accent color, for example. However, it’s a pretty rock solid approach for a Triad color scheme.

Design in black and white first

One method that can be quite smart is to create a concept in black and white first, and then start introducing color once we’re satisfied with the layout and typography. Color judgment can sometimes bog us down in the design phase, and we end up spending more time fiddling with color balance when layout and type should be the foundation that drives our color decision making.

Incorporate subtle hues into blacks, grays and neutral tones

I’ve never been on the side of the fence that has the argument: “Don’t use 100% black or gray”, because the brand sometimes calls for it, but in most cases I can see the merit of incorporating subtle hues into the darker and brighter grays and neutral tones. A concept can feel tighter and more gelled when the overall hue is more or less the same family.

Create a palette within the Photoshop document

I’ve often found it useful to create a palette within the Photoshop document from the very start, just so I can pick a color at any time with ease — I’ll usually just create a small group of color squares and have them floating somewhere temporarily in the concept. Visually it gives me a constant reminder of my options, and it’s easier than copying and pasting HEX values!

Always use HSB when making adjustments

When tweaking colors, I highly recommend only adjusting the HSB values. HSB stands for Hue, Saturation and Brightness. As the model suggests, it’s much easier to adjust a color based on those values than with Red, Green and Blue (RGB). It allows us to fine tune the characteristics of a color.

When developing

For front-end developers, Sass is currently the best method to manage color schemes due to the ease at which we can make global edits, automatically define various shades of a particular color, and even facilitate multiple palettes with maps for multiple purposes.

Using Sass to create a basic color palette

In our _settings partial we would create a series of variables. The best color theming convention is to list out all the brand color descriptors first, then apply them to a new set of variables based on prominence or type.

// Branding
$purple: #7709d4;
$green: #0D873A;
$orange: #DB931F;
$black: #000000;
$white: #FFFFFF;

// Usage
$color-primary: $purple;
$color-accent-1: $green;
$color-accent-2: $orange;
$color-text: $black;
$color-background: $white;

Taking it a step further

We could set up a range of hues for both the primary and accent colors so that in certain cases we are altering the brightness or saturation to “cheat” how the color is perceived in certain places.

For example, one might visually perceive a color to look rich and prominent as a background, but when applied to a thin typeface it fails to pass legibility; so we’d apply a darker, maybe even more saturated tone to fix that. It would be easy to do it straight on the selector, of course, but if we want to limit our colors and manage them a bit better we should use variables. There are tools out there that will output the code we need and allow us to preview it as well.

We could also create a black with a subtle hue based on the primary or one of the accent colors.

$color-primary-light: desaturate(lighten($color-primary, 6), 4);
$color-primary-dark: saturate(darken($color-primary, 5), 3);
$black: desaturate(darken($color-primary, 35), 65);

Advanced usage

To take color management in Sass to the highest level, look no further than these great examples and possibilities:

Conclusion

Handling color selection and management for websites requires a slightly different mindset than in other mediums, but with a little practice and some basic principals in place, we can make it much easier.

By Christian Miller  |  Follow me on Twitter