SASSy Style Tiles:Understanding color models for theming

Allan Whiteallanwhite.info

Q:What makes color work?

Color: A brief history

http://en.wikipedia.org/wiki/File:Runge_Farbenkugel.jpg

http://www.handprint.com/HP/WCL/vismixmap.html#munsell

Albert Munsell

http://en.wikipedia.org/wiki/Munsell_color_system

http://en.wikipedia.org/wiki/Munsell_color_system

today: CIECAM

http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM

CIECAM Color Space

the RGB Problem

Our display technology forces computer color

models into RGB models.

Adobe Kuler

Adobe Kuler

triadic scheme

triadic scheme

triadic scheme

triadic scheme

triadic scheme

Adobe Kuler: iOS

Adobe Kuler: iOS

Adobe Kuler: iOS

Adobe Kuler: iOS

Adobe Kuler: iOS

Style Tiles

Styletil.es

A simple style tile prototype

We can emulate these color theory models to create harmonious, automated

color themes.

Here are some examples, using a “Split compliment” model:

I have “bent” the axis of the split compliment to bring it closer to

the Munsell model.

These variations are all accomplished by changing only

two* color variables:

*one of which could be automated!

Sample Style Tile Projecthttp://bit.ly/sass-color-theming

Sass color functions

adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a32

adjust-color()

adjust-color(#102030, $blue: 5) => #102035adjust-color(#102030, $red: -5, $blue: 5) => #0b2035

adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6)

Foundation Settings

What’s Next?

Intelligent color systems that speed

prototyping & design iterations

Example: Foundation’s panels.scss

/foundation/panels.scss

/foundation/panels.scss

text colors invert if the panel’s lightness value is ± 50%

Yeoman Generator for Style Prototypeshttps://github.com/Team-Sass/generator-style-prototype

T E A M S A S S

Color Schemerhttps://github.com/Team-Sass/color-schemer

T E A M S A S S

Questions?

Thanks!Slides: http://bit.ly/style-tiles-theming

Code: http://bit.ly/sass-color-theming

Thanks!

allanwhite.info@allanwhite

Slides: http://bit.ly/style-tiles-themingCode: http://bit.ly/sass-color-theming