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 Video: https://vimeo.com/74483342 Presented at the PDX SASS Meetup Sept. 12, 2013

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

11. today: CIECAM

12. http://www.handprint.com/HP/WCL/vismixmap.html#CIECAM
CIECAM Color Space

13. the RGB Problem

14. Our display technology
forces computer color
models into RGB
models.

18. Adobe Kuler

19. Adobe Kuler

20. triadic scheme

21. triadic scheme

22. triadic scheme

23. triadic scheme

24. triadic scheme

25. Adobe
Kuler: iOS

26. Adobe
Kuler: iOS

27. Adobe
Kuler: iOS

28. Adobe
Kuler: iOS

29. Adobe
Kuler: iOS

30. Style Tiles
Styletil.es

31. A simple style tile
prototype

32. We can emulate these color
theory models to create
harmonious, automated
color themes.

33. Here are some examples, using
a “Split compliment” model:

35. I have “bent” the axis of the split
compliment to bring it closer to
the Munsell model.

36. These variations are all
accomplished by changing only
two* color variables:
*one of which could be automated!

40. Sample Style Tile Project
http://bit.ly/sass-color-theming

41. Sass color functions
adjust-hue(#cc3, 20deg) => #9c3
saturate(#cc3, 10%) => #d9d926
desaturate(#cc3, 10%) => #bfbf40
lighten(#cc3, 10%) => #d6d65c
darken(#cc3, 10%) => #a3a32

42. 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)

44. Foundation Settings

45. What’s Next?

46. Intelligent color
systems that speed
prototyping & design
iterations

47. Example: Foundation’s
panels.scss

48. /foundation/panels.scss

49. /foundation/panels.scss
text colors invert if the panel’s
lightness value is ± 50%

50. Yeoman Generator
for Style Prototypes
https://github.com/Team-Sass/
generator-style-prototype
TEAM SASS

51. Color Schemer
https://github.com/
Team-Sass/color-schemer
TEAM SASS

52. Questions?

53. Thanks!
Slides: http://bit.ly/style-tiles-theming
Code: http://bit.ly/sass-color-theming

54. Thanks!
allanwhite.info
@allanwhite
Slides: http://bit.ly/style-tiles-theming
Code: http://bit.ly/sass-color-theming