Design Principle 5: Color

Design Principle 5: Color

Color is one of the hardest parts of the design process.

We have to make decisions for every element we design, and based on how much of the color in our design is built from having a set process, we may be making these decisions repeatedly and to no end.

Constantly we have to figure out which colors to use, choose which colors to replace, or choosing to use no color

This Guide

The purpose of these Design Principle guides is to introduce the “Why” of why we choose what we choose.

The goal of these guides is to equip you with the skills you need to build intuition and start making faster design decisions. By understanding more about the color process, you’ll be able to quickly and more objectively choose your colors in your process.

The art of choosing better colors is just one of the things that we work on together in the Compass of Design Community.

Previous installments

If you’ve missed any part of the previous guides, make sure you check them out.

Color

Color is literally the human perception of light bouncing off of or radiating from real objects.

There are billions of colors that the average human eye is capable of detecting. Though we can see every color imaginable (no seriously every single one imaginable, try to imagine a color you’ve never seen before… then you’ll appreciate the ones we have), we’re nowhere near close to being able to recreate the entire visible color spectrum artificially. This limitation is what creates the gamut of color that is available for us to use.

The Color Gamut

PC Mag states that gamut is…

The entire range of colors available on a particular device such as a monitor or printer. A monitor, which displays RGB signals, typically has a higher color gamut than a printer, which uses CMYK inks. When a color is “out of gamut,” it cannot be adequately converted to the target device; for example, to a different type of printer

There are things that hold us back or that we have to work around when it comes to creating a consistent design, both on screen and off screen. These limitations are how we start to define great work.

The limitations

Each process of color mixing has its limitations.

Whether we build the colors from light (shining different colored light spectrums) or from pigments (absorbing specific color ranges from light and bouncing back the one we want to portray)

Additive

Additive color is built from light. If something is not lit up, it appears to be black. As we start to introduce new radiating colors from a light source, we increase or add different colors to get from black (no light or color) to white (light built from all color spectrums)

Subtractive colors

Subtractive colors are built by adding pigments that subtract colors from the available light. This just means that each pigment absorbs a different colors removing them so that they display only a certain wavelength.

Matching systems

Because of how different these two color processes are, we have to have specific methods to match the colors we see on screen to what’s available for printing. If you reference the chart above, you can see that not all processes can display the same amount of color.

To do this, you can look at my guide for Print Design and my experience with my letterpress printer, Rise and Shine Paper.

There are very few methods of attaining accurate colors in print design. Ink is inherently translucent where digital colors with visual displays are capable of much more than printers can achieve. Therefore we have specific color methods to print with.

A little bit about color matching:

As digital designers, we often create our designs in the RGB color space since most of our work with UI designs are going to be used primarily in digital interfaces. But when we look to expand a brand that we’ve worked on beyond what we see on screen (e.g. taking it to print), we create a considerable challenge for us to recreate what we made in RGB as a CMYK or Pantone color. Which is something you shouldn’t eyeball at all.

In a recent discussion of this with some designers, Katie Male (a graphic designer and brand stylist), talks about how she works to combat this color discrepancy.

“Going from CMYK to RGB is easier only because it can be visually matched but I always test on different devices ie, iPhones, Androids, monitors.
However going from RGB to CMYK is not advised due to the certain brightness of papers and what your printers profiles are set to.
Never eyeball.
I always recommend clients to have a Pantone if not I use a close commercial match Pantone. Use a Pantone Bridge book for accuracy. If it’s a digital print then ask your printer to create a wet proof before the artwork goes into production.

— Katie Male (here’s a link to her work)

If you don’t know what is possible or what isn’t, it’s your job to figure that out and understand it. Maybe consult with the place that is going to print your work to find out what you can do.

From Ryan, my letterpress printer.

“We mix the ink from the base Pantone colors, which are mixed by weight. We use a lab scale to weight the can and remove the exact amount of ink needed for each color. It is carefully blended by hand using an ink knife on a slab of granite. Care must be taken to ensure the base colors are thoroughly blended. ” — Ryan

The color of the ink can be chosen by using Spot Colors, CMYK or more often using the Pantone system (a form of spot color). With the colors you want, it’s essential to choose colors that are approved for printing. Using RGB colors doesn’t always translate well when it comes to ink. So make sure that whatever colors you select for your brand or other design projects play nice when applying it to where the design is used.

“We make a drawdown on the paper to test the color. This lets us see through the ink film to make sure the color is a match. Our scale is fairly accurate so the colors are usually pretty good. Sometimes we have to adjust a bit for differently-colored papers or to accommodate thicker or thinner ink films for certain artwork. ” — Ryan

The way that the ink works is that to get more vibrant colors, more ink needs to be applied. This method means that the color is an additive color and thus it can be more challenging to print lighter colors on darker paper, where foil may be the safest option to get a brilliant print on dark or colored paper.

Calibration To ensure that you are getting the best match in the first place, it may be important to calibrate your monitors correctly. For apple specific devices, you can check a guide on how to do this with Apple devices

Color Variation

Hue

Hues are the specific location you are at in the purest form of the color spectrum. Red, Yellow, Green, Blue, and Violet are all just names of the locations on that spectrum.

Usually, hue is represented as a specific degree in the 360° range.

Shade

A shade of a color is how dark the color is that you are looking at. This is achieved by adding black or dimming the lights that make the color.

Tint

A tint of the color is how much white is added to the color (print) or how bright the light is that makes it.

Saturation

