sassy style tiles: understanding color models for theming
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, 2013TRANSCRIPT
![Page 1: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/1.jpg)
SASSy Style Tiles:Understanding color models for theming
Allan Whiteallanwhite.info
![Page 2: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/2.jpg)
Q:What makes color work?
![Page 3: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/3.jpg)
Color: A brief history
![Page 4: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/4.jpg)
http://en.wikipedia.org/wiki/File:Runge_Farbenkugel.jpg
![Page 5: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/5.jpg)
http://www.handprint.com/HP/WCL/vismixmap.html#munsell
![Page 6: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/6.jpg)
Albert Munsell
![Page 7: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/7.jpg)
http://en.wikipedia.org/wiki/Munsell_color_system
![Page 8: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/8.jpg)
http://en.wikipedia.org/wiki/Munsell_color_system
![Page 9: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/9.jpg)
![Page 10: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/10.jpg)
![Page 11: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/11.jpg)
today: CIECAM
![Page 12: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/12.jpg)
http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM
CIECAM Color Space
![Page 13: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/13.jpg)
the RGB Problem
![Page 14: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/14.jpg)
Our display technology forces computer color
models into RGB models.
![Page 15: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/15.jpg)
![Page 16: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/16.jpg)
![Page 17: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/17.jpg)
![Page 18: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/18.jpg)
Adobe Kuler
![Page 19: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/19.jpg)
Adobe Kuler
![Page 20: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/20.jpg)
triadic scheme
![Page 21: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/21.jpg)
triadic scheme
![Page 22: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/22.jpg)
triadic scheme
![Page 23: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/23.jpg)
triadic scheme
![Page 24: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/24.jpg)
triadic scheme
![Page 25: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/25.jpg)
Adobe Kuler: iOS
![Page 26: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/26.jpg)
Adobe Kuler: iOS
![Page 27: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/27.jpg)
Adobe Kuler: iOS
![Page 28: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/28.jpg)
Adobe Kuler: iOS
![Page 29: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/29.jpg)
Adobe Kuler: iOS
![Page 30: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/30.jpg)
Style Tiles
Styletil.es
![Page 31: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/31.jpg)
A simple style tile prototype
![Page 32: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/32.jpg)
We can emulate these color theory models to create harmonious, automated
color themes.
![Page 33: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/33.jpg)
Here are some examples, using a “Split compliment” model:
![Page 34: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/34.jpg)
![Page 35: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/35.jpg)
I have “bent” the axis of the split compliment to bring it closer to
the Munsell model.
![Page 36: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/36.jpg)
These variations are all accomplished by changing only
two* color variables:
*one of which could be automated!
![Page 37: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/37.jpg)
![Page 38: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/38.jpg)
![Page 39: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/39.jpg)
![Page 40: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/40.jpg)
Sample Style Tile Projecthttp://bit.ly/sass-color-theming
![Page 41: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/41.jpg)
Sass color functions
adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a32
![Page 42: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/42.jpg)
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)
![Page 43: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/43.jpg)
![Page 44: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/44.jpg)
Foundation Settings
![Page 45: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/45.jpg)
What’s Next?
![Page 46: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/46.jpg)
Intelligent color systems that speed
prototyping & design iterations
![Page 47: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/47.jpg)
Example: Foundation’s panels.scss
![Page 48: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/48.jpg)
/foundation/panels.scss
![Page 49: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/49.jpg)
/foundation/panels.scss
text colors invert if the panel’s lightness value is ± 50%
![Page 50: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/50.jpg)
Yeoman Generator for Style Prototypeshttps://github.com/Team-Sass/generator-style-prototype
T E A M S A S S
![Page 51: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/51.jpg)
Color Schemerhttps://github.com/Team-Sass/color-schemer
T E A M S A S S
![Page 52: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/52.jpg)
Questions?
![Page 53: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/53.jpg)
Thanks!Slides: http://bit.ly/style-tiles-theming
Code: http://bit.ly/sass-color-theming
![Page 54: SASSy Style Tiles: Understanding Color Models for Theming](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b8afcd4a7959f3638b45ba/html5/thumbnails/54.jpg)
Thanks!
allanwhite.info@allanwhite
Slides: http://bit.ly/style-tiles-themingCode: http://bit.ly/sass-color-theming