SASSy Style Tiles: Understanding Color Models for Theming
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

SASSy Style Tiles: Understanding Color Models for Theming

  • 1,445 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......

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,445
On Slideshare
1,445
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