SISTA 230. Color Theory

Transcription

1 SISTA 230 Color Theory

2 CSS Colors CSS color:red; CSS background-color:blue; 17 valid color keywords

3 CSS Color Keywords aqua black blue fuchsia gray green lime maroon navy olive orange purple red silver teal white While these colors provide an element of simplicity and familiarity, we need to be able to specify more colors than these if we want to develop interesting and unique designs. yellow

4 Color Theory Three primary colors: Red Green Blue All colors used in CSS are composed of varying amounts of each of these three colors.

5 Color Theory Primary colors Using the three primary colors, we can create additional colors.

6 Color Theory Secondary colors Colors created using equal amounts of two of the other primary colors are called secondary colors.

7 Color Theory Tertiary colors Similarly, we can create 'tertiary' colors by mixing primary colors with secondary colors.

8 Color Theory Continuing in this fashion, we can create a full color wheel, made up of over 16,000,000 colors that we can choose from.

9 Color Theory White The color white is created by adding equal amounts of all three of the primary colors at full strength.

10 Color Theory Black Conversely, the color black is created by removing any trace of the three primary colors (i.e., no color at all).

11 CSS Colors Created by specifying the amount of each primary color Values range from Must specify a value for each one

12 CSS Colors CSS a { } color:red; Rather than using the keyword 'red', we can specify the specific amounts of each primary color that we want to be used to create the color. a { color:rgb( 255, 0, 0 ); }

13 CSS Colors CSS a { } color:yellow; Since we know that yellow is a secondary color that is created by mixing equal amounts of red and green light, we can use the following: a { color:rgb( 255, 255, 0 ); }

14 CSS Colors Hexidecimal Values Another option for specifying color values is to use the hexidecimal value for the three primary colors. Hexidecimal is a base 16 numbering system, which is different than the base 10 system that we're more familiar with. Base 10 system Known as decimal system Use 0 9 E.g., 25 = 2 tens and 5 ones

15 CSS Colors Hexidecimal Values Base 16 system Known as hexidecimal system Use 0 9 AND A F A = 10, B=11, C=12, D=13, E=14, F=15 It is important that you understand how a hexidecimal value relates to its decimal counterpart. For example: = 2 sixteens and 5 ones = A 16 = 1 sixteens and 10 ones = = 0 sixteens and 0 ones = 0 10 FF 16 = 15 sixteens and 15 ones =

