@andigalpern @cascadesf

Andi Galpern

An intro to color theory & terminology

Sir Isaac Newton designed the color wheel in 1666

The color wheel is a basic tool for combining colors.

Primary

Red, blue, and yellow.

+

+

+

violet

green

orange

=

=

=

Tertiary Colors

A tertiary color is a color made by mixing one primary color with one secondary color.

Complementary Colors

Warm and cool colors

Relationships and Interactions

Josef Albers

How to create a UI color scheme from scratch

step 1: get inspired

step 1: create a mood board

Collect images on Pinterest to create a mood board.

create a mood board

Dear ,Thank you for existing.

Love, Andi

step 2: Sample colors and explore palettes

step 3: Narrow down your palette

main secondary text accent accent

main secondary text accent accent

use sparingly

Do not overpower the lead singer. Support them with harmonies.

main secondary text accent accent

list out HEX codes

Tip 2: Use photos from nature.

How to add colors to an existing brand

step 1:Start with your primary

color

main

step 2:Understand the mood

smart, subtle, a little playful, but more conservative to reach a broader audience.

set main color, have darkest of dark, lightest of light, pick shadow & highlight

(supporting cast)

step 3:

main

secondary & text

accent

accentaccent

accent

Choose a couple different accent colors that will make the main

color shine

main

secondary & text

accent

accentaccent

accent

color harmony can be subjective.

Tip: Learn color theory to reduce

subjectivity.

The Psychology of Color

The Psychology of Color

Energy Power

Leadership Courage Love

Activity Joydanger

Security Stability Loyalty

Wisdom Confidence

Trust Friendliness

CourageIntelligence

Optimism

Happiness Freshness

Calming Ambition Money

Endurance Healing Calm

Generosity Natural Protection

CheerfulHappiness Creativity Enthusiasm FunDetermination

Success

Stability Power Luxury Ambition Dignity

WealthExtravagant

Mystery Magic

Goodness Innocence Safety

Clean Positive

Simplicity

Powerful Mysterious

Elegant FunctionalFear

Authority

Colors associated with emotions

Know your audience.

example: red

India recognizes red as a symbol of purity.

In Africa, red represents mourning.

Color naming

almost like going to a paint store where they name their colors

Tip: To get better at choosing colors, we need to pay attention to the details. There are so many colors that are

in between.

trust your instincts

Color Palette Generators

http://www.degraeve.com/color-palette

Adobe Color CC (formerly known as Kuler)

Hue — another word for color

Saturation (chroma) — the intensity or purity of a hue

Brightness (value) — dark to light

Use HSB to mix

Tech specs

Save the HEX Code

Accessibility

What are the most commonly confused colors?

blue, green

http://wave.webaim.org/

Tools to check for accessibility

How do color blind people see these colors?

Use patterns and textures to distinguish where colors should be.

Tip: Design in monochrome, then

add color.

Tip: Convert to grayscale in system

settings to test out contrast.

@aaron10buuren

Medium

githubhttps://yeun.github.io/open-color/swatches.html

color blind testhttp://enchroma.com

Choose color schemes that can be easily identified by people with all types of color vision

Lighting

Improve Your Painting with 3 Simple Rules- Izzy's Logic of Light and Color: Ep 1

Izzy Medrano

https://www.youtube.com/watch?v=tx-TwkMtPwc Izzy Medrano

1. Objects and parts of objects most perpendicular to the light source receive

the most amount of light.

2. Objects further away receive less light.

3. Lights are closer to you are more illuminated and as you move away they

become dimmer.

If anything solid is blocking the light, it gets no light.

CSS3 gradient makers

colorzilla.com/gradient-editor