Color theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. Color Theory is an expansive subject matter that has many definitions, some of which can become very complex. This webpage will briefly cover main definitions and their applications to web design.

Color Definitions

Hue: defines pure color in terms of "green", "red" or “magenta”.

Chroma: tells us how pure a hue is. Highly chromatic colors contain maximum hue with little or no impurities such as white, black or gray.

Saturation or intensity of a color is described as the strength or purity of that color. A pure color is fully saturated. Increasing saturation makes the color richer and darker, while reducing saturation makes it look faded and lighter. Saturation is also known as “intensity”. Adding white or black to a color lowers it’s intensity. An intense and highly saturated color has a high chroma. Example: Even though cool colors tend to recede, a vivid blue will draw more attention to itself than a dull orange.

Value: When we describe a color as "light" or "dark", we are discussing its perceived intensity of a light. This property of color tells us how light or dark a color is based on how close it is to white. The value or brightness of a color is based on the amount of light emanating from the color. Also known as “Lightness or Brightness” Example: Canary yellow would be considered lighter than navy blue which in turn is lighter than black. Application: Contrast of value separates objects in space, while gradation of value suggests mass and contour of a contiguous surface, defines form and creates spatial illusions.

Luminance: This dimension of color is related to value but is distinct in its mathematical definition. The luminance of a color measures the intensity of light per unit area of its source. We calculate it by taking the average of a series of achromatic colors.

Contrast: is determined by the difference in the color and brightness of the object and other objects within the same field of view. Contrast of hue is what relates most directly to the color wheel combinations. The further away from each other two colors are, the higher the contrast. Application: On webpages, proper use of contrast can reduces eyestrain and focuses user attention by clearly dividing elements on a page. Large differences in lightness are considered to be pleasant for the eye, but low contrasts of value can also be useful for more subtle differences. Example: A light color for the background, and a very dark color for the text itself or the contrast is a very light color for the font and a dark color for the background.

Chromatic Value: The measure of the lightness or darkness of a hue is known as its chromatic value. Adding white to a hue creates a tint of that color. A shade is produced by adding black to a given hue. Tone of a hue, you add any shade of gray or a hue-scale color (e.g. brown-scale = sepia), to the original color. A tone is softer than the original color. Application: Chromatic value might accent the time of day. Tints for day and shades for night.

Color psychology

The way different colors influence our mood or perception, is called psychology of colors. Example: Red-associated with energy, war, danger, strength, power, determination as we ll as passion, desire, and love. While is green-associated with nature, growth, harmony, freshness, and fertility. Application: color perception/ psychology can be used in website design, the same way brands use colors their messages.

Temperature: Warm colors are the colors from red to yellow to orange. Due to their association with the sun/fire, warm colors represent heat/motion. Cool colors are the colors from green to blue, and some shades of purple. Cool colors are calming and relaxed. Cool colors appear to be more distant, while warmer colors appear to be closer. Application: In a design, cool colors tend to recede, making them great for backgrounds and larger elements on a page, since they won’t overpower your content. Warm colors are great to highlight or make certain things pop on webpages.

Color Schemes

Monochrome color scheme: consists of various tints, shades, and saturations of a single base color.

Complementary schemes: are based on two colors from opposite sides of the color wheel. Because the two hues will be wildly different, such schemes can very impactful and noticeable.

Analogous schemes: feature three colors that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel.

Triadic color scheme: draw an equilateral triangle (a triangle where all three sides are the same length) on the color wheel, and select the three colors at the points of the triangle. This creates a diverse, yet balanced, scheme.

Neutral color schemes: include only colors not found on the color wheel (various tones of brown and gray).

Inspiration for Color Palettes

Adobe Color CC: formerly “Kuler": features scheme type presets. Color has a social layer built in, so you can explore others’ palettes. Also it has the ability to extract a color scheme right from an image. https://color.adobe.com/

CMYK and RGB

Subtractive Colors (CMYK - Cyan, Magenta, Yellow, Black ): When we see colors in physical objects we’re seeing reflective light. When we see red it’s because all the other wavelengths of light have been absorbed and only the red is reflected. This is a subtractive system, because to produce color we’re removing all the wavelengths of light who’s color we don’t want to see. Subtractive systems start with white and continue to add color until the result is black. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive system used to create numerous colors for print. Example: CMYK color for turquoise, it is composed of Cyan 62, Magenta 0, Yellow 31, and Black 0.

Additive Colors ( RGB - Red, Green, Black): Additive color is color created by mixing a number of different light colors, with shades of Red, green, and blue being the most commonly primary colors used in additive color system. To create colors on a computer screen we have to add light since the light source comes from within instead of reflecting the light coming from outside the system. RGB system uses just three colors (red, green, and blue) is a additive system that combined together can create all the colors (including black and white) on your monitor and other digital media. The RGB color scheme contains 256 levels (variations numbered from 0 to 255) of red, 256 levels of green, and 256 levels of blue.To generate (or mix) a color, you take one level of red and mix it with one level of green and one level of blue. Example: RGB for turquoise color, it is composed of red number 75, green number 199, and blue number 211.

When to Use CMYK or RGB

As a designer, it is essential to know when to use RGB vs CMYK. You should always design in RGB color mode if your final artwork is going to be used on computer screens or digital devices, and printed material should be in CMYK, because, unlike computer screen, a printer cannot use light to paint colors on paper. Simple way to remember is monitors emit light and paper absorbs light. You have to convert RGB colors to CMYK to achieve the same results in printed form, otherwise you might end up with a pretty online design that looks dull when printed. Conversation of colors is particularly important for displaying/printing logos and other brand materials.

Free Online Tools Convert Colors RGB to CMYK http://www.rapidtables.com/convert/color/rgb-to-cmyk.htmhttps://www.easycalculation.com/colorconverter/rgb-color-converter.php