SASSy Style Tiles: Understanding Color Models for Theming
54
SASSy Style Tiles: Understanding color models for theming Allan White allanwhite.info
-
Upload
allan-white-white -
Category
Design
-
view
1.426 -
download
0
description
Color can make our work more effective when we consider human-centric models in our visual systems. Here’s a quick look at a history of color, a prototype template for managing color themes with Sass and Zurb Foundation 4; and a look forward to more sophisticated, robust style tile theming. Slides: http://bit.ly/style-tiles-theming Code: http://bit.ly/sass-color-theming Presented at the PDX SASS Meetup Sept. 12, 2013
Transcript of SASSy Style Tiles: Understanding Color Models for Theming
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
