Dev-signing with ColorA semi-subjective guide to UI and color

Kristy CunninghamUX DesignerHobsons 2015

Agenda★ The Science of Color★ Color and Technology★ Basic Color Theory★ Color and Humans★ Discussion, Q and A

Color and Science

I assure you color science is

less dangerous than Muppet Labs.

Color is connected to light

by StormSignal on flickr

Light is made of waves

by Richard Flink on flickr

Waves make up a spectrum

by sburke2478 on flickr

The (visible) spectrum

from DePaul University

Colors of light are just a small visible part of the electromagnetic spectrum.

How objects have color

Light waves

ReflectedWavelength/s

The eye and color

from Webvision

Cones on the retina allow us to perceive color.

Color and Technology

Color and technology has a history older

than Nintendo.

Subtractive color

from Wikipedia

★ When you add all colors you get black.

★ Used for print and traditional art.

★ UI doesn’t use this.

Additive color

from Wikipedia

★ When you add all colors you get white.

★ Screen color.★ This is what we work

with!

Bit Depth: The power of 2

8 bit era 16 bit era 32-64 bit era

Web Safe

216 original “Web Safe” Colors

★ Thank goodness it is 2015!

Color for Browsers★ HTML

○ Hexcodes○ RGB (Red, Green, Blue)

★ CSS○ All of the above AND○ RGBA (Red, Green, Blue, Alpha)○ HSL (Hue, Saturation, Lightness)○ HSLA (Hue, Saturation, Lightness, Alpha)

Hue, Saturation, Lightness

★ Hue is the color.★ Saturation is a scale of

gray to intense color.★ Lightness is basically

what it sounds like - a scale Light to Dark!

image from Christina Descalzo’s blog

What the heck is alpha?

★ Alpha channel has to do with transparency.

★ It is on a scale of 0-1.★ 1 is completely opaque★ 0 is completely

transparent★ That’s all you really

need to know for UI

image from My Photoshop Site

ExamplesCCR SCSS Variable$green: #8BC100;RGB (139, 193, 0);RGBA (139, 193, 0, 1);HSL (77%, 100%, 76%);HSLA (77%, 100%, 76%, 1);

Styleguides to Stylesheets

Gangnam style.Color style.It’s stylistic.

Print Style Guides★ Meant to keep

designs and writing consistent and on brand.

★ Handy reference

From Creative Blog

HTML★ markup★ made to share

documents★ this need didn’t

require a lot of color management

CSS★ Realization-style

was missing from HTML

★ Meant to specify how a document looks

★ Still has flaws

SCSS - Gettin’ Sassy★ CSS extension★ Adds variables to

the mix★ Nesting★ Imports★ Mix-ins★ And other goodies

Living Style Guides

Color and tech resources★ SASS: CSS with superpowers★ SASS and Compass Color Functions★ SCSS Blend Modes★ An In-Depth Overview of Living Style G

uide Tools

Color Theory

A way to avoid #fairygodmother

problems.

Basic Terms★ Hue: The color★ Tint : adding white to a

hue★ Shade: adding black to a

hue★ Tone: adding gray to a

hueBasically I just described Hue + Saturation + Lightness in other terms

from Operation Write Home Design Bootcamp

The Color WheelA handy dandy color tool

★ Used to help make decisions about colors

★ Shows relationships between colors

Primary ColorsRed, Yellow, Blue

★ In traditional art the model to mix all other colors

Secondary ColorsOrange, Purple, Green

★ Traditionally, you use primary colors to create these

Tertiary ColorsThe Colors In Between

★ And you just keep mixing colors to get new colors!

★ You can totally replicate this using SCSS’s

mix($color-01, $color-02, [$weight])

Warm and cool colors

Warm colors appear closer.

Cool colors appear farther away.

Color harmonies★ Color harmonies leverage

the color wheel★ By following harmony

guidelines it is easier to make eye pleasing palettes

MonochromeAny tint, shade, or tone of the same HUE in a color scheme.You can use lighten(), darken(), saturate(), desaturate() to play with a monochromatic color scheme using this $blue (#00bdcb). These need ( $color, $amount )

Analogous

You can use adjust-hue( $color, $amount) to play with an analogous color scheme using this $blue (#00bdcb). For the best results don’t go further than +/-45 degrees.

Colors that are next to each other on the color wheel.

Complementary

★ This grabs attention.★ Use sparingly.★ Do not use this scheme for

a text/background combination!

Using colors across from each other on the color wheel.

TriadicUsing 3 colors evenly spaced on the color wheel.

★ Use one as primary.★ The other two become

accents.

Split ComplementaryA variation of the complementary scheme

★ Easier to use★ Easier on the eyes

TetradicUses two pairs of complementary colors.

★ Use one as primary.★ The others become

accents.

SquareUsing 3 colors evenly spaced on the color wheel.

★ Use one as primary.★ The others become

accents.

More on color theory★ Color Hexa★ Adobe Kuhler★ Color Theory for Designers★ Introduction to Color Theory★ Colour Theory★ Solarized is a palette based on the color wheel

with readable color contrast

With great power ...You know the rest.

Color and Humans

Bubbles gets it.

Remember this?

Warm colors appear closer.

Cool colors appear farther away.

You can affect mood with this!

Warm colors and emotion

★ Can be harder on the eyes

★ Joy★ Excitement★ Optimism★ Grabs attention

Cool colors and emotion

★ Calming, soothing★ Can be interpreted as

sad★ Blue is commonly used

by institutions, like banks

★ Purple is often seen as “creative”

Notes on red★ Red has the same

weight as black★ Western world

associates it with danger

★ Other cultures see red as joyous

Contrast● Grabs attention● Accessible● Enhances readability

o But pure black/pure white is harder on eyes

Other guidelines★ Perception of

color is not only personal but developmental and cultural.

★ When in doubt, do your homework!

★ This image is a starting point

People Resources★ How Color Affects Our Mood★ Using Color to Appeal to Users★ A Guide to Color, UX, and Conversion Rates★ Colour: User Experience and Psychology★ Color and Cultural Design Considerations

Questions★ Comments?★ Favorite colors?