Meshing Colors (Bridge Colors)

An article by David Brooks on November 6, 2008


Awhile back my wife took a course on color theory, and I learned something from her that helped me quite a bit when working with colors. The concept goes something like this.

1. Choose your color.
2. Choose your second color.
3. Layer the two colors and make each of them 50% transparent.
4. Adjust the transparencies of each to create a desirable third color

The result gives us what is known as a “bridge color.” A bridge color, being a mix of both colors, provides a missing piece of the visual range. Take these two colors as an example. I’m using a near lime-green and a bright red that I typically would not try to match, but nevertheless it’s the assignment and I’m proving a point.

Green and red

Next we’ll set both colors to 50% transparency and overlap them. This creates our bridge color. I wasn’t particularly thrilled with the actual 50% mix, so I left the red at 100% opacity and adjusted the green to 50%.

Green and red color mix

With that decision made, here is the bridge color with the two originals.

Green to red with a burnt orange added in

At this point the bridge has been made, though it’s more like a wood plank across a gap. The next step is to mix the bridge color and the original colors to create two more bridge colors.

Green to red with the new bridge colors added in

The new bridge color on the left is created by mixing the original burnt orange bridge color and the original green at 50% transparency. The new bridge color on the right is created by mixing both the red and the first bridge color at 50%. In a real life situation you may need to adjust the percentages in order to get a more appealing result, this is because some colors are more dominant than others. I have kept my values at 50% for simplicity’s sake.

Admittedly for some people the original colors would have gone together anyway, so to prove that the theory still stands we’ll add in a few other colors. This time I’m going to mix the new color with the entire set of colors we already have. You could do this not only to create other individual colors but also to create new color schemes as variations.

Green to red with some cyan added in

To get this mix I added a cyan-turquoise-ish color at the very bottom at 50% transparency. Now we have a more diverse set of colors that can be chosen as you see fit.

While an example of a color schemes is good, I thought it might help to see the results setup as a quick demonstration.

A demonstration of the theory in action using the cyan tones

What happens if we don’t want to use the white as a background? We can create variations by adding black and white to our scheme. In the example below I have added them at 75% opacity.

The original color scheme with white and black mixed in.

Adding black and white will give us a few darker and lighter options to choose from. To show this part in action I created this image:

A demonstration of the theory in action using the original scheme, only darker

Or, if you want to see the black, white and cyan mixture this is an example of that:

A demonstration of the theory in action using the original scheme, black and white, with some cyans

So, there you have it, a quick way to create color schemes from two arbitrary colors. I hope you find the concept as useful as I did.

Get articles from me, right in your inbox.

(I promise, no spam.)

Categorised in:

When My Daughter Met The Queen

A Photo of David Brooks
About David Brooks

David Brooks is the owner of the small creative studio, Northward Compass, based out of Orlando, Florida. He writes electronic and ambient music as Light The Deep, and fantasy stories about a place called Elerien.

© Copyright 2005 - 2018 David N Brooks. All rights reserved.