Color for the Non-Designer

color for the non-designer / diy graphic design / graphic design basics / graphic design terminology / color schemes / branding / Think Visually Design Studio

In a previous blog post I discussed the differences between the additive (RGB) and subtractive (CMY) color models, why they are important to understand and which one you should use in various graphic design projects if you’re DIYing your own graphic design.

In this post I want to discuss a few more graphic design terms as they relate to color and color management in your graphic design projects.


Color Scheme or Color Palette

A color scheme or palette is a group of colors used in design and selected to help portray a mood, represent a theme and/or create a feeling or emotion. The concept of a color scheme is important in terms of branding. When you create your brand identity you’ll focus on three main aspects: visual branding, brand voice and brand personality. One of the most important components of visual branding is your brand’s color scheme. 

color palette / color scheme / branding / diy graphic design

 


Tint

Tint is the result of a color when white is added. Obviously I am speaking in artistic terms and not digital colors. But if I had buckets of violet and white paint, by adding various ratios of white to the color violet, the result would be different tints of the color violet.

Color theory / tints / DIY Graphic Design / Graphic Design basics


Shade

The shade of a color is the result of adding black to a hue. The more black that is added, the darker the shade of that color or hue. Like the term tint, shade is taken from the art world where one literally mixes ratios of paint together to produce various shades of the original color.

Shade / Color Theory / DIY Graphic Design / Graphic Design Basics


Value

You might hear the term value, color value or color value scale used synonymously. It is the lightness and darkness of a color. In the two examples above (tint and shade) the pure hue is on the left. When looking at color value or color value scale, the pure hue is typically in the middle.

color value / color value scale / DIY Graphic Design / Graphic Design Basics


Hue

The word hue is just another name for color. More precisely, it defines the pureness of a color (no black or white added). If you open up the color picker in Photoshop, by default there are four color models from which you can use to choose or change a color. They are HSB, RGB, LAB and CMYK. Looking at the HSB model, “H” stands for hue, “S” =  saturation and “B” = brightness. More about saturation and brightness in a bit.

In the animated gif below, you can see the vertical slider of of all the different hues available. These are the PURE colors or pure hues of the color spectrum.


Saturation

Saturation is the second color property that you can use to manipulate and choose a color. You can see it in action in the Photoshop color picker below. Don’t worry if you don’t have Photoshop. Most graphic application programs have something similar; typically even your operating system will have a color picker similar to the one shown.

As I stated above H = hue, S = saturation and B = brightness.

Saturation determines the intensity of a color. A “fully saturated” color will be a pure hue or pure color. In the example shown above, the saturation (or “S” value) of the violet hue is 100% –  meaning it cannot be more saturated. It is fully saturated.

The animated gif illustrates the violet color’s saturation value. When I move the saturation slider is moved down the scale, the violet color become LESS saturated.

If you look at the large color area to the left of the saturation slider you’ll notice that as the saturation slider moves down the scale, color becomes less saturated. It isn’t necessarily becoming lighter, it is actually becoming more gray or duller.


Brightness

The final value that is easily manipulated in almost any application’s color picker is its brightness. Brightness refers to how bright or how dark the hue is. Take a look at the animated gif below. As I move the slider down the scale, the violet hue becomes darker or less bright. You can see how all the colors are impacted by brightness in the large  color area to the left (red arrow).


Opacity

Opacity of a color determines how opaque or transparent it is.

Below you can see an example of the opacity of a color from 100% which is completely opaque, to 0% which is completely transparent. As you would expect the opacity of a solid color will interact with whatever is beneath it. In the example shown, the violet hue in opacities from 100% to 0% interact and change the color and effect of the image, the yellow stripe and even the white background.

Opacity / DIY graphic design / basic graphic design / graphic design terminology


Gradient

A gradient is a subtle blending of two or more colors, or a single color from 100% to 0% opacity.

The first gradient shown below is an example of a two color gradient.

color gradient

Gradients can also be a single color that ranges from 100% to 0% opacity, as shown in the two gradients below.

