Image credit: Dave Gough www.flic.kr/p/oDGsY

Responsive ColorClarissa Peterson ✦ @clarissa ✦ June 2015

Credit: flic.kr/p/7E3TZ6

Credit: Steve Snodgrass flic.kr/p/8twyMD

Credit: flic.kr/p/fczzhQ

http://commons.wikimedia.org/wiki/File:IBM_PC_5150.jpg

Credit: flic.kr/p/6AELnT

Credit: flic.kr/p/4Mioyn

Hue - Value - Saturation

Hue

Credit: MaxPower commons.wikimedia.org/wiki/File:HLSColorSpace.png

Value

Credit: Zoetnet flic.kr/p/8oKkbJ

Credit: Zoetnet flic.kr/p/8oKkbJ

Saturation

Credit: Pawsitive Candie N flic.kr/p/7Rb4Yp

Color Notation in CSS

Credit: Pengo commons.wikimedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg

256256 256

RGB Notation

0-2550-255 0-255

color: rgb(200,0,100);

color: rgb(75%,0%,50%);

00-FF00-FF 00-FF

color: #A9C862;

HSL Notation

color: hsl(120, 100%, 50%);

color: hsl(120, 100%, 50%);

color: hsl(120, 100%, 50%);

color: hsl(120, 100%, 50%);

color: hsl(120, 50%, 50%);

color: hsl(120, 50%, 20%);

color: hsl(120, 50%, 80%);

Opacity

RGBa Notation

color: rgba(150,0,25,1);

color: rgba(0%,50%,40%,0.5);

div { opacity: 0.2; }

HSLa Notation

color: hsla(120, 100%, 50%, .5);

Color Blindness

Normal Deuteranope

Protanope Tritanope

Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX

Perception of Color

https://flic.kr/p/ePQ8wy

https://flic.kr/p/6kaePP

What You Think You See

http://www.psy.ritsumei.ac.jp/~akitaoka/color12e.html

Screens

Credit: Rusty Clark flic.kr/p/dyy44R

Credit: Jeremy Keith flic.kr/p/o9thWy

Credit: flic.kr/p/gnmwty

Light

Credit: Quinn Dombrowski flic.kr/p/cqpNFU

Credit: Caroline flic.kr/p/bq1X3o

Credit: ClearFrost flic.kr/p/o9mSXd

@media (light-level: dim) { /* change the colors */}

Credit: Jeremy Keith flic.kr/p/o9thWy

https://flic.kr/p/iNtUwx

Screen Size

SASS

Color Variables

p { color: #278232; }

$green: #278232;p { color: $green; }

$green$green-light$green-dark

$primary-background-color$button-border

Lighten & Darken

lighten($purple, 20%)

.box1 { background-color: #b650d9; }

.box2 { background-color: #d9a4eb; }

$purple: #b650d9;.box1 { background-color: $purple; }.box2 { background-color: lighten($purple, 20%); }

darken($purple, 40%)

$button-bg: #b650d9;

.button {background-color: $button-bg;border:3px solid darken($button, 20%);box-shadow: 7px 6px 3px -2px lighten($button, 20%); }

Saturate & Desaturate

saturate($blue, 70%)

Grayscale

Inverse

sassme.arc90.com/

sassme.arc90.com/

sassme.arc90.com/

Credit: Tuncay flic.kr/p/njc9ph

Clarissa Petersonclarissapeterson.com@clarissa