Your SlideShare is downloading. ×
0
SASSy Style Tiles:
Understanding color models for theming
Allan White
allanwhite.info
Q:What makes color work?
Color: A brief history
http://en.wikipedia.org/wiki/File:Runge_Farbenkugel.jpg
http://www.handprint.com/HP/WCL/vismixmap.html#munsell
Albert Munsell
http://en.wikipedia.org/wiki/Munsell_color_system
http://en.wikipedia.org/wiki/Munsell_color_system
today: CIECAM
http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM
CIECAM Color Space
the RGB Problem
Our display technology
forces computer color
models into RGB
models.
Adobe Kuler
Adobe Kuler
triadic scheme
triadic scheme
triadic scheme
triadic scheme
triadic scheme
Adobe
Kuler: iOS
Adobe
Kuler: iOS
Adobe
Kuler: iOS
Adobe
Kuler: iOS
Adobe
Kuler: iOS
Style Tiles
Styletil.es
A simple style tile
prototype
We can emulate these color
theory models to create
harmonious, automated
color themes.
Here are some examples, using
a “Split compliment” model:
I have “bent” the axis of the split
compliment to bring it closer to
the Munsell model.
These variations are all
accomplished by changing only
two* color variables:
*one of which could be automated!
Sample Style Tile Project
http://bit.ly/sass-color-theming
Sass color functions
adjust-hue(#cc3, 20deg) => #9c3
saturate(#cc3, 10%) => #d9d926
desaturate(#cc3, 10%) => #bfbf40
light...
adjust-color()
adjust-color(#102030, $blue: 5) => #102035
adjust-color(#102030, $red: -5, $blue: 5) => #0b2035
adjust-colo...
Foundation Settings
What’s Next?
Intelligent color
systems that speed
prototyping & design
iterations
Example: Foundation’s
panels.scss
/foundation/panels.scss
/foundation/panels.scss
text colors invert if the panel’s
lightness value is ± 50%
Yeoman Generator
for Style Prototypes
https://github.com/Team-Sass/
generator-style-prototype
TEAM SASS
Color Schemer
https://github.com/
Team-Sass/color-schemer
TEAM SASS
Questions?
Thanks!
Slides: http://bit.ly/style-tiles-theming
Code: http://bit.ly/sass-color-theming
Thanks!
allanwhite.info
@allanwhite
Slides: http://bit.ly/style-tiles-theming
Code: http://bit.ly/sass-color-theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
SASSy Style Tiles: Understanding Color Models for Theming
Upcoming SlideShare
Loading in...5
×

SASSy Style Tiles: Understanding Color Models for Theming

1,718

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,718
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×