Deciding on a color scheme

Designers often start a project by developing a color scheme - a set of colors that will work well together for the client or task at hand. Though sometimes you will start from scratch, generally you’ll begin with one or two base colors and apply color design methods to achieve the best results. How do you choose colors that really work? Seems simple right?

Understanding the principles of color and color theory are important. I am going to discuss how to use the psychology behind the color wheel to help you identify harmonious color combinations. Sharing an overall understanding of key color terms will help you relate to color choices moving forward.

Intent of color production:

•RGB- (Red, Green, Blue) used for computer and other electronic screens

•CMYK – (Cyan, Magenta, Yellow, Black) used for printing

•LAB – (3D color dimensions) used in landscape photography

•HSB (Hue, Saturation, Brightness) - added to any the above color models brighter = 0 darker =100

Understanding Color:

Color is very psychological and different color harmonies produce different effects. Color theory is an in-depth look into the affects that color has on the brain and understanding sensory experiences and how it affects everyone. Color choice and color harmony is the complex human response to color that is affective and cognitive, involving emotional response and judgment. As designers we want this response to be satisfying to our users, no matter what the topic is. Most people ask why is color so important, and do I really need to understand the in-depth principles in order to make a website or a mobile app? I would say no, I’m sure you can develop something that looks acceptable and will work. You can draw inspiration from others, everyone does this. However if you have a thorough understanding of color principles then you can relate to your users better AND you are aligning yourself to be and sound like a knowledgeable professional designer. Alright too much copy… not good for users. Lets discuss harmony and color properties.

Importance of color in the UXUI world

Complimentary Color scheme

Monochromatic Color scheme

Analogous Color scheme

Split complimentary Color scheme

Triadic Color scheme

Tetradic Color scheme

Complimentary - colors are opposite to each other on the color wheel, they create a strong contrast. They can be very effective as accent colors when paired with a more neutral color.

Monochromatic- Uses three or more different values of the same color

chromatic color schemes can be viewed as subtle and sophisticated.

Analogous – Color neighbors. This scheme is similar in hue and they use three adjacent colors on the color wheel. They create a smooth transition from one color to the next. It create an interesting, harmonious and slightly monochromatic color pallet. Analogous colors are often found in nature and are harmonious and pleasing to the eye.

Split Complimentary - uses one main color and the two adjacent tertiary colors of its complement. This scheme has less tension than complimentary color schemes and keeps the main color from feeling too strong or dominant. This is often more comfortable for the eyes, it’s softer, and has more space for balancing warm and cold colors.

Triadic - uses three evenly spaced colors on the color wheel. This color scheme is more interesting and vivacious than the other harmonies. It creates tones that compliment and play contrasting roles. It also creates interest and eclectic appeal.

Tetradic – uses two complementary pairs. If all four hues are used in equal amounts, the scheme may look unbalanced. This is a difficult scheme to use unless you understand it thoroughly. Choosing one color to be dominate will help with the harmony, if all four hues are used in equal amounts, the scheme may look unbalanced. When used correctly it creates a vibrant look especially when used at full saturation.

Time for Harmony

Once you’ve selected your harmonious color, you may want to adjust the value of your palette, in other words how light or dark the color is. Here are more important terms to understand and memorize:

Value Color properties:

Primary: Red Yellow Blue, cannot be created by mixing any other colors together.

Secondary: color resulting from the mixing of two primary colors

Tertiary: made by mixing adjacent primary and secondary hues

Hue – purity of a color

Saturation – intensity of a color

Lightness – ‘opacity’ of a color (0%-100%)

Shade – amount of black in a color

Tint – level of white in a color

Tone – amount of gray in a color

Color must be communicated accurately. User experience is all about designing for the user and not what you think looks good. If you look for inspiration that’s great. That website has a great palette, or this magazine has great pictures, or that mobile app has interesting design…. I think I’m going to use that. Hmmmm no you are designing for yourself and not the user. An understanding of color principles, visual design principles, in order to look and sound professional in this evolving world is essential. It also proves that designing for yourself is not the way to go. You cant fake it till you make it in this field.

Great Tools:

http://htmlcolorcodes.com/color-picker/

https://color.adobe.com/create/color-wheel/

http://www.sensationalcolor.com/

http://paletton.com