Gradient

gradient

 


Cool Colors

Cool colors  are hues with blue, green and purples. They evoke a sense of coolness because of our association with water, grass, sky, etc. These colors have the ability to calm, soothe and relax.

Cool colors / DIY Graphic Design / Graphic Design Basics


Warm Colors

Warms colors are made with reds, oranges and yellows. Because of their relation to fire, heat, and the sun, they evoke energy, warmth, activity, excitement and also anger.

Warm colors / DIY Graphic Design / Graphic Design Basics


Monochrome or Monochromatic

A monochrome color scheme are colors of the same hue, with various shades and tints or values.

Monochromatic color scheme / DIY Graphic design / Graphic Design basics / Graphic Design terminology


Analogous Colors

Analogous colors are colors that sit next to one another on the color wheel. Cool colors and warm colors are examples of analogous colors. Below is another example of an analogous color scheme.

This sample analogous color scheme was created using the Adobe Color online color picker.

Analogous color scheme / DIY graphic design / Graphic Design basics / Graphic Design terminology


Complimentary Colors

Complimentary colors sit directly across from one another on the color wheel, making them exact opposites of each other. Be careful if you choose this type of color scheme. Because these are “color opposites” using the color equally in your designs can cause a lot of tension.

It is best used when one of the colors is the main color, and its opposite is used to highlight, call-out and bring attention to small but important areas of the design.

complimentary colors / color opposites / color scheme / DIY graphic design / graphic design basics


Triadic Colors

Triadic colors or triads are three colors that sit equal distance apart from one other on the color wheel. The most well-known triadic color combination are the three primary colors and the three secondary colors. A triadic color combination can make a pleasing and lively color scheme. The first example below is a screenshot from the Adobe Color website. The second is another helpful online color picker from Sessions.com.

triadic color scheme / DIY graphic design / Graphic design basics

triadic color scheme / DIY graphic design / Graphic design basics


Split Complimentary

A split complimentary color scheme is another type of triadic color scheme. It is similar to the complimentary color scheme, except instead of choosing two colors that sit directly opposite one another, choose one color but instead of choosing its opposite, choose two colors that are situated on either side of it’s opposite.

The resulting color scheme is not as intense as a complimentary color scheme and usually produces very nice results.

split complimentary color scheme


Hexadecimal Colors

Hexadecimal colors or hex colors are used in web design. They are a 6-digit number/letter combination preceded by a hashtag. In the sample color palette below, taken from the online Adobe color picker, you can see the 6-digit hexadecimal colors I have circled in red. Although this color picker doesn’t show the hashtag, when placing a hex code in CSS to determine the color you want to display on your website, a hashtag is required. The correct way to write a hexadecimal color is: #9259b2 or #9259B2. If the hex code contains a letter  it can be capitalized or small case.

hexadecimal color


Four-Color Printing or CMYK

In a previous post, I talked about the CMYK color model. Four-color printing, full-color printing, standard process printing and CMYK printing are all synonymous and refer to the process of separating a digital file meant for printing into four separate files. This is so that each color (cyan, magenta, yellow and black) can be prepared separately during the printing process.

Most print jobs use the four-color printing process. However, there are times when you need to produce an exact color in the final printed piece. For example a your project includes a logo or you need a consistent color across printed across many pages of multiple print jobs. When a specific and exact color matching is required, you will specify this in what is known as spot color(s).

Instead of printed with the CMYK process, spot color is printed with its own specific ink. Pantone is an example of a printing ink that is used for spot color. However there are other color matching systems used in printing.

If you use spot color in a design, it is typical to use a combination of 4-color process with spot color.

Pantone Colors

Pantone colors is also known as the Pantone Matching System or PMS. Pantone is a standardized color matching system used in print design. In recent years it has branched out to other areas of design and manufacturing such as fabric and paint. The system enables specific and consistent hues and colors to be chosen and referenced in the production of printed designs.


References:

Share this:

Leave a Comment