The theory behind Real Colors

Short introduction

As some of you know, we just launched Real Colors, an Android app that helps designers get inspiration anywhere by automatically generating color schemes from images.

We implemented some unique algorithms that use popular color theory generation rules like monocromatic, triad, shades, analogus, complementary, split complementary or tetrad to create the perfect color schemes.

Importance of colors in design

People are asking for great design from the products they buy, the sites they visit or the applications they use. A huge part of a great design is given by what colors are chosen and in what way those colors send the proper message to the end-user.

color in images

Our approach

Real Colors automatically generates color schemes of 5 colors from an image taken with the camera or from the gallery using the most popular color theory generation rules (detailed below). The colors we choose have some interesting properties like:

  • they are real colors meaning that they all can be found in the image
  • our smart algorithms choose the most representative colors that match the color rules

Monocromatic

Monochromatic color schemes are generated from one specific hue and include different tones, shades and tints of it. Designs using them are simple and good looking generally.

monocromatic

monocromatic example

Complementary

Complementary schemes are generated from opposing hues on the color wheel and create a strong contrast, especially when the opposing colors are used right next to each other.

complementary

complementary example

Analogous

Analogous color schemes are created by choosing colors with their hue equally spaced from one another on the color wheel.

analogous

analogous example

Shades

Shades color scheme consist of the same hue and saturation. The only thing that varies between the 5 colors is the brightnes (or shade). These color schemes look beautiful!

shades

shades example

Split Complementary

Almost the same as a complementary color scheme, the only difference is that instead of choosing one opposing hue, we choose two opposing hues on either side of the opposing base hue. Split complementary color schemes offer a good contrast between colors, especially when opposing hues are used right next to each other.

split complementary

split complementary example

Triad

Triad color schemes are made up of hues equally spaced around the color wheel. The angular distance between hues is 120 degrees. These colors schemes offer a good color diversity and can be used in more colorful projects.

triad

triad example

Tetrad

Tetrad color schemes are created by choosing 4 hues equally spaced around the color wheel, with an angular distance of 90 degrees. These color schemes give a lot of color diversity, and can be hard to use in designs, but not impossible.

tetrad

tetrad example

BONUS: Real

The Real color rule is created using our own secret sauce and is available for both Real Colors Lite and Real Colors Pro. We combined the best of the above color rules, added up the colors from the image and a little bit of magic to create a representative real color scheme. We are looking forward on your comments about it :) See some examples in the gallery bellow.

Feedback is always welcome

Thank you for reading this kinda long article and we hope you now have a better understanding on the theory behind our application. As a team developing mobile applications, we are at the beginning of it so we are looking forward for your feedback about the article, our apps or any other aspect. Feel free to comment or write us at feedback[at]makan-studios[dot]com. Below you can find some color schemes generated with Real Colors. I hope you like them :)

  • bay_analogous

  • bay_complementary

  • bay_monocromatic

  • bay_real

  • bay_shades

  • bay_split_complementary

  • bay_triad

  • flower_analogous

  • flower_shades

  • hats_split_complementary

  • inside_triad

  • red_shades

Leave a Reply

*