SASSy Style Tiles: Understanding Color Models for Theming

1,833
-1

Published on

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

Published in: Design, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,833
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

SASSy Style Tiles: Understanding Color Models for Theming

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

×