Your friends at Viget present Inspire, a Design & Interaction Blog

Add Colors To Your Palette With Color Mixing

Viget color wheel

I’ve been wondering lately what it would look like to extend the Viget color palette beyond our signature blue and orange – particularly when I see a chart or graph in a Viget-branded presentation template. The colors typically lack harmony and sometimes it’s hard to distinguish one data point from another. If we had a few more colors to choose from, there would be more consistency and perhaps more visual contrast in our graphic visualizations.

I decided to take on the palette-extending challenge. I quickly discovered that while there’s some science to it (found in basic color theory), there’s also an art to manipulating the rules to discover just the right color combination.

A Quick Plug for Time-Saving Photoshop CS6 Plug-ins

I know, I know, there’s already a hundred lists of the 10 Best Photoshop Plugins, the 100 Best Photoshop Plugins, the 1000 Best… etc. This is certainly not one of those lists. This is just a brief shoutout for the extensions, scripts, and tools I’ve come to completely rely on to make my design process more efficient and elegant. These are the workhorses I use day in, day out.

Note: I use Photoshop CS6, so the mysteries of Photoshop CC and its wealth of features and plugins elude me.

Managing :focus styles without breaking accessibility

We’ve all done it at one time or another. The browser’s default focus style for links and form controls doesn’t mix well with a design we’re building, so either at someone’s request or of our own volition, we throw something like this into our CSS:

*, *:focus { outline: none; }

It’s seems harmless. I mean, how many problems could such a small declaration cause?

Using HSB Inputs in Photoshop’s Color Picker

Quick tip, here. Perhaps you already know about and use these. If not, read on!

I've recently started changing color values using the HSB inputs in Photoshop's color picker. If you don't know, HSB stands for hue, saturation, and brightness. One of the things I like about using the HSB inputs is that it feels intuitive (especially compared to RGB or hex values). It corresponds pretty closely with how I already use the color picker when I'm choosing new colors or slightly modifying an existing color I'm working with. In short, the saturation input moves left and right within the color box. Brightness moves up and down. Hue moves the color bar to the right of the box. Pretty simple.

Equating Color and Transparency

Color and transparency are typically treated independently. Choose a color and set its opacity (or alpha, if you prefer). Simple enough. But, how exactly are color and opacity related?

For the purpose of this post, lets just consider grayscale. With a little additional effort, this discussion may be extrapolated to all colors.

In Theory

In the RGB and HEX color modes, there are technically 256 possible shades of gray available for digital screens including black and white. However, confined to only adjusting the opacity of black on a white background, 256 shades reduces to 100 as opacity is typically represented as a whole percentage point from 0% to 100%. For reference, a table mapping 100 shades of gray to the equivalent opacity of black on a white background is attached at the end of this post.