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

SASSy Style Tiles: Understanding Color Models for Theming

on

  • 1,059 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,059
Views on SlideShare
1,059
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 SASSy Style Tiles: Understanding Color Models for Theming Presentation Transcript

  • 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 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a32
  • 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)
  • 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