Colour Theory Fundamentals - Pluralsight course by Chris Davis
Course link: https://app.pluralsight.com/library/courses/color-theory-fundamentals
Module 1 - Course Overview
- Taught by a photographer - working knowledge of how to successfully use and communicate with colour in your routines
- Topics include foundational characteristics of colour, hue, saturation
- Colour wheel - structures that help build colour palettes
- Creating colour harmony and discord
Module 2 - Prerequisite Knowledge before Studying the Colour Wheel
- 2 main colour modes
- Physically printed - subtractive.
- Primary colours used are cyan, magenta and yellow which when printed on top of each other produce darker colours eventually leading to black.
- Called subtractive because as layers of ink are added to one another, they get progressively darker because they’re absorbing the available visible light and the colour we see is the result of the remaining light that is reflecting into our eye. As you add more cyan, magenta and yellow, the colours approach black because you’re subtracting visible light waves thus this is a subtractive colour mode.
- CMYK - K is for black. Because B can be confused with Blue.
- Default for physical print
- Digitally accessible - additive
- RGB
- When we increase intensity of the RGB colours, the result is white
- Physically printed - subtractive.
- Definitions
- Colour
- Too broad to describe all colours
- Not an incorrect term
- Simply too vague
- Hue - The most noticeable colour that stands out to your eye
- Value - Lightness or darkness of a colour relative to others around it
- Yellow is a higher value colour (than violet) because it is closer to white end of a grey scale because there is more light emitted from a yellow hue
- Differences in values when in viewed in relation to each other provide contrast which allows our eyes and brains to visually separate objects from one another
- Hue + white = tint. When a colour is mixed with white, we lighten its value and call it a tint.
- Hue + black = shade. When a colour is mixed with black, we darken its value and call it a shade.
- Hue + gray = tone. When mixed with grey, depending on whether the colour has more white or black in it, it will darken or lighten the colour. We call this a tone of your colour.
- Tints, shades and tones weaken the intensity of a colour which results in desaturation
- Saturation, also known as Chroma - brilliance of a colour
- As black, white or grey are added to a pure hue the brilliance of the hue becomes neutralised
- Colour
Module 3 - Understanding Structures for Harmonious Palettes
Creating Harmony with the Colour Wheel
- History
- Colours have been associate with musical notes many times in the history of the colour wheel
- Newton depicted the colours in a wheel to show which colours can be obtained by combining which colours
- Red + Violet = Magenta, a new extra spectral colour that doesn’t appear on the rainbow
- Read more in a book Opticks by Newton
- Red, Green and Blue are the main colours in an additive mode.
- Primary colours.
- They cannot be obtained by combining 2 or more of other colours in the colour wheel.
- When combined in equal parts in equal intensity, they form white.
- Each colour can have an intensity value from 0 and 255. Lowest (black) to Highest (white) intensity.
- In a colour wheel, between two primary colours are secondary colours which can be obtained by mixing the two primary colours on either side of them.
- R + B: Magenta
- B + G: Cyan
- R + G: Yellow
- Secondary colours
- Combining two secondary colours also results in white light
- Primary + Secondary colour gives Tertiary colours
- Blue + Magenta = Violet
- Blue + Cyan = Azure
- Cyan + Green = Spring Green
- Green + Yellow = Chartreuse
- Yellow + Red = Orange
- Red + Magenta = Rose
- Every possible colour is depicted in the colour wheel
- Colour harmony
- Triadic colour harmony / palettes - any three colours evenly spaced in the colour wheel
- Vivid and well-balanced
- For best results
- Choose one dominant colour and use the other two as accent colours
- Use tints, shades and tones of colours
- Colour temperature
- When we split colour wheel in half, we have cold tones on the left and warm tones on the right
- TODO: insert image from Evernote
- Absolute warm - yellow, orange, red
- Absolute cold - blues
- Colour temperatures is relative to the colours around it
- Red is warmer than yellow
- Blue is colder than cyan (even colours within the same hue can be warmer or cooler than one another)
- Warmer colours have longer / slower wavelengths
Understanding Analogous, Achromatic and Monochromatic Palettes
- Analogous Palettes
- They are made from colours that are next to or adjacent to one another in the colour wheel.
- Colours that are connected to one another by a common trait - they share the traits of their middle colour
- Next to each other on the colour wheel
- Harmonious and calming since the colours have related in hues
- Usually pleasing to The Eye
- Natural variations of similar colours creates calming sense of harmony. Be sure each swatch can be identified as its own colour.
- Monochromatic Palettes
- Monochromatic palettes use variations of a single hue
- Similar to analogous palettes but rather than being comprised with colours adjacent to one another, they comprise of colours of the same hue but different saturations and brightness. different tints, shades and tones of the same hue.
- Expand a single hue into an entire swatch. For best results, ensure there is enough difference in value between colours
- Achromatic Palettes
- Same as monochromatic palettes with its colour removed - grayscale
- All of the same rules from a monochromatic palette apply here
- Palette of values between black and white
- Minimalist buy can have plenty of contrast
- For best results, choose swatches from a range of values from maximum contrast
- Complementary Palettes
- Created by combining colours that lie opposite to one another on the colour wheel
- They look dynamic due to the inherent contrast
- Human eye has rods and cones - cones process colour, rods do not
- Split - complimentary Palettes - used this for my wedding reception suit + tie + pocket square
- Strikes a middle-ground between contrast and harmony
- Energetic without the tension
- Easier to balance than a complementary palette
- For best results, dive right in, this palette is more forgiving.
- Used in data visualisation dashboards, infographics, graphic novels, bold coloured modern art
Module 4 - Leveraging Colours as Communication
Understanding Colour Harmony and Discord
A Pleasing Effect As is the case with music, colour harmony is achieved when complementary notes / colours are used with or near one another.
Harmony
- Elements working individually, together
- Concordance between individual colour elements across the composition
- Our brains seek balance from the things we see
- Contrast or consonance can be used to provide visual structure
- Structure is Good
- Consider the message that needs to be communicated and lean on the palette structures from the last module to help convey those messages
- Analogous, achromatic and monochromatic palettes are harmonious because they’re similar
- They use colour consonances
- Colour consonance - consonance is agreement and predictability between colours, it provides stability so the viewer doesn’t have to guess about the meanings of colours paired together
- They make sense, because we see them in our day to day life - picture of a forest with green trees and brown trail
- Complementary palettes are harmonious because they balance each other out and make one another look more vibrant
- Simultaneous contrast - the visual influence of colours upon one another when placed in proximity to one another. Complementary colours, as a result, appear more intense.
- Simplest way to start out using colour palettes is too K.I.S.S. - keep it simple, silly
- Start with a key colour, or a colour that you know, and try out combinations based on the palette structures to see what works best
- There is equilibrium between achieving too much chaos and too bland
- Too chaotic - your viewers are overwhelmed, find you too wild, and can’t process
- Too bland - underwhelmed, find you boring and move on
Discord
- Clashing colour combinations don’t make sense in relation to what we’re used to seeing in life.
- Generally widely separated on the colour wheel and not associated with a palette structure
- The Clash(ing) Colours
- Discordant colours may clash, or may not have direct relation to one another based on the rules of harmony but they may still be an appropriate design choice. Our brains will learn to appreciate.
- Colour discord
- Not strictly the opposite of harmony but rather the absence of concurrence between individual elements
- Colour concurrence
- Occurs when the colour and compositional elements are aesthetically agreeable
- One way to create discord is to use the split complimentary palette
- They are harmonious large because of their ability to use two analogous colour to counteract with the intensity of their complement
- When we remove the second colour, we lose the benefits of analogous schemes and of complementary schemes
- Be “dareful”
- Discord isn’t bad, it should just be used mindfully
- Rather, it can be a useful technique for communicating energetic and eye-catching messages.
- Discord is OK
- Utilising discordant palettes is a perfectly okay decision. So long as it’s thoroughly implemented.
Demo
- Insightful demo on how to use Adobe Color to come up with a colour palette for a mock design scenario
- Rules are helpful for understanding the structure that yields harmony but we’re not bound to the harmony rules - feel free to colour outside the lines as much as you feel comfortable
- Knowing how, why, and when to deviate from the harmony rules is far more important than simply knowing how to implement colour harmony
The Illusion of Transparency
- Two types of Transparency
- Physical objects - the physics of light interacting with real objects in physical space
- Optical illusions - solid colours interacting relative to one another to create the illusion of transparency
- Opaque - cannot see through. Light is either absorbed or reflected
- Translucent - translucent surfaces can be partially seen through - some light passes through, some reflects
- Transparent - allow most or all light to pass through. Won’t obscure the object behind it much
- Overlapping two items of contrasting colours with an in-between colour in the overlapping area creates an illusion of translucency. If you take the items apart, the illusion is broken and if the colour is not an in-between colour, the illusion is broken.
- Book recommendation: “Interaction of Colours” - Josef Albers