Photoshop Color Workflow Using HSB

Written by Ethan Gardner Web Design

More than any other element of design, color has psychological underpinnings which makes it difficult to master. Learning the fundamentals of color theory is the basis for more advanced work and the reason why color is such an important part of design.

Recently, I have been focusing on the mechanics of design and have developed a streamlined system of creating color schemes and integrating them into the workflow in Photoshop.

Color Properties and Their Application in Photoshop

Most web designers are probably comfortable working with RGB or Hexadecimal color values, but working with hue, saturation, and brightness (HSB) values can provide a more intuitive means of working with color since it is more similar to other mediums.

• Hue: The name of a pure color. A hue in Photoshop is indicated by its position (in degrees) on the color wheel. The higher the slider on the color bar goes, the further around the color wheel you go.
• Saturation: The intensity or dullness of a hue. A fully saturated hue in Photoshop will have a S-value of 100%.
• Brightness: The luminosity (lightness or darkness) of a hue. In Photoshop, brighter colors will have a higher B-value.

Understanding the Color Wheel and Color Harmonies

The color wheel is the most important tool to understanding color harmony. Position on the color wheel is indicated by degrees. Every color harmony will have a base hue to serve as the common element between other colors.

To come up with color schemes, start with your base color indicated by H0 in the example below, and perform a simple calculation addition, subtraction, and absolute value.

• Complementary: a two-color combination consisting of a base color (H0) and another color (H1) that is 180° apart from H0 on the color wheel.
  • formula: H1 = |(H0 + 180°) − 360°|
• Split Complementary: A three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 150° and 210° apart from H0 respectively.
  • formula: H1 = |(H0 + 150°) − 360°|
  • formula: H2 = |(H0 + 210°) − 360°|
• Triadic: A three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 120° and 240° apart from H0 respectively.
  • formula: H1 = |(H0 + 120°) − 360°|
  • formula: H2 = |(H0 + 240°) − 360°|
• Tetradic: A four-color combination that consists of a base color (H0) and three colors (H1, H2, and H3) that are 90°, 180°, and 270° apart from H0 respectively.
  • formula: H1 = |(H0 + 90°) − 360°|
  • formula: H2 = |(H0 + 180°) − 360°|
  • formula: H3 = |(H0 + 270°) − 360°|
• Analagous: a combination consisting of a base color (H0) and one or more adjacent colors (30° apart) on the color wheel.
  • formula: H1 = |(H0 + 30°) − 360°|
  • formula: H2 = |(H0 + 60°) − 360°|
  • formula: H3 = |(H0 + 90°) − 360°|
• Monochrome: a color scheme based off the base color. Variations in shade or tint are achieved by changing the S-value and/or the B-value for your base color.

Putting it All Together

As a practical example, I am going to walk you through the creation of a split-complementary color scheme for one of my upcoming projects. To get started, open up a new Photoshop file. I am going to work with a base color with a hue value of 256.

Create Colored Shapes

Use the rectangular marquee tool to make a selection, and fill it with the selected color on a new layer.

The three colors I have chosen are:

1. H: 256, S: 39, B: 7 (#0d0b12)
2. H: 106, S: 94, B: 20 (#0e3303)
3. H: 46, S: 17, B: 88 (#e0d7ba)

Create Additional Colors for Visual Interest

Trying to spread 3 colors across an entire site would be boring, so I am going to add some auxiliary colors to give more options for experimentation.

My additional colors are as follows along with the reasons why I am chose to incorporate into my theme:

1. H: 236, S: 90, B: 50 (#0d2880)—Analogous to color #1 above.
2. H: 136, S: 34, B: 39 (#41634a)—Analogous to color #2 above.
3. H: 76. S: 96, B: 46 (#577505)—Analogous to color #2 above.
4. H: 46, S: 92, B: 98 (#fac313)—This is a chroma variation from color #3, meaning that the H-values are the same, but the variance comes from the change in saturation and brightness.

Tint and Shade

The final step for generating some additional colors is to create tint and shade variations by adding white and black layers respectively and set them to a low opacity. In the example, I created two white layers and two black layers, set the opacity to 20%, and overlapped them to achieve two layers of shade and two layers of tint. An area in the middle was left open for the original colors to show through without being altered.

These colors can be used as a guideline for anything in the design: backgrounds, navigation, headlines, copy.

Create a Custom Set of Swatches

Now that the colors have been solidified for the design, we could easily leave the colors saved in their own psd and just keep two documents open during the design process or import the layers into the main design file. Fortunately, there is a more streamlined way to work.

Step 1—Convert the Image Mode to Indexed Color

In Photoshop, go to Image > Mode > Indexed Color. Select OK at the prompt to merge visible layers and discard the hidden ones which will result in one flat file.

Set the palette to “Exact” and select OK.

Step 2—View & Save the Color Table

Now that the image is in Indexed Color mode, go to Image > Mode > Color Table to save this color palette.

Step 3—Import the Color Table to the Swatch

Go to the Swatches Window and select either “Load Swatches” or “Replace Swatches.” Find the folder where you saved the color table in step 2, change the file type drop down to “Color Table (*.ACT),” and open your file.

Download the color table

Conclusion

Revisiting the fundamentals of color theory allows you to really think about the technique involved and will improve your understanding as well. There are certainly other methods of creating color schemes, but the ability to generate color schemes from scratch allows a greater ability to explain choices as a designer which could lead to more creative solutions for clients and take your designs to the next level.