February 25, 2014
Color is how we perceive different wavelengths of light. When we see a color in the real world, it represents the wavelenght or combination of wavelengths that are reflected by the object. If we see a black cat, that cat's fur absorbs most wavelengths of light so we don't see light reflected. If we see a white cat, that cat's fur reflects most wavelengths of light, so we see them all together – as the color white.
Digital devices present color differently. On a digital device, the screen is made up of thousands of little light emitters that are black by default. We call these emitters pixels. Depending on the device, these pixels can emit anywhere from 256 to over 16 million colors, which is accomplished by emitting combinations red, green & blue light, all colors off is black, and all on is white.
More info on web and device colors
You can apply color to content elements using the following CSS properties:
color:
(for text)background-color:
(for backgrounds)border-color:
(for borders)border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
Color values for the above properties can be represented using hexadecimal, RGB, RGBA, HSL or HSLA color values.
Hexadecimal is a numbering system based on the number 16. Number values range from 0 to 9 and then A to F, where 0 = 0 and F = 15. You can combine hexadecimal digits to get bigger numbers. Hexadecimal colors have 3 components, red, green & blue, each represented by two hexadecimal (00-FF) value positions representing 0-255.
#000000
0 red, 0 green, 0 blue = black#ffffff
ff (256) red, ff (256) green, ff (256) blue = white#ff0000
ff (256) red, 00 (0) green, 00 (0) blue = bright red#00ff00
00 (0) red, ff (256) green, 00 (0) blue = bright green#0000ff
00 (0) red, 00 (0) green, ff (256) blue = bright blueSimilar in concept to hex color, RGB Color uses decimal numbers from 0-255 for each color channel:
rgb(0,0,0)
blackrgb(255,255,255)
whitergb(255,0,0)
bright redrgb(0,255,0)
bright greenrgb(0,0,255)
bright blueSame as RGB but with an 8 bit alpha channel for transparency:
rgba(0,0,0,1.0)
black, fully opaquergba(255,255,255,0.5)
white, 50% transparentrgba(255,0,0,0.75)
bright red, 75% opaquergba(0,255,0,0.25)
bright green, 75% transparentrgba(0,0,255,0.90)
bright blue, 90% opaqueHSL stands for Hue, Saturation and Lightness, where Hue is the base color on the color wheel (0/360 = red, 120 = green, 240 = blue), Saturation is how much color (0% is no color, 100% is full color) and Lightness is the brightness (0% = black, 100% most bright):
hsl(0, 100%, 100%)
bright redhsl(0, 100%, 25%)
dark redhsl(120, 50%, 25%)
dark gray-greenhsl(120, 100%, 25%)
dark greenhsl(240, 50%, 75%)
light blue-grayv
Same as HSL but with an 8 bit alpha channel for transparency:
hsla(0, 100%, 100%, 1.0)
bright red, fully opaquehsla(0, 100%, 25%)
dark redhsla(120, 50%, 25%)
dark gray-greenhsla(120, 100%, 25%)
dark greenhsla(240, 50%, 75%)
light blue-grayColors have a strong psychological effect upon users of your site, and can be used to establish a mood as well as create similarity, contrast, rhythm and dominance:
There are a number of approaches to selecting color schemes outlined in Design for Hackers, but they should all be used in support of the research you did with your User Personas and User Stories. Once you have an idea of who will be using your site and why, you can apply the methods outlined in the book. Tools like Color Scheme Designer can also help.
Log into Github and experiment with color on your project from last week. Pay particlular attention to using color in support of your content hierarchies and design principles from last week.
color:
property to color your textbackground-color:
property to differentiate sections or headingsThe Vision Document is where you write down your idea for your project and provide details about what it should do, who it's for and how it should be made. The Vision Document will count toward as your mid-term grade and will be the basis for your final project. It's a living document, in that you can (and probably will) update it over the coming weeks as you work through your final project.
The Vision Document is due next week, Tuesday March 4, 2014.
After you have completed the reading assignment, download the Vision Document Template, review it and write your own. You'll need to create some User Personas, User Stories and a site map in support of your Vision Document
The Vision Document is due next week, Tuesday March 4, 2014.