Color Harmony with Code

Type of Presentation (required)

[ x ] Standard Length Talk [ x ] Lightning Talk [ ] Workshop [ ] Moderated Discussion

Description (required)

This talk will be about color, and specifically how you can achieve color harmony using CSS, Sass, and a little bit of math.

I am not a designer but I love design and the part of design that has always impressed me the most is color. The way that designers, artists, and illustrators are able to take a flat white space, or in the case of the browser a glowing white rectangle, and turn it into something with depth and emotion has always impressed me. Since I'm a front-end developer and not a designer, I wanted to find a way to create harmonious color palettes using the tools that I'm most familiar with: CSS, Sass, and JavaScript. Fortunately for anyone who has studied basic color theory, there are some rules you can follow which can make achieving color harmony a bit easier for us non-designers. Even better, there are developer tools that can be leveraged to make finding the right color as easy as typing in some code.

Here is what I would like to cover in more detail:

-Color Harmony Overview: quick overview of the basic rules for selecting harmonious colors such as complementary colors, split complementary colors, tetrads, analogous colors.
-HSL vs RGB vs HEX: Overview of the difference between these CSS color values, and explanation of how using the CSS3 HSL (hue, saturation, lightness) color value can help to more closely align code with the traditional color wheel -Manipulating Color with Sass: Using Sass to lighten, darken, saturation, or desaturate a color -Rotating the Color Wheel Code: Using CSS, Sass, and the amazing color-schemer toolset to rotate around the color wheel and pick a color's complement, split complement, analogous neighbor. -Easier Form Colors: Set one basic color for a success message (green) and generate the colors for other error and warning messages using Sass. -Fun Color Functions: A few things that aren't practical but are fun, such as using the random function in Sass to create random colors

Here are some exmaples of my work which show these concepts in action:

Here is some of the code examples I would show:

Using CSS3 Hue, Saturation, Lightness .classname {background-color:hsl(0,100%,50%);}
Using color-schemer to rotate colors on color wheel .classname {background-color: ryb-adjust-hue(#FF000, 30);}
Using color-schemer to find a color's complement .classname {background-color: ryb-adjust-hue(#FF000, 180);}
Generating a random color .classname {background-color: rgb(random(255), random(255), random(255));}
Speaker Info (required)
Name : Maia Lee
Location : Los Angeles, CA
Contact : maia@thislittlemachine.com
Social Media:
Twitter : @maiamachine
GitHub : maiamachine
Url(s) : codepen
Bio:

I am a front-end developer with a passion for beautiful design. I enjoy using code to express my creativity. I also build large scale web applications for clients using HTML5, CSS3, SASS/LESS, JavaScript, AngularJS, JQuery, and more. Before becoming a developer I was a technical project manager for 6 years on all types of projects at a variety of different companies. It was a love for Flash animation that originally got me interested in becoming a developer and I'm still having so much learning in this exciting field.

Photo:

Avatar

SassConf / 2015-austin-speaker-cfp