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
Credit: MaxPower commons.wikimedia.org/wiki/File:HLSColorSpace.png
Credit: Zoetnet flic.kr/p/8oKkbJ
Credit: Zoetnet flic.kr/p/8oKkbJ
Credit: Pawsitive Candie N flic.kr/p/7Rb4Yp
Color Notation in CSS
Credit: Pengo commons.wikimedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg
color: rgb(200,0,100);
color: rgb(75%,0%,50%);
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%);
color: rgba(150,0,25,1);
color: rgba(0%,50%,40%,0.5);
div { opacity: 0.2; }
color: hsla(120, 100%, 50%, .5);
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
Credit: Rusty Clark flic.kr/p/dyy44R
Credit: Jeremy Keith flic.kr/p/o9thWy
Credit: flic.kr/p/gnmwty
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
p { color: #278232; }
$green: #278232;p { color: $green; }
$green$green-light$green-dark
$primary-background-color$button-border
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%)
sassme.arc90.com/
sassme.arc90.com/
sassme.arc90.com/
Credit: Tuncay flic.kr/p/njc9ph
Clarissa Petersonclarissapeterson.com@clarissa