Choosing a Monochromatic Color Palette in Photoshop

Once upon a time, when I started a design project with a monochromatic color palette, I would choose colors based on instinct. I would pick a base color, and if I needed a different shade of said color, I would “eyeball” it in the Photoshop color picker by moving the eyedropper slightly in a direction that would give me the result I needed. This approach worked well enough, but the more detail-oriented perfectionist side of me was put off by the arbitrariness. There had to be a more systematic approach to a monochromatic color palette than just picking and choosing. There is, and with a basic understanding of color theory, specifically, how saturation and brightness works, you’ll be creating monochromatic color palettes in no time.

Brief Overview of the HSB color space

Before we choose the monochromatic color palette, we need to understand what HSB is. HSB is a color space that defines colors based on 3 values: Hue, Saturation, and Brightness¹. Imagine HSB as a cylinder: Hue takes a value of 0-360°, saturation and brightness each take a value of 0-100%. In my opinion, the last 2 values is what makes HSB so wonderful to work with, as I can adjust colors by changing these values without using Photoshop as a intermediary. This is why I prefer HSB to using RGB. It’s far less abstract and lends itself to how humans perceive color.

Choosing the colors

When I started choosing colors for version 4 of chrisgriffin.org, I began with a dark base color since I was going with a light on dark theme. I ended up choosing a slightly warm dark gray. In HSB, it’s value is (60,8,14) (the hex value would be #242421). The rest of the grays in my design are a variant of this base color. The way I did this is just by increasing or decreasing the brightness value in increments of 10 (and sometimes 5). For example, the background color of the main navigation here is (60,8,34), compared with my base color, there is a 20 unit brightness increase. Obviously, you can choose intervals that work best for your design. Adjusting color saturation is just as easy; let’s say I wanted a slightly less saturated color for my visited links, I would decrease the saturation value depending on how unsaturated I would like the color to be.

HSL and CSS3

The CSS3 color module includes the HSL color space which will allow for easier color adjustments without the need to fire up Photoshop. At the time of this writing, the major browsers that have HSL support are Firefox 3, Safari 4, and Opera 9.64. Since CSS support for HSB is not supported by IE (big surprise), it’s best we continue to use hex values in our CSS, which means you’ll need to use the hex value that the Photoshop color picker generated when you chose the color palette using HSB.

More Resources

• Wikipedia: HSV Color Space
• W3C: CSS3 Color Module
• Working with HSL in CSS

1. HSV, HSL, and HSI, are other color spaces that use a very similar representation, but for the sake of this tutorial we’ll stick to HSB because that’s what Photoshop uses [↩]