A Math-Based Approach to Color Theory Using Hue, Saturation, and Brightness (HSB)

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

Hue is 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

Saturation is the intensity or dullness of a hue. A fully saturated hue in Photoshop will have a S-value of 100%.

Brightness

Brightness is the the luminosity (lightness or darkness) of a hue. In Photoshop, brighter colors will have a higher B-value.

Photoshop Color picker

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 examples below, and perform a simple calculation addition, subtraction, and absolute value.

Complementary

A complementary color scheme is a two-color combination consisting of a base color (H0) and another color (H1) that is 180 degrees apart from H0 on the color wheel.

  • formula: H1 = |(H0 + 180 degrees) - 360 degrees|

Split Complementary

A split-complementary color scheme is a three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 150 degrees and 210 degrees apart from H0 respectively.

  • formula: H1 = |(H0 + 150 degrees) - 360 degrees|
  • formula: H2 = |(H0 + 210 degrees) - 360 degrees|

Triadic

This is a three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 120 degrees and 240 degrees apart from H0 respectively.

  • formula: H1 = |(H0 + 120 degrees) - 360 degrees|
  • formula: H2 = |(H0 + 240 degrees) - 360 degrees|

Tetradic

A four-color combination that consists of a base color (H0) and three colors (H1, H2, and H3) that are 90 degrees, 180 degrees, and 270 degrees apart from H0 respectively.

  • formula: H1 = |(H0 + 90 degrees) - 360 degrees|
  • formula: H2 = |(H0 + 180 degrees) - 360 degrees|
  • formula: H3 = |(H0 + 270 degrees) - 360 degrees|

Analagous

Analagous color schemes use a combination consisting of a base color (H0) and one or more adjacent colors (30 degrees apart) on the color wheel.

  • formula: H1 = |(H0 + 30 degrees) - 360 degrees|
  • formula: H2 = |(H0 + 60 degrees) - 360 degrees|
  • formula: H3 = |(H0 + 90 degrees) - 360 degrees|

Monochrome

A Monochrome color scheme is is where all colors are derived from the base color and the hue value is not changed. 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.

Three base colors

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.

Four additional colors

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.

tints and shades

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.

Indexed color mode

Set the palette to "Exact" and select OK.

Indexed color mode

Step 2 – View and Save the Color Table

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

Color Table

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.

Load color table

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.

See more articles like this in: theory user interface color design