Meshing Colors (Bridge Colors)

November 06, 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.

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%.

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

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.

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.

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.

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.

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:

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

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.