16 CSS Colors Hexidecimal Values CSS a { } color:rgb(red_value,green_value,blue_value); Instead of specifying comma separated values for red, green, and blue, we can use a '#' followed by the hexidecimal values for each of the colors. a { color:#rrggbb; }

17 CSS Colors Hexidecimal Values CSS a { } color:red; a { } color:rgb( 255, 0, 0 ); a { color:#ff0000; } The three examples above all have the same exact effect on the font color.

18 CSS Colors Hexidecimal Shorthand Hexidecimal values can be abbreviated if each of the RGB hex pairs are the same CSS a { } color:#ffcc00; For example, the color value above is made up of two 'f's for the red value, two 'c's for the green value, and two '0's for the blue value. This can be abbreviated as: a { color:#fc0; }

19 CSS Colors Hexidecimal Shorthand This ability to abbreviate often makes specific color schemes easier to remember. It also requires less typing, which is never a bad thing. CSS a { } color:#a00;/*wildcatred*/ a { color:#036;/*wildcatblue*/ }

20 Before moving forward, we'll explore a few definitions to ensure a shared understanding of some common terms. Hues Hue A "pure" color, i.e., one without any white or black added to it

21 Tint Tint A hue with some amount of white added to it To create a tint using CSS hexidecimal values, we simply add equal amounts of the primary colors. For example, each of the following hexidecimal values create lighter tints of red, starting with the full hue and moving towards solid white. #ff0000/*red*/ #ff3333 #ff6666 #ff9999 #ffcccc #ffffff/*white*/

22 Shade Shade A hue with some amount of black added to it To create a shade using CSS hexidecimal values, we simply remove equal amounts of the primary colors. For example, each of the following hexidecimal values create darker shades of red, starting with the full hue and moving towards solid black. #ff0000/*red*/ #cc0000 # # # #000000/*Black*/

23 Color Color is one of the most powerful tools in a web designer's tool box. As with any tool, it can be used to create beautiful pieces of art when used by a skilled developer. Conversely, when in the hands of someone who doesn't know what they're doing, it can easily be misused and ruin a project. Color can be used to... communicate ideas communicate emotion manipulate perception create focus motivate/influence action

24 Color Color can also... disorient/overwhelm your users miscommunicate emotion draw focus (to the wrong thing) influence incorrect actions

25 Color Theory 80/20 Rule The general balance between your colors should be around 80% neutral colors (tints & shades), 20% strong colors (pure hues).

26 Color Theory Warm vs. Cool Colors By drawing a horizontal line across the color wheel, we can divide the colors into 'warm' and 'cool' colors. While the placement of this line is somewhat open for debate, the division used below is commonly accepted as a good spot.

27 Color Theory Warm Colors Stimulating Active More intimate

28 Color Theory Cool Colors Calming Relaxing More 'open'

29 Red Red is a powerful color. It can be used to communicate both positive and negative messages. Red is just as much associated with Cupid as it is with the devil. Common words/emotions/actions associated with red are: Passion Love Seduction Danger Anger Blood Violence Stop

30 Red Very strong color! Red should be used with caution as it can easily take over the visual space, resulting in more eye strain for the user and an overall less enjoyable experience when viewing your website. Great for drawing attention......but can easily draw focus away from other things

31 Yellow Like red, yellow can be a powerful color. It can be used to communicate both positive and potentially negative messages. Common words/emotions/actions associated with yellow are: Sunshine Happiness Warmth Joy Youth Caution Cowardice

32 Yellow Very strong color! Great for drawing attention......but can easily draw focus away from other things Works best as an accent color Be careful when mixing with black or gray!

33 Orange Orange, created from a mix of red and yellow, is a great option when you want a strong impact (like red), but with a little more subtlety. Common words/emotions/actions associated with orange are: Health Food Soothing Autumn Creativity Energy Caution Safety

34 Orange Very versatile light and dark shades bring out different meanings Shares many characteristics of red and yellow but more subtle Lighter tints can be energetic without being overwhelming

35 Black While technically a lack of color, black can be used to communicate lots of things and is a very handy color when properly used alongside other hues. Common words/emotions/actions associated with black are: Power Elegance Wealth Fear Death Evil Negativity

36 Black Acts like a warm color Works well with other bright colors. Can work with darker colors but may provide contrast issues Makes other colors 'pop'. If used too heavily, will overwhelm the page.

37 Green Green is on the edge of the divide between 'warm' and 'cool' colors. Because of this, it is very versatile and can invoke lots of varying emotions depending on its tint/shade and colors it is used with. Common words/emotions/actions associated with green are: Nature Ecology Fertility Luck Harmony Success Money Illness

38 Green Warm and cool! Universally associated with nature Can be a 'restful' color

39 Blue Blue is a powerful color and is worth exploring at a more granular level.

40 Dark Blue Common words/emotions/actions associated with darker shades of blue are: Trust Integrity Knowledge Stability Dignity Authority

41 Bright Blue Common words/emotions/actions associated with pure blue hues are: Cleanliness Strength Dependability Coolness

42 Light Blue Common words/emotions/actions associated with lighter blue tints are: Tranquility Peace Calm Serenity

43 Blue Most versatile of all the colors! Most common color for corporate branding Used LOTS of places can easily become cliché

44 Purple Purple is a powerful color that can draw in some users and alienate others. Because of this, it is best used with other colors. Common words/emotions/actions associated with purple are: Royalty Nobility Dignity Bravery Intelligence Wealth Mystery Magic

45 Purple Can be warm or cool depending on the shade Tends to evoke strong feelings

46 White White is one of the most useful colors at our disposal. It blends well with almost any other color and can provide excellent contrast in most cases. Because it doesn't draw the eye as much as other colors, it is usually not recognized as impacting the meaning of a given color scheme. That said, it's still worth noting some common associations for the color. Common words/emotions/actions associated with white are: Purity Wedding Clean Virtue

47 White Typically used as a neutral background color Allows other colors to take the focus Provides excellent contrast for many hues Can provide a simple and clean feel when used heavily

48 Color and Culture Colors mean different things to different people Know who your target audience is

49 Color Schemes The following color schemes are a convenient approach to selecting colors to use in your website designs. Color schemes: Use position on the color wheel to choose hues Can provide harmony between colors Can provide good contrast between colors

50 Color Schemes Monochromatic Scheme Based on a single color Uses multiple tints/shades of the base color

51 Color Schemes Monochromatic Scheme Pros: Easy to manage Can provide a feeling of elegance through simplicity Good for simple websites that don't need a lot of flair

52 Color Schemes Monochromatic Scheme Cons: Can be overwhelming if not balanced with lighter tints Often lacks contrast Can feel less vibrant than other schemes lacking a mix of warm and cool colors

53 Color Schemes Monochromatic Scheme

54 Color Schemes Monochromatic Scheme

55 Color Schemes Analogous Scheme Based on colors that are close to each other on the color wheel Pick one hue as primary and use the others as accents

56 Color Schemes Analogous Scheme Pros: Easy to manage Can be more vibrant than a monochromatic scheme

57 Color Schemes Analogous Scheme Cons: Can result in poor contrast between colors Can be overwhelming if too many hues are used Can lack a mix of warm and cool colors

58 Color Schemes Analogous Scheme

59 Color Schemes Analogous Scheme

60 Color Schemes Complement Scheme Based on a color and the color directly opposite it on the color wheel Uses multiple tints/shades of one color with accents from the other

61 Color Schemes Complement Scheme Pros: Provides an easy way of including warm and cool colors Provides a natural option for highlighting elements Can provide a 'high energy' feel to the site

62 Color Schemes Complement Scheme Cons: Can look clunky if both colors are used to heavily Can create a feeling of tension Can look drab if used with warm shades/tints

63 Color Schemes Complement Scheme

64 Color Schemes Complement Scheme

65 Color Schemes Split Complement Scheme One dominant hue and the two hues adjacent to its complement Heavy use of the dominant hue and one of the complementary adjacent colors Use remaining complementary adjacent color as an accent color

66 Color Schemes Split Complement Scheme Pros: Less tension between colors than the complement scheme Still provides good contrast Lends itself well to beginners

67 Color Schemes Split Complement Scheme Cons: More difficult to manage than the previous schemes Can look drab if used with warm shades/tints

68 Color Schemes Split Complement Scheme

69 Color Schemes Split Complement Scheme

70 Color Schemes Triad Scheme Three hues that are equidistant from one another Good at providing a mix of "cool" and "warm" colors Let one color dominate and use the others as accents

71 Color Schemes Triad Scheme

72 Color Schemes Triad Scheme

73 Color Schemes Don't reinvent the wheel Working with a color wheel, determining color values, etc. can be daunting work to do by hand. Fortunately, there are a number of color scheme generators that use the principles described above. One example is: Provides a color wheel Provides color scheme options Provides hex colors Does NOT provide good judgment. While most tools will provide you with some convenience when developing color schemes for your designs, you are still expected to use your best judgment when it comes to picking colors.