DESIGN MENTORING
CHAPTER TWO
COLORS
CONTENTS Color Theory Color meaning Ways of creating color Making your life easier
COLOR THEORY “The interaction of colors in a design through complementation, contrast, and vibrancy.� The Color Wheel In order to make it easier to see the relationship between different colours, the concept of the modern colour wheel was developed around the 18th century. These relationships allow us to produce pleasing color combinations. Primary colors are red, blue and yellow. These three colors are the most basic colors on the color wheel. They cannot be made from any other colors but all other colors on the color wheel are made from them. used to attract attention Secondary colors are green, orange and purple. They are formed by mixing equal amounts of the two primary colors that are beside them on the color wheel. they create balance
Tertiary Colors are blue-green, yellow-green, yellow-orange, red-orange, red-purple and blue-purple. They are formed by mixing a primary color and a secondary color together. used to create a wider pallete
Lighter versions of colors are formed by adding white and are called tints. Darker versions are formed by adding black and are called shades.
Monochromatic colors are colors with variations in tint and shade, such as green, light green and dark green. used to create a simple, elegant and clean color scheme
Analogous colors are beside or near each other on the color wheel, such as blues and blue-greens. low contrast but work well together
Complementary colors are two colors that are opposite each other on the color wheel, such as blue-purple and orange. provide maximum contrast (warm color + cool color)
Split complementary colors is a color and two colors adjacent to its complementary color, such as green-yellow, purple and red. high contrast without complementary strong tension
Triadic colors are three colors equally spaced around the color wheel. more balanced than the complementary ones
Tetradic colors are two pairs of complementary colors, also known as double complementary, such as blue-purple, green, yellow-orange and red. two of the four should be dominant to not have too much color
Contrast Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. Examples: choose a very light color for the background, and a very dark color for the text itself to make it readable. using a variety of contrasting colors can help focus the viewer’s attention on specific page elements. It’s the same as highlighting a book using a dark color for the background, and a light one for the text doesn’t ruin the visibility color is the most popular attibute when it comes to creating contrast
Vibrancy Vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic while darker shades relax the user, allowing their mind to focus on other things. Keep these in mind for the next chapter.
Color is created only when our brain tries to make sense from light signals it receives from the outer world. In other words, it’s all in your head.
COLOR MEANING How are colors percieved? Warm colors They create a sense o warmth and heat in a design. When used you think of the sun, fire and love. Adding an orange photo filter to an image instantly makes it look warmer and happier.
Cool colors They carry connotations of cool climates, winter, death, sadness, ice, night and water. Cool color can be associated also with calmness, tranquility, trust, and cleaniness.
Red
Associated with energy, fire, power, excitement, passion, vigor, leadership, courage, activity, joy and importance. Red commands attention and sets a serious tone and can mean danger. Though it can be overwhelming if it’s used too much, red can be a powerful accent color.
Orange
Symbol of happiness, joy cheer, sunshine, pleasure, enthusiasm, creativity, fun and childhood. May also be associated with ignorance and deceit. In design, it can be used to command attention – without being as overpowering as red.
Green
Most commonly associated with nature and good health. It can also mean wealth, money, ambition, calm, protection, endurance, growth, harmony and safety.
Blue
Implies peach, calm, stability, loyalty, wisdom, confidence, science and expertise. It’s the most commonly used color for corporate logos. Be very mindful of hues when using blue, as different hues might imply sadness, peace or even religious connotations.
Purple
Historically associated with royalty, making it a sophisticated and luxurious color. Can also be associated with creativity, mistery and feminine qualities.
Yellow
Considered a very positive color. Associated with joy, intelligence, brightness, energy, optimism, freshness, law, education, arrogance and happiness. Use bright hues to evoke these emotions. Use darker or gold-hued yellows to evoke a sense of permanence.
These colors can evoke either negative or positive responses, depending on how they are used. Remember to be mindful of color use. Also, keep in mind that there is some debate about the influence of colors on different audiences.
WAYS OF CREATING COLOR Having a color name for millions of colors we use today would be hardly practical. That’s why we invented color models or standards which help us describe colors. RGB Model or Additive method When using additive colour, we tend to consider the building block (primary) colours to be Red, Green, and Blue (RGB), and this is the basis for all colour you use on screen. In additive colour, white is the combination of colour, while black is the absence of colour. Usually we use RGB for any design we create for “on screen” purposes.
CMYK Model or Substractive method Subtractive colour, like additive, has three primary colours - Cyan, Magenta, and Yellow (CMY). In subtractive colour white is the absence of colour, while black is the combination of colour, but it’s an imperfect system. To be alble to represent Black we have to add a fourth compensating pigment. We call this “Key”, hence CMYK, but essentially it’s black. We use this color model for printing materials, so in case we send a RGB color model poster to the printing company they will be sending it back.
HSB model Is based on RGB but is better suited to artists and designers. Each color is described as a combination of Hue, Saturation and Brightness values. Easier to play with.
Grayscale model Images of this type, also known as black-and-white, are composed exclusively of shades of gray, varying from black at the weakest intensity to white at the strongest. Grayscale images are also called monochromatic, denoting the presence of only one (mono) colour (chrome).
Pantone Matching System Is a universal color matching system used primarily in printing. Unlike RGB and CMYK, PMS colors are created with pre-mixed ink long before the image is actually produced, resulting in the most consistent color possible. RGB should only be used for digital design and so CMYK and PMS should ONLY be used for printing When creating a document that will be printed you should start your work using CMYK color profile When creating a document that will be both digital and printed, pick colors that are safe in both color profiles, meaning you can be sure you won’t get another color when you print it If you’re using RGB screens, you can mix some very bright and saturated colors. If you have to print that out, your options get reduced to a limited color spectrum of a CMYK printer. And, if you saw a brochure printed with beautiful Pantone colors, you’ll never be able to find them on screen – they simply cannot be reproduced by an RGB monitor.
“A device that is able to reproduce the entire visible color space is an unrealized goal within the engineering of color displays and printing processes”.
MAKING YOUR LIFE EASIER Adobe Color CC - https://color.adobe.com/create/color-wheel/ Color Hex - http://www.color-hex.com/ Paletton - http://paletton.com/ Color Explorer - http://www.colorexplorer.com/ Color Palette Generator - http://www.degraeve.com/color-palette/ Color Lovers - http://www.colourlovers.com/ HaliPixel - http://color.hailpixel.com/ Colrd - http://colrd.com/ Kolur - http://www.kolur.com/ Contrast-A - http://www.dasplankton.de/ContrastA/ ColorSpire - http://www.colorspire.com/ ColorMunki - http://www.colormunki.com/ RGB to.. - http://rgb.to/
HOMEWORK #1 Create two or three creative color palettes for you to use in your future projects. After reading the document and going through the resources provided create two or three paletts of your own. The requirements for each color palette are the following: • minimum 3 colors • add near every color the RGB, CMYK and Panatone color codes • describe the technique used for picking the colors (complementary, triad etc) and mention if you used any tools to help you • for each palette give examples of 2 ways to use them and why do you think they are the right ones (eg. I would use this color pallete for creating an engineering event T-shirt because blue symbolizes science and knowledge...) • be creative when illustrating the colors, use your imagination For this task you will need to install a version of Adobe Photoshop. I have both CS6 and CC on my laptop. As an alternative you can also use Adobe Illustrator. The main point is for you to discover the tool bar in Photoshop and understand the meaning of colors in a desgin. FOR ANY PROBLEMS JUST CONTACT ME! There is no need to do anything fancy, just feel good doing it. RGB: (66, 230, 246) CMYK: 73, 7, 0, 4 PMS: Pantone Solid Coated 3105 C
RGB: (256, 82, 66) CMYK: 0, 67, 73, 4 PMS: Pantone Solid Coated 7625 C
RGB: (250, 168, 160) CMYK: 0, 33, 36, 2 PMS: Pantone Solid Coated 169 C
RGB: (19, 69, 73) CMYK: 74, 5, 0, 71 PMS: Pantone Solid Coated 7476 C