SASSy Style Tiles: Understanding color models for theming

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.

You can watch the full video with slides here:
http://allanwhite.tumblr.com/post/61134916482/sassy-style-tiles-understanding-color-models-for

Transcript

1. SASSy Style Tiles: Understanding color models for theming Allan White allanwhite.info
2. Q: What makes color work?
3. Color: A brief history
4. http://en.wikipedia.org/wiki/File:Runge_Farbenkugel.jpg
5. http://www.handprint.com/HP/WCL/vismixmap.html#munsell
6. Albert Munsell
7. http://en.wikipedia.org/wiki/Munsell_color_system
8. http://en.wikipedia.org/wiki/Munsell_color_system
11. today: CIECAM
12. http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM CIECAM Color Space
13. the RGB Problem
14. Our display technology forces computer color models into RGB models.
18. Adobe Kuler
19. Adobe Kuler
20. triadic scheme
21. triadic scheme
22. triadic scheme
23. triadic scheme
24. triadic scheme
25. Adobe Kuler: iOS
26. Adobe Kuler: iOS
27. Adobe Kuler: iOS
28. Adobe Kuler: iOS
29. Adobe Kuler: iOS
30. Style Tiles Styletil.es
31. A simple style tile prototype
32. We can emulate these color theory models to create harmonious, automated color themes.
33. Here are some examples, using a “Split compliment” model:
35. I have “bent” the axis of the split compliment to bring it closer to the Munsell model.
36. These variations are all accomplished by changing only two* color variables: *one of which could be automated!
40. Sample Style Tile Project http://bit.ly/sass-color-theming
41. Sass color functions adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a32
42. adjust-color() adjust-color(#102030, $blue: 5) => #102035 adjust-color(#102030, $red: -5, $blue: 5) => #0b2035 adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6)
44. Foundation Settings
45. What’s Next?
46. Intelligent color systems that speed prototyping & design iterations
47. Example: Foundation’s panels.scss
48. /foundation/panels.scss
49. /foundation/panels.scss text colors invert if the panel’s lightness value is ± 50%
50. Yeoman Generator for Style Prototypes https://github.com/Team-Sass/ generator-style-prototype TEAM SASS
51. Color Schemer https://github.com/ Team-Sass/color-schemer TEAM SASS
52. Questions?
53. Thanks! Slides: http://bit.ly/style-tiles-theming Code: http://bit.ly/sass-color-theming
54. Thanks! allanwhite.info @allanwhite Slides: http://bit.ly/style-tiles-theming Code: http://bit.ly/sass-color-theming