Design, Code and Prototyping — Medium | Anna Grenn

Part 2. Introduction to Natural palettes

Music & Colors

What do you feel when you listen to music? I have a very visual imagination, so I often can’t help but picture colours, shapes, objects and sometimes even landscapes. This is especially true when it comes to live concerts or classical music. Every composition has its own shade of joy or sadness, love or misery.
I think this goes both ways. Modest Mussorgsky wrote Pictures at an Exhibition after a memorable experience at a museum. Art often inspires people to express their own emotions in their own way. Just to give you a few examples, “Somebody to love” by Queen makes me associate with roses, “Yesterday” by Beatles with a sunset, Chopin’ music with sky and ocean winds.

I want to share my idea with you about a music player that changes colors depending on what song or composition is playing. As you know, most music players simply pick the album cover and follow its color pallet while playing the songs from the album. On one hand, I find this terribly boring. On the other hand, songs don’t always have the same theme as the cover art or even the rest of the album. I think it would be a fine idea if the cover colors of the song changed depending on how fast or slow the music is or what genre it is. But how can this musical player be developed? First of all, it should have some pattern or algorithm for good color combinations. Secondly, the color parameters(Hue, Value, Saturation) should follow music parameters(Rhythm, Melody, Dynamics/Expression, Harmony).

How to Find Best Three Colors Scheme?

I went though hundreds of nature pictures trying to find a color scheme for my music player. It was long and hard work, but now I have a lot of new great color combinations I’ve never used before.

More often than not, natural pallettes work well for UI design, but this isn’t always the case. Nature comes in many shades, and bold colours are simply better at catching your attention. Another thing to remember is that while it is really easy to fit two colours together, adding a third to the mix can often make everything much more complicated, since each colour must complement the other two perfectly. Balance is the key to harmony.

I found some really great three color scheme and I tried to understand why it fits so well together while others did not work. I put these designs on a color wheel and discovered that all of these combinations can be divided into three categories: all three colors next to each other, two colors next to each while the other one is opposite, three of colors opposite to each other on color wheel. I will use classic terminology for color combinations I found in a book about color theory: Analogous, Split Complementary and Triadic.

1. Analogous

The simplest combination is the analogous method. It is created by using three colors that are relatively close to each other on the color wheel. The sum of the angles are less than 90 degrees. For example, if you want to have red as you main color, you can add orange or brown. Most colors next to each other fit together, except for warm red and cold pink or violet. Very beautiful colours on their own, but put them together and it looks like the innards of a carrion bird. All shades of blue, green and purple work really well with each other, though it’s true that some colors could be brigher in combination, some darker. I recommend for you to take inspiration from photos of nature first, and the colour wheel after. Using only the colour wheel to pick out colours is like finding a one dimensional needle on a neigh-infinite two dimensional plane the shape of a circle. Even with a significant talent in artistic skills and long observation of natural colours, you need lots of experience to just point at the colour wheel and get what you want. Practice helps a lot, though.

Using gradient

If you already have two colours, you can find the third one by splitting the difference between the two. In my opinion, this is the best and easiest way to find a three colour scheme.
This gradient works if two colors are next to each other on the color wheel, if these are opposite colors, you can’t always create good gradient with it. but if it is Analogous colors, it always looks good.

2. Split Complementary

Two colors stay next to each other and third color is on the opposite of color wheel. The sum of the angle is less than 180 degrees. There are some patterns what help you how to pick: yellow is really good for opposite colours for red-purple, blue-green, turquoise-violet, red works really well with green-blue-purple. These are simply a few examples. The possibilities stretch to the very edges of human perception.
Lots of colors fit together well. There is a way to create Split Complementary schemes easily. First, you pick up two opposite bold colors you want to use in your design and after just find third color next to one of them. For example you want to have yellow and purple, I would recommend for you to add pink or blue color from purple side or green from yellow side. All of those colors fit together well if you use right saturation and contrast.

3. Triadic

Triadic schemes are made up of three of colors opposite to each other on the colour wheel. This is one of the more diverse color schemes and also the most difficult. It is really hard to find a good combination. Here are some natural patterns: green and yellow are really good with all shades of red, pink, purple and blue. It is the basic flower combination: green leaves, colourful flowers and yellow gynoecium. As you can see, it really works great together. Another great source of inspiration can be the sky at dawn and sunset. It has a lot different colourful combinations: blue, purple, orange; red, yellow, turquoise and others.

Get Inspired by Nature

I’m using natural color pallet for my designs, because it has the best color combinations and this is really good for your eyes.

You can learn how to get inspired by nature in my previous article:

Introduction to Natural palettes

Colors aren’t just numbers of Red, Green and Blue that we can just put in a computer and get results. In fact, it is really hard to just find the right colors using a color picker. Pictures of nature were always a great source of inspiration for my work and it helped me to learn a lot about how colors fit together. I think it would be easier for everybody to find great color combinations, if they just closed their color picker and opened photos of landscapes, plants, flowers and the sky.

Also I want to share with you easy way how to pick up colors from picture of nature. For example you found beautiful pictures from nature you want to use for colors pallet:

Next step you can add this picture to Adobe Color CC or pick up colors by yourself:

Adobe Color CC

Adobe Color CC

It looks like great color pallet for design, I’m going to use it.

Another way you can look at nature pictures on this website:

Color Palette Ideas | ColorPalettes.net

From Concept to Real Product

If there are some developers reading this article who are interested in idea to create a music player that changes cover colours based on on music rhythm and style, please contact me, as I would be happy to start this project. Also if there are musicians who are interested, please join too. I don’t know a lot about music or how it is created and played and I’m interesing in your opinion about my idea of represending music by colors combination.

Follow my works on Dribbble & UpLabs:

• Anna Grenn
• Anna Grenn – UpLabs

Best Three Color Scheme for UI Design was originally published in Design, Code and Prototyping on Medium, where people are continuing the conversation by highlighting and responding to this story.