Saturation is how much of the hue is added to a specific shade or tint, or how much of each light is added to the original color.

Color Spaces

RGB

The RGB color spectrum is an additive color process made by lighting the individual pixels on the screen with variations of these three color intensities:

RED #FF0000 GREEN #00FF00 BLUE #0000FF

This spectrum is often incompatible with printing, just because there are colors that are beautiful on screen, but come out flat and dissonant in print design.

Make sure that you understand which mediums you will be presenting the finished work because if you get this wrong, you might have clients or employers angry that the colors don’t match on and off screen.

CMYK

The CMYK color process is a subtractive color process made by increasing the amount of ink used in one of the four base colors:

CYAN MAGENTA YELLOW KEY (black. If you want to see why black is represented as “key” check this article out.)

Often the color process in professional printing is done with halftone printing. Magazines and Newspapers were a massive driving force for this since each color would have to be printed one by one over each other. The plates that were used would have to be lined up and pressed or printed onto the paper. To achieve different colors, often you would have to use half-tone prints (section 2 in the linked document) or layering

The entire process for Riso printing is really cool to watch (4 part series) too because you can use CMYK printing to achieve some really cool effects.

Choosing Pairings

Complimentary

Complimentary colors sit opposite of the color wheel. This can be really harsh when used directly together in a composition. It can be difficult to detect with color blindness as well.
But when used sparingly, you can create some obvious and effective calls to action or differentiate options.

Open Triad

We can start our triad with the Primary colors. These are 3 colors that are evenly spaced around the color wheel. Traidic colors are usually very loud when used equally. So to balance out this choice, you can let one of the colors be the key color and use the other two to compliment them.

Square or Diamond

Four evenly spaced color choices create two sets of complimentary colors. They allow you to balance your choices of colors that seem cold (blue / green hues) with those that seem warm (red/yellow hues).
When you let one of the colors be more prominent, you have a more effective base to start your color pallets.

Full Triadic or Hexagonal

This is a fairly uncommon choice for color usage, but brands that choose to be playful or child-friendly tend to use colors like this in full saturation.

Split Complimentary

This has the same effect of complementary colors but you have less jarring visual tension. This allows you to have more mild tones and still let a more prominent contrast between colors.

Analogous

These colors sit adjacent to each other on the color wheel. They allow you to pick colors that move well together. They have less visual contrast so make sure you have a key to start and use the others as complementary colors.

How to use color in the real world.

Building effective color palettes are something that takes a lot of trial and error.

Hopefully understanding these concepts with color will help equip you with knowledge about color. But how do you use it?

There are plenty of sites and books that showcase good color palettes.

I am by no means a master of color selection, but as part of my work with brand identity design, selecting effective color palettes is something that I have to do all of the time.

If you struggle with finding good color palettes, I have a few resources for you:

A friend of mine, Kyle Adams, has created a course specifically for choosing great colors. Within it, he describes the process from start to finish for producing some of the best color choices I’ve seen.

His course covers everything from selecting colors to creating tints and variations.

With a solid foundation in color choices, you’ll:

  • Start to form your own unique style.

  • Build confidence in your decisions.

  • Attract clients and employers who see your value

**Choosing Great Colors**

Along with using a course specifically for choosing colors, there are plenty of sites that you can look through that showcase great uses of colors and color palettes.

Our goal with Compass of Design is to start to make what you know more accessible to your actions. In short, we want you to not only have the answer to be able to quickly use what you know, but we want you to understand why it’s the answer.

Remember to think about what you know and why you know it. Being able to think effectively helps train your design skills when it’s time to use them.

Have a great week, don’t forget to check out our Compass of Design community!

Registration is open!

Come join us in the Compass of Design community and start getting more actionable feedback on your design work and career questions.!

Thanks,

— Darian Rosebrook, Compass of Design

:)

How do you know what skills you should focus on to get better at design?

If this is a question you need an answer to, come join other like-minded designers who are also working at becoming masters of their craft.

Every week we go over ways to market yourself better by improving your design skills, your personal brand, and other topics to further develop as a great designer.

Tap either picture to get started investing in your design skills (:

Tap on either picture to get started at compassofdesign.comTap on either picture to get started at compassofdesign.com

This article was originally published on Medium. Click here to see the original.

Here's some more articles that may be helpful

Using Color in UI design

July 18, 2018
by Darian Rosebrook

The psychology behind colors is subjective and changes from culture to culture. Therefore, I'm going to avoid playing on the psychology of color choice, and that specific colors drive different emotions or should be kept away from. You'd be surprised to hear that designers try justifying these colors based on how a general public may react to these without thoroughly researching the brand and it's audience's preferences in their ecosystem.

How do I audit my own design work?

October 05, 2018
by Darian Rosebrook

As a piece of your arsenal, your portfolio is a tool to use in your marketing game as a designer . You’ve got to make sure that what you put in your portfolio is purposeful and relevant to what you want to get out of using it. And if you’re not going through and auditing your own work, you may be missing opportunities to make your presence online as effective as it can be.

Better Design Feedback

June 22, 2018
by Darian Rosebrook

One thing I am passionate about is quality design feedback. I’ll mention in a future post that it’s sometimes best to get other eyes on your projects, but having objective, quality design feedback is something that a designer needs to be able to move forward with their design skills.

Quality or Quantity?

June 18, 2018
by Darian Rosebrook

Sharing our work publicly can be a scary thought. It gets even scarier when you consider sharing your behind-the-scenes process of how you completed your work.