Difference between revisions of "Color Theory"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(Created page with "==What it is== Per [Wikipedia|https://en.wikipedia.org/wiki/Color_theory], color theory is: {quote} a body of practical guidance to color mixing and the visual effects of a sp...")
 
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
==What it is==
==What it is==
Per [Wikipedia|https://en.wikipedia.org/wiki/Color_theory], color theory is:
Per [https://en.wikipedia.org/wiki/Color_theory Wikipedia], color theory is:
{quote}
<blockquote>a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also specific definitions (or categories) of colors based on the color wheel: primary color, secondary color, and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of "color theory" began int he 18th century, initially with a partisan controversy around Isaac Newton's theory of color (_Opticks_, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.
a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also specific definitions (or categories) of colors based on the color wheel: primary color, secondary color, and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of "color theory" began int he 18th century, initially with a partisan controversy around Isaac Newton's theory of color (_Opticks_, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.
</blockquote>
{quote}


For information about color and accessibility, see&nbsp;[1.4.1 Use of Color - Level A|ux:1.4.1 Use of Color - Level A].
==Terminology==


h3. Terminology
[https://en.wikipedia.org/wiki/Hue Hue] is the term that denotes an object's color. "Red" is a hue.&nbsp;


[Hue|https://en.wikipedia.org/wiki/Hue] is the term that denotes an object's color. "Red" is a hue.&nbsp;
[http://en.wikipedia.org/wiki/Chroma Chroma], sometimes referred to as Intensity,&nbsp;refers to the purity of a color. Pure red (#ff0000) has high chroma, but pink has low chroma because it has white mixed into the red.&nbsp;


[Chroma|http://en.wikipedia.org/wiki/Chroma], sometimes referred to as Intensity,&nbsp;refers to the purity of a color. Pure red (#ff0000) has high chroma, but pink has low chroma because it has white mixed into the red.&nbsp;
[http://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturation Saturation] refers to how a hue appears under particular light conditions. Think about the color of a red ballon on a bright sunny day vs how it appears under moonlight. When the light is less saturated (like when it has to bounce off the moon to get to you) the color isn't as vibrant.&nbsp;


[Saturation|http://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturation] refers to how a hue appears under particular light conditions. Think about the color of a red ballon on a bright sunny day vs how it appears under moonlight. When the light is less saturated (like when it has to bounce off the moon to get to you) the color isn't as vibrant.&nbsp;
[http://en.wikipedia.org/wiki/Lightness_%28color%29 Value] refers to how light or dark a color is - not in the "pink is lighter than red" way but in the "orange is a bright color and purple is a dark one" way.&nbsp;
 
[Value|http://en.wikipedia.org/wiki/Lightness_%28color%29] refers to how light or dark a color is - not in the "pink is lighter than red" way but in the "orange is a bright color and purple is a dark one" way.&nbsp;


Tones are created when taking a pure color and adding grey to it. They tend to look dull or soft, sophisticated, vintage, or elegant.&nbsp;
Tones are created when taking a pure color and adding grey to it. They tend to look dull or soft, sophisticated, vintage, or elegant.&nbsp;
Line 25: Line 22:
When choosing colors, make sure that you don't choose with similar chroma or saturation.&nbsp;
When choosing colors, make sure that you don't choose with similar chroma or saturation.&nbsp;


h3. The Color Wheel
==The Color Wheel==


Most explanations of color theory start at the color wheel, an abstract illustration of the organization of color hues around a circle. The color wheel shows the relationship between [primary|https://en.wikipedia.org/wiki/Primary_color], [secondary|https://en.wikipedia.org/wiki/Secondary_color], and sometimes tertiary colors. Which colors display as the primary colors depend on whether the [color system|http://www.colormatters.com/color-and-design/color-systems-rgb-and-cmyk] is using [additive|https://en.wikipedia.org/wiki/Additive_color]&nbsp;(light based - think "computer monitor")&nbsp;or [subtractive|https://en.wikipedia.org/wiki/Subtractive_color] (surface-based - think "paints or printouts") color.&nbsp;
Most explanations of color theory start at the color wheel, an abstract illustration of the organization of color hues around a circle. The color wheel shows the relationship between [https://en.wikipedia.org/wiki/Primary_color], [https://en.wikipedia.org/wiki/Secondary_color secondary], and sometimes tertiary colors. Which colors display as the primary colors depend on whether the [http://www.colormatters.com/color-and-design/color-systems-rgb-and-cmyk color system] is using [https://en.wikipedia.org/wiki/Additive_color additive]&nbsp;(light based - think "computer monitor")&nbsp;or [https://en.wikipedia.org/wiki/Subtractive_color subtractive] (surface-based - think "paints or printouts") color.&nbsp;


Additive color is generally presented as an RGB (Red Green Blue) color set. Subtractive color is most often presented as CMYK (Cyan, Magenta, Yellow, and Black). The two systems are different because mixing light colors results in different colors than mixing paint colors. When all the colors in light are mixed together, the result is white light. (This is why prisms work.) When all the colors in subtractive color sets such as paints are mixed together, the result is black paint.&nbsp;
Additive color is generally presented as an RGB (Red Green Blue) color set. Subtractive color is most often presented as CMYK (Cyan, Magenta, Yellow, and Black). The two systems are different because mixing light colors results in different colors than mixing paint colors. When all the colors in light are mixed together, the result is white light. (This is why prisms work.) When all the colors in subtractive color sets such as paints are mixed together, the result is black paint.&nbsp;


Most design (and writing and spreadsheet etc.) software provides some sort of [color tool|https://en.wikipedia.org/wiki/Color_picker] to help users pick specific colors for presentation.&nbsp;
Most design (and writing and spreadsheet etc.) software provides some sort of [https://en.wikipedia.org/wiki/Color_picker color tool] to help users pick specific colors for presentation.&nbsp;


It is worth noting that if a computer monitor is not [color calibrated|https://en.wikipedia.org/wiki/Color_calibration], there is no guarantee that the color it displays matches the color that a calibrated monitor will display. In other words, what looks like a bright yellow on my screen may not show up on yours at all. It is also worth noting that the vast majority of the population does not calibrate their monitors. Should we calibrate ours? [It's a hotly-debated topic|https://css-tricks.com/how-should-we-calibrate-monitors-for-the-web/], but not one that's reached consensus.&nbsp;
It is worth noting that if a computer monitor is not [https://en.wikipedia.org/wiki/Color_calibration calibrate], there is no guarantee that the color it displays matches the color that a calibrated monitor will display. In other words, what looks like a bright yellow on my screen may not show up on yours at all. It is also worth noting that the vast majority of the population does not calibrate their monitors. Should we calibrate ours? [https://css-tricks.com/how-should-we-calibrate-monitors-for-the-web/ It's a hotly-debated topic], but not one that's reached consensus.&nbsp;


In hex codes, the color wheel is represented by 2 digits each, red, green, and blue. The higher the hex code, the brighter the color from 00 to FF. So #ff0000 is pure red, #00ff00 is pure green, and #0000ff is pure blue. To create the brightest yellow, red and green must be added together, so #ffff00 is the result. #00ffff is the brightest cyan, and #ff00ff is the brightest purple.&nbsp;
In hex codes, the color wheel is represented by 2 digits each, red, green, and blue. The higher the hex code, the brighter the color from 00 to FF. So #ff0000 is pure red, #00ff00 is pure green, and #0000ff is pure blue. To create the brightest yellow, red and green must be added together, so #ffff00 is the result. #00ffff is the brightest cyan, and #ff00ff is the brightest purple.&nbsp;
Line 39: Line 36:
By adding one to each of the left-hand characters of the three pairs, we raise the color's brightness while lowering its saturation. This prevents a shade from wandering too closely to pitch black or super bright.&nbsp;
By adding one to each of the left-hand characters of the three pairs, we raise the color's brightness while lowering its saturation. This prevents a shade from wandering too closely to pitch black or super bright.&nbsp;


h3. Color schemes
==Color schemes==


A [color scheme|https://en.wikipedia.org/wiki/Color_scheme] is the choice of colors used in design for a project.&nbsp;
A [https://en.wikipedia.org/wiki/Color_scheme color scheme] is the choice of colors used in design for a project.&nbsp;


Types of color schemes
Types of color schemes


* [Monochromatic|https://en.wikipedia.org/wiki/Monochromatic_color] \- All colors are based off a single hue. Example: everything is a shade of blue.&nbsp;
* [https://en.wikipedia.org/wiki/Monochromatic_color Monochromatic] - All colors are based off a single hue. Example: everything is a shade of blue.&nbsp;
* [Analogous|https://en.wikipedia.org/wiki/Analogous_colors] \- All colors are&nbsp;based&nbsp;off of two or three hues that are next to each other on the color wheel.&nbsp;
* [https://en.wikipedia.org/wiki/Analogous_colors Analogous] - All colors are&nbsp;based&nbsp;off of two or three hues that are next to each other on the color wheel.&nbsp;
* [Complementary|https://en.wikipedia.org/wiki/Complementary_colors] \- All colors are based off of two hues that are opposite each other on the color wheel. Popular examples are purple and yellow, blue and orange, red and&nbsp;green.&nbsp;
* [https://en.wikipedia.org/wiki/Complementary_colors Complementary] - All colors are based off of two hues that are opposite each other on the color wheel. Popular examples are purple and yellow, blue and orange, red and&nbsp;green.&nbsp;
* Split-Complementary - Similar to Complementary, this uses a color and its opposite, and the color next to it and its opposite.&nbsp;
* Split-Complementary - Similar to Complementary, this uses a color and its opposite, and the color next to it and its opposite.&nbsp;
* Triadic - This scheme uses three color hues that are spaced equally around the color wheel.&nbsp;
* Triadic - This scheme uses three color hues that are spaced equally around the color wheel.&nbsp;
* Tetradic / Double Complementary \-&nbsp;This scheme uses four color hues that are spaced equally around the color wheel.&nbsp;
* Tetradic / Double Complementary -&nbsp;This scheme uses four color hues that are spaced equally around the color wheel.&nbsp;


For great examples of the color schemes mentioned in the previous list, check out&nbsp;[Color Theory: Brief Guide for Designers|https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa?_hsenc=p2ANqtz-8IUuFtSpGMVQt_QVt43_AkfJCEA3ZLNWgi-7MryeEstPqxFhVK6RQlUK2znE15DHP9S1BR9qeLXU_wmhHGKOHSw2lpdQ&_hsmi=53589549].&nbsp;
For great examples of the color schemes mentioned in the previous list, check out&nbsp;[https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa Color Theory: Brief Guide for Designers].&nbsp;


h2. Color Psychology (or: why do we care?)&nbsp;
==Color Psychology (or: why do we care?)==


Colors influence the mood and behavior of the people observing them. Color psychology studies these behavioral changes and influences. Some evidence suggests that different colors indirectly affect the hypothalamus, which in turn affects the pituitary gland and hormone levels. One experiment showed that people in a room colored with red light overestimated time, and in a green or blue room they underestimated time. In another study, workers said that black boxes were heavier than green boxes. Physically, color can affects us as well. Infant jaundice is treated with blue light. Patients suffering from Parkinson's disease tend to worsen in the presence of red, and improve in the presence of green.&nbsp;However, definitive research on the effects of color on the mind and body have not been established.&nbsp;
Colors influence the mood and behavior of the people observing them. Color psychology studies these behavioral changes and influences. Some evidence suggests that different colors indirectly affect the hypothalamus, which in turn affects the pituitary gland and hormone levels. One experiment showed that people in a room colored with red light overestimated time, and in a green or blue room they underestimated time. In another study, workers said that black boxes were heavier than green boxes. Physically, color can affects us as well. Infant jaundice is treated with blue light. Patients suffering from Parkinson's disease tend to worsen in the presence of red, and improve in the presence of green.&nbsp;However, definitive research on the effects of color on the mind and body have not been established.&nbsp;
Line 62: Line 59:
Our opinions and perceptions of colors change as we age, in part because we change both mentally and physically as we grow. Children like the color yellow pretty much, but as they age, they tend to lose their attraction to it. As we age we tend to like hues of shorter wavelength (blue, green, and purple) over the longer wavelength (red, orange, yellow) colors.&nbsp;
Our opinions and perceptions of colors change as we age, in part because we change both mentally and physically as we grow. Children like the color yellow pretty much, but as they age, they tend to lose their attraction to it. As we age we tend to like hues of shorter wavelength (blue, green, and purple) over the longer wavelength (red, orange, yellow) colors.&nbsp;


[Color in Design: Influence on Users' Actions|http://tubikstudio.com/color-in-design-influence-on-users-actions/], [Color Theory for Designers, Part 1: The Meaning of Color|https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/], and [Responding to Color|http://www2.ca.uky.edu/HES/fcs/FACTSHTS/HF-LRA.151.PDF] both&nbsp;explore the meaning ascribed to specific colors, however it touches on only a few cases. [The Psychology of Color|https://www.helpscout.net/blog/psychology-of-color/] outlines how different brands use different colors and the association between the colors and the brand. It's notable that the meaning behind colors can differ in significant ways from one culture to the next. For example, in the United States, luck is generally associated with green (good luck clovers, money, etc.) but in China, red is the signal of good luck. The value and intensity of a color changes the associations. Context, as always, is key.&nbsp;
[https://oneux.co/blog/what-do-colors-mean What do people around the world associate with the colours we see everyday?] by Matthew Talebi on oneux.co uses a survey of people from Asia, Europe and North America to show color trends as positive, neutral, or negative for a number of emotions. For example, the color orange is most commonly associated with food or gluttony in Asia, and with enjoyment and happiness in North America.  


The colors used below are Dell's corporate colors (where available) or the closest shade currently being used on Boomi's applications.&nbsp;
[http://tubikstudio.com/color-in-design-influence-on-users-actions/ Color in Design: Influence on Users' Actions], [https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ Color Theory for Designers, Part 1: The Meaning of Color], and [http://www2.ca.uky.edu/HES/fcs/FACTSHTS/HF-LRA.151.PDF Responding to Color (pdf)]  all explore the meaning ascribed to specific colors, however they touches on only a few cases. [https://www.helpscout.net/blog/psychology-of-color/ The Psychology of Color] outlines how different brands use different colors and the association between the colors and the brand.  
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Red.gif|border=1,width=200!\\
Dell Red | Red (primary): Passionate, strong, aggressive. Youth, power. Love, confidence, passion, and anger. Heat. Noise.&nbsp;Excitement.&nbsp;It's been associated with both the Devil and Cupid.&nbsp;Importance, like a red carpet. Fire, violence, warfare. Brighter shades are more energetic and darker shades are more powerful and elegant.&nbsp; \\
\\
In the financial field, it can be used to signal a loss of value or a negative number. Driving, it signals the need to stop or turn around. Red often signals danger - this may be why it's associated with the "Error" [Alert|ux:Alerts]. \\
\\
In China and some other Asian cultures it signals good luck, prosperity, and happiness. In some eastern cultures, red is worn by brides on their wedding days. In South Africa, red is the color of mourning. In Africa, red has become the color associated with AIDS awareness due to the popularity of the&nbsp;\[RED\] campaign. In many cultures, red is associated with communism.&nbsp; \\
\\
It's been found to raise blood pressure and respiration rates in some studies, as well as enhance the human metabolism.&nbsp; \\
\\
Brass instruments are associated with red.&nbsp; \\
\\
Red is the original "active link" color and "hover link" color. \\
\\
Red draws attention, but should be used sparingly to avoid negative reactions. It can be overwhelming if used too much, especially in its purest form. \\ |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Orange.gif|border=1,width=200!\\
Dell Orange | Orange (secondary): Energetic, warm, exciting. Friendly. Motivation, enthusiasm, creativity, and adventure. In its muted forms, it can be associated with earth and with autumn, and with change and movement in general. Through the fruit, can be associated with health and vitality. Women are most likely to choose orange as their least favorite color over all others. \\
\\
Orange commands attention without being as overpowering as red, and is thus more friendly and less in-your-face. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Yellow%20Orange.gif|border=1,width=200!\\
Dell Yellow (yes I know) | Yellow (primary): happiness, sunlight, joy, optimisim, and warmth. Deceit and cowardice. It's thought to be the easiest color to visibly see. Inspiration, confidence, but also too much can bring anxiety or fear. Light yellows are more calming than bright yellows. Dark or golden yellows look antique or permanent.&nbsp; \\
\\
Yellow is associated with hope, for example, countries where families with loved ones at war carry yellow ribbons. \\
\\
In Egypt, yellow is for mourning. In Japan it represents courage, and in India it's a color for merchants. \\
\\
Softer yellows are commonly used as gender-neutral for babies. It's also frequently used to draw attention or focus to an element. Driving, it signals the need to use caution - this may be why it's associated with the "Warning"&nbsp;[Alert|ux:Alerts]. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Green.gif|border=1,width=200!\\
Dell Green | Green (secondary): nature, balance, and harmony. Peace, growth, and health. New beginnings. Calming and renewing feelings. Growth, inexperience, sometimes materialism. Envy, or jealousy. Brighter greens are more energizing and vibrant, while olive greens are more natural, and dark greens are the most stable and affluent.&nbsp; \\
\\
In the financial field, it signals the gain of value, or money in general. Driving, it signals the ability to move forward, that everything is OK - this may be why it's associated with the "OK" [Alert|ux:Alerts]. \\
\\
Green can have a very balancing and harmonizing effect, and is very stable. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Blue.gif|border=1,width=200!\\
Dell Blue | Blue (primary): Trust, reliability, calming. Security and stability. Peace. Distance, sadness. Coldness. Light blues are refreshing and friendly, relaxed and calming. Bright blues &nbsp;are energizing and refreshing, &nbsp;while darks are stronger and more reliable.&nbsp; \\
\\
Both men and women choose blue as their favorite color more often than other colors. &nbsp;Flutes are associated with blue.&nbsp; \\
\\
Blue has spiritual and religious connotations in many cultures and traditions.&nbsp; \\
\\
Because both Dell and Boomi use blue as their primary corporate color, we tend to use this color for a lot of purposes. Blue is the original "link" color, so on the web it is often associated with actionable elements. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/Dell%20Purple.gif|border=1,width=200!\\
Dell Purple | Purple (secondary): Royalty, wealth, luxury. Wisdom. Mystery, magic. Power and stability. Dark purples are more associated with wealth and royalty, while light purples (like lavender) are more romantic, and associated with spring.&nbsp; \\
\\
Purple was frequently used for royalty (often exclusively) in the past. In Thailand, purple is the color of mourning for widows.&nbsp; \\
\\
Purple is the original "visited link" color. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/FFDDDD.gif|border=1,width=200!\\
We don't have a Dell Pink but we have a lot of pinks so this one looked nice enough | Pink (tint of red): Hope, sensitivity, romance, unconditional love. Youthful femininity, may be good for attracting young women to a product - but also beware that the ["Shrink it and pink it"|https://www.washingtonpost.com/lifestyle/style/the-end-of-shrink-it-or-pink-it-a-history-of-advertisers-missing-the-mark-with-women/2016/06/08/3bcb1832-28e9-11e6-ae4a-3cdd5fe74204_story.html] philosophy is beginning to backfire. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/999186.gif|border=1,width=200!\\
We don't have a Dell Brown and I'm not quite sure this is brown enough to call brown but it's the closest we've got. | Brown (neutral): Security, protection, Mother Earth. Warmth, comfort, experience, and reassurance. Cool and calming in lighter hues. Violins are associated with brown. Beige can be seen as either cool or warm depending on what's with it. Sometimes seen as dull. Conservative. Ivory and cream are sophisticated, quiet, and may evoke a sense of history, elegance and calm, or when combined with peaches and browns, and earthy tone.&nbsp; \\
\\
Sometimes symbolizes piety.&nbsp; \\
\\
Men are most likely to pick brown as their least favorite color over all others.&nbsp; \\
\\
Brown is usually reserved for backgrounds, commonly with a paper texture. Ivory can be used to lighten darker colors without the stark contrast of using white. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/000.gif|border=1,width=200!\\
Black | Black (neutral): Reliable, sophisticated, experienced. Tragedy, death, tradition, modernism, seriousness. Contrast. Everything goes with black. \\
\\
In many western countries, Black is the traditional color of mourning. It is associated with rebellion in some cultures. It's also associated with Halloween and the occult.&nbsp; \\
\\
It's worth noting that we very rarely use pure black (#000) because the depth of the color on a monitor can be distracting. Commonly an off-black is used as the foreground color for text and other elements because it contrasts well with white and is a neutral color.&nbsp; \\ |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/808080.gif|border=1!\\
Dell Grey | Grey (neutral): Moody, depressing. Conservative, formal, modern. Professional. Sophisticated.&nbsp; \\
\\
Grey is sometimes considered a color of mourning.&nbsp; \\
\\
Grey is common in design, as is grey typography. |
| !http://doc.lab.boomi.com/download/thumbnails/24412501/FFF.gif|border=1,width=200!\\
White | White (neutral): Simple, calm, and clean. Purity, innocence, clarity, wholeness. A blank sheet of paper, but also isolation and emptiness. Can portray either winter or summer depending on what else is with it.&nbsp; \\
\\
In many Western cultures, white is worn by brides on their wedding day. It's also associated with doctors, nurses, and dentists, as well as others in healthcare. In some religions, angels are depicted in white and it's associated with goodness. In some Asian countries, white symbolizes death. \\
\\
White is a neutral backdrop that lets other colors in a design have a larger voice. Commonly a background color, especially where readability is critical. |


It's notable that the meaning behind colors can differ in significant ways from one culture to the next. For example, in the United States, luck is generally associated with green (good luck clovers, money, etc.) but in China, red is the signal of good luck. The value and intensity of a color changes the associations. Context, as always, is key.&nbsp;


[Color Associations|http://www.joehallock.com/edu/COM498/associations.html] provides research into color psychology regarding which words (like Trust or Security) are associated with which colors.&nbsp;
Another example is an Asian-Pacific association between writing a person's name in red and death. [https://www.90daykorean.com/korean-superstitions-that-just-may-save-your-life#8-avoid-writing-names-in-red-ink Korean superstition] holds that writing a person's name in red ink is essentially wishing them death. [https://en.wikipedia.org/wiki/Color_in_Chinese_culture#Red_/_Vermilion Wikipedia's article on color in Chinese culture] confirms that this same belief holds in China, with the exception of official seals.


h2. Tips
[http://www.joehallock.com/edu/COM498/associations.html Color Associations] provides research into color psychology regarding which words (like Trust or Security) are associated with which colors.&nbsp;


Read&nbsp;[Hex Color - The Code Side of Color|https://www.smashingmagazine.com/2012/10/the-code-side-of-color/]&nbsp;for some tips on making underlines on links more readable, better body copy, and warming or cooling body copy.&nbsp;
==Tips==


[A Simple Web developer's Color Guide|https://www.smashingmagazine.com/2016/04/web-developer-guide-color/] by Laura Elizabeth provides an easy process for picking a color set for a website. She recommends using [Paletton|http://paletton.com/] to figure out an accent color to go with a base color, since Paletton is a color scheme tool. She then walks you through choosing other colors to go in the palette you'll use on your site.&nbsp;
Read&nbsp;[https://www.smashingmagazine.com/2012/10/the-code-side-of-color/ Hex Color - The Code Side of Color]&nbsp;for some tips on making underlines on links more readable, better body copy, and warming or cooling body copy.&nbsp;


[Color Theory for Designers: How to Create Your Own Color Schemes|https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/] by Cameron Chapman also provides instruction for picking a website color scheme.&nbsp;
[https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ A Simple Web developer's Color Guide] by Laura Elizabeth provides an easy process for picking a color set for a website. She recommends using [http://paletton.com/ Paletton] to figure out an accent color to go with a base color, since Paletton is a color scheme tool. She then walks you through choosing other colors to go in the palette you'll use on your site.&nbsp;


h2. Additional reading
[https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/ Color Theory for Designers: How to Create Your Own Color Schemes] by Cameron Chapman also provides instruction for picking a website color scheme.&nbsp;


* [Color You Responsible|https://medium.com/alistapart/color-you-responsible-33fc780b495b#.e13icz31w] \- an A List Apart article on button colors
==Additional reading==
* [5 Techniques for Fine Tuning UX with Color|http://www.webdesignerdepot.com/2017/02/5-techniques-for-fine-tuning-ux-with-color/?utm_campaign=Weekly+Digest&utm_source=hs_email&utm_medium=email&utm_content=42721503&_hsenc=p2ANqtz-9P4XLg85jEmC1uLWySihllM0bit4IIg9DJN8qNPQSzZob0UX7bIYavfM8Prd-4ZhHKUsmIl4HcCn3OQtTMtKziiyoD7g&_hsmi=42722102] \- Web Designer Depot - discusses using colors as a method of identifying hierarchy, and also using a consistent link color as a design pattern
 
* [Color Theory: Brief Guide for Designers|https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa?_hsenc=p2ANqtz-8IUuFtSpGMVQt_QVt43_AkfJCEA3ZLNWgi-7MryeEstPqxFhVK6RQlUK2znE15DHP9S1BR9qeLXU_wmhHGKOHSw2lpdQ&_hsmi=53589549] by UX Planet\- covers the super-basics such as the color wheel, additive and subtractive colors, and various types of color schemes.&nbsp;
* [https://medium.com/alistapart/color-you-responsible-33fc780b495b#.e13icz31w Color You Responsible] - an A List Apart article on button colors
* [Color in Design: Influence on Users' Actions|http://tubikstudio.com/color-in-design-influence-on-users-actions/] by Tubik Studio - the basics of color psychology.&nbsp;
* [http://www.webdesignerdepot.com/2017/02/5-techniques-for-fine-tuning-ux-with-color/ 5 Techniques for Fine Tuning UX with Color] - Web Designer Depot - discusses using colors as a method of identifying hierarchy, and also using a consistent link color as a design pattern
* [Responding to Color|http://www2.ca.uky.edu/HES/fcs/FACTSHTS/HF-LRA.151.PDF] by the Cooperative Extension Service of the University of Kentucky - reviews the physical and mental impacts of colors on people of various ages.&nbsp;
* [https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa Color Theory: Brief Guide for Designers] by UX Planet - covers the super-basics such as the color wheel, additive and subtractive colors, and various types of color schemes.&nbsp;
* [http://tubikstudio.com/color-in-design-influence-on-users-actions/ Color in Design: Influence on Users' Actions] by Tubik Studio - the basics of color psychology.&nbsp;
* [http://www2.ca.uky.edu/HES/fcs/FACTSHTS/HF-LRA.151.PDF Responding to Color (pdf)] by the Cooperative Extension Service of the University of Kentucky - reviews the physical and mental impacts of colors on people of various ages.&nbsp;
* Color Theory for Designers&nbsp;by Cameron Chapman on Smashing Magazine
* Color Theory for Designers&nbsp;by Cameron Chapman on Smashing Magazine
** [Part 1 - The Meaning of Color|https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/]&nbsp; - reviews the basics of color
** [https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ Part 1 - The Meaning of Color]&nbsp; - reviews the basics of color
** [Part 2 - Understanding Concepts and Color|https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/] \- reviews terminology
** [https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/ Part 2 - Understanding Concepts and Color] - reviews terminology
** [Part 3 - Creating Your Own Color Palettes|https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/] \- explains color palette types
** [https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/ Part 3 - Creating Your Own Color Palettes] - explains color palette types
* [Elements of Design: Value and Color|http://etad.usask.ca/skaalid/theory/cgdt/color.htm] by Bonnie Skaalid - explains more about the terminology.&nbsp;
* [http://etad.usask.ca/skaalid/theory/cgdt/color.htm Elements of Design: Value and Color] by Bonnie Skaalid - explains more about the terminology.&nbsp;
* [Why Color Matters|http://www.colorcom.com/research/why-color-matters] by Jill Morton at ColorCom - provides a survey of important research about color gleaned from a number of psychology sources
* [http://www.colorcom.com/research/why-color-matters Why Color Matters] by Jill Morton at ColorCom - provides a survey of important research about color gleaned from a number of psychology sources
 
[[Category:Design]]

Latest revision as of 20:17, 22 January 2021

What it is

Per Wikipedia, color theory is:

a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also specific definitions (or categories) of colors based on the color wheel: primary color, secondary color, and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of "color theory" began int he 18th century, initially with a partisan controversy around Isaac Newton's theory of color (_Opticks_, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.

Terminology

Hue is the term that denotes an object's color. "Red" is a hue. 

Chroma, sometimes referred to as Intensity, refers to the purity of a color. Pure red (#ff0000) has high chroma, but pink has low chroma because it has white mixed into the red. 

Saturation refers to how a hue appears under particular light conditions. Think about the color of a red ballon on a bright sunny day vs how it appears under moonlight. When the light is less saturated (like when it has to bounce off the moon to get to you) the color isn't as vibrant. 

Value refers to how light or dark a color is - not in the "pink is lighter than red" way but in the "orange is a bright color and purple is a dark one" way. 

Tones are created when taking a pure color and adding grey to it. They tend to look dull or soft, sophisticated, vintage, or elegant. 

Shades are created when black is added to a hue. (This is often misdefined as tints or tones.) All true greys are shades of white. 

Tints are created when white is added to a hue. Very light tints are sometimes called pastels. All true grey are tints of black. 

When choosing colors, make sure that you don't choose with similar chroma or saturation. 

The Color Wheel

Most explanations of color theory start at the color wheel, an abstract illustration of the organization of color hues around a circle. The color wheel shows the relationship between [1], secondary, and sometimes tertiary colors. Which colors display as the primary colors depend on whether the color system is using additive (light based - think "computer monitor") or subtractive (surface-based - think "paints or printouts") color. 

Additive color is generally presented as an RGB (Red Green Blue) color set. Subtractive color is most often presented as CMYK (Cyan, Magenta, Yellow, and Black). The two systems are different because mixing light colors results in different colors than mixing paint colors. When all the colors in light are mixed together, the result is white light. (This is why prisms work.) When all the colors in subtractive color sets such as paints are mixed together, the result is black paint. 

Most design (and writing and spreadsheet etc.) software provides some sort of color tool to help users pick specific colors for presentation. 

It is worth noting that if a computer monitor is not calibrate, there is no guarantee that the color it displays matches the color that a calibrated monitor will display. In other words, what looks like a bright yellow on my screen may not show up on yours at all. It is also worth noting that the vast majority of the population does not calibrate their monitors. Should we calibrate ours? It's a hotly-debated topic, but not one that's reached consensus. 

In hex codes, the color wheel is represented by 2 digits each, red, green, and blue. The higher the hex code, the brighter the color from 00 to FF. So #ff0000 is pure red, #00ff00 is pure green, and #0000ff is pure blue. To create the brightest yellow, red and green must be added together, so #ffff00 is the result. #00ffff is the brightest cyan, and #ff00ff is the brightest purple. 

By adding one to each of the left-hand characters of the three pairs, we raise the color's brightness while lowering its saturation. This prevents a shade from wandering too closely to pitch black or super bright. 

Color schemes

A color scheme is the choice of colors used in design for a project. 

Types of color schemes

  • Monochromatic - All colors are based off a single hue. Example: everything is a shade of blue. 
  • Analogous - All colors are based off of two or three hues that are next to each other on the color wheel. 
  • Complementary - All colors are based off of two hues that are opposite each other on the color wheel. Popular examples are purple and yellow, blue and orange, red and green. 
  • Split-Complementary - Similar to Complementary, this uses a color and its opposite, and the color next to it and its opposite. 
  • Triadic - This scheme uses three color hues that are spaced equally around the color wheel. 
  • Tetradic / Double Complementary - This scheme uses four color hues that are spaced equally around the color wheel. 

For great examples of the color schemes mentioned in the previous list, check out Color Theory: Brief Guide for Designers. 

Color Psychology (or: why do we care?)

Colors influence the mood and behavior of the people observing them. Color psychology studies these behavioral changes and influences. Some evidence suggests that different colors indirectly affect the hypothalamus, which in turn affects the pituitary gland and hormone levels. One experiment showed that people in a room colored with red light overestimated time, and in a green or blue room they underestimated time. In another study, workers said that black boxes were heavier than green boxes. Physically, color can affects us as well. Infant jaundice is treated with blue light. Patients suffering from Parkinson's disease tend to worsen in the presence of red, and improve in the presence of green. However, definitive research on the effects of color on the mind and body have not been established. 

Research provided by Colorcom shows it only takes 90 seconds for people to make subconscious judgement about a product and 62%-90% of that judgement is based on its color.

Our opinions and perceptions of colors change as we age, in part because we change both mentally and physically as we grow. Children like the color yellow pretty much, but as they age, they tend to lose their attraction to it. As we age we tend to like hues of shorter wavelength (blue, green, and purple) over the longer wavelength (red, orange, yellow) colors. 

What do people around the world associate with the colours we see everyday? by Matthew Talebi on oneux.co uses a survey of people from Asia, Europe and North America to show color trends as positive, neutral, or negative for a number of emotions. For example, the color orange is most commonly associated with food or gluttony in Asia, and with enjoyment and happiness in North America.

Color in Design: Influence on Users' Actions, Color Theory for Designers, Part 1: The Meaning of Color, and Responding to Color (pdf) all explore the meaning ascribed to specific colors, however they touches on only a few cases. The Psychology of Color outlines how different brands use different colors and the association between the colors and the brand.

It's notable that the meaning behind colors can differ in significant ways from one culture to the next. For example, in the United States, luck is generally associated with green (good luck clovers, money, etc.) but in China, red is the signal of good luck. The value and intensity of a color changes the associations. Context, as always, is key. 

Another example is an Asian-Pacific association between writing a person's name in red and death. Korean superstition holds that writing a person's name in red ink is essentially wishing them death. Wikipedia's article on color in Chinese culture confirms that this same belief holds in China, with the exception of official seals.

Color Associations provides research into color psychology regarding which words (like Trust or Security) are associated with which colors. 

Tips

Read Hex Color - The Code Side of Color for some tips on making underlines on links more readable, better body copy, and warming or cooling body copy. 

A Simple Web developer's Color Guide by Laura Elizabeth provides an easy process for picking a color set for a website. She recommends using Paletton to figure out an accent color to go with a base color, since Paletton is a color scheme tool. She then walks you through choosing other colors to go in the palette you'll use on your site. 

Color Theory for Designers: How to Create Your Own Color Schemes by Cameron Chapman also provides instruction for picking a website color scheme. 

Additional reading

Retrieved from "http://kb.perpendicularangel.com/index.php?title=Color_Theory&oldid=2932"