SASSy Style Tiles: Understanding Color Models for Theming

  • 1,280 views
Uploaded 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 …

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

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,280
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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
  • 9. today: CIECAM
  • 10. http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM CIECAM Color Space
  • 11. the RGB Problem
  • 12. Our display technology forces computer color models into RGB models.
  • 13. Adobe Kuler
  • 14. Adobe Kuler
  • 15. triadic scheme
  • 16. triadic scheme
  • 17. triadic scheme
  • 18. triadic scheme
  • 19. triadic scheme
  • 20. Adobe Kuler: iOS
  • 21. Adobe Kuler: iOS
  • 22. Adobe Kuler: iOS
  • 23. Adobe Kuler: iOS
  • 24. Adobe Kuler: iOS
  • 25. Style Tiles Styletil.es
  • 26. A simple style tile prototype
  • 27. We can emulate these color theory models to create harmonious, automated color themes.
  • 28. Here are some examples, using a “Split compliment” model:
  • 29. I have “bent” the axis of the split compliment to bring it closer to the Munsell model.
  • 30. These variations are all accomplished by changing only two* color variables: *one of which could be automated!
  • 31. Sample Style Tile Project http://bit.ly/sass-color-theming
  • 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. 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. Foundation Settings
  • 35. What’s Next?
  • 36. Intelligent color systems that speed prototyping & design iterations
  • 37. Example: Foundation’s panels.scss
  • 38. /foundation/panels.scss
  • 39. /foundation/panels.scss text colors invert if the panel’s lightness value is ± 50%
  • 40. Yeoman Generator for Style Prototypes https://github.com/Team-Sass/ generator-style-prototype TEAM SASS
  • 41. Color Schemer https://github.com/ Team-Sass/color-schemer TEAM SASS
  • 42. Questions?
  • 43. Thanks! Slides: http://bit.ly/style-tiles-theming Code: http://bit.ly/sass-color-theming
  • 44. Thanks! allanwhite.info @allanwhite Slides: http://bit.ly/style-tiles-theming Code: http://bit.ly/sass-color-theming