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

on

  • 1,174 views

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

Statistics

Views

Total Views
1,174
Views on SlideShare
1,174
Embed Views
0

Actions

Likes
3
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SASSy Style Tiles: Understanding Color Models for Theming Presentation 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