Color Specifications

Art 260 / Greg Clayton

Alternative methods of describing a specific color.

Intro

Professional designers rarely work alone. More typically, each designer offers some special set of skills while other professionals provide other skills. Together, we get the job done. When several professionals are involved in creating and implementing a design, communication between each professional becomes a prominent responsibility for each participant. Color specifications are ways of communicating color -- a means by which one designer can tell another precisely what color is needed.

Spec systems vary in their method and in their degree of specificity. Any company that makes colored products will have some sort of color-description system. Some spec systems are intended to work with any medium or material.

Major Specific Systems

RGB

CMYK

Pantone/Toyo

HSB/ HSV
(strictly speaking, HSB and HSV are not identical. In digital design, HSB is usually what's being used. HSV is what we colorists would really like to use because it offers much more visually correct value control.
"Brightness" is a convenient "digital-friendly" way of defining value. However, because it errs on the side of additive, RGB color, the brightness is quite skewed.
Kuler does use "real" HSV. (thank you, Adobe)

LAB

 

Playing with Color Specs:

One of the easiest ways to explore color spec systems is to open up Kuler's Create/Editing page. There you have access to 5 different color spec systems... you can control colors via any of them using sliders or by entering numeric values.

When you enter Kuler's Create mode (button at upper left of Kuler home page), you get a color palette whose colors can be edited en masse, or one color at a time. Below each color sample are sliders that allow you to specify your color using the currently selected color specification system.

Here is... .... the color sample   ....the color specification sliders Try out the sliders... ...see how the color swatch changes... ...but also watch how the colors available ON the sliders change. Changing one slider causes the colors on the other two sliders to change ...and the 5 different color specification systems that Kuler offers. (HSV, RGB, CMYK, LAB, HEX) Note that here, RGB is the current spec system. Click on HSV or CMYK or LAB... ...see if you can figure out how they work. (for Color Theory students, HSV had better look familiar!)

Also, Photoshop CS5, Illustrator CS5 and (I think) InDesign CS5 have color-palette tools similar to Kuler's actually built in. You can also import/export color palettes from Kuler to these Adobe programs.

 

General Color Specification Systems:

Liquitex Color Map
(In practice, the Munsell system is used by artists as a general spec system, and it can be used quite accurately.)

Proprietary Color Specification Systems:

Each major paint company develops a color specification system of a sort. Every paint swatch produced by, say, Sherwin-Williams, is a specific color that can be mixed, and thus recreated, using their paints and their mixing equipment. Behr, Valspar, etc. each have a set of colors — each color will be specified or described by a color swatch, by a unique color name, usually a number or an alpha-numeric code, as well as a formula or recipe for that color. Thus, they have their own color specification system.

Imagine ordering products online. Often clothing will be available in several colors or patterns. In the strictest sense, you're using a color specification system to select your preferred product — do you want a red baseball cap, a blue one or a yellow one? Though those descriptions ("red", "blue" or "yellow") are actually quite vague, within the product line offered by the baseball cap manufacturer, those terms provide an adequate color specification system.

 

The image, to the right, is from an online eye-glass frame color selection. There are seven colors (color-pattern-textures) that are "specified". The user — the person buying eyeglasses — uses the image to determine their preference. A color-finish name is positioned next to each illustration. Then the name associated with each image is used to specify -- and thus order -- the correct eyeglass frames. Note that the user does not have to know the difference between "Pearl Orange" or "Tokyo Tortoise" or "Blonde". Would you know what those colors look like without a picture? Of course not -- the names do not adequately describe the appearance. The names are only helpful, though arbitrary, terms used by one eyeglass frame manufacturer. They are non-descriptive color specifications. Only the the manufacturer knows the correct recipe of plastics and dyes and processes needed to recreate the colors specified. This is an obvious, simple, everyday sort of color specification that we can use with little or no explanation.

How can I find the color specification of a color?

When you have a sample of a color, how do you figure out how to describe it -- how can you specify that color?

Specification Systems

Fabric/Material Samples (Interiors): 
Find fabric samples, materials (Formica, floor tiles, carpet samples, wood finish samples, etc.) that match the color you have selected.   Only one sample per color is needed.  You may mount your samples on a traditional swatch board.  Where possible, identify the product (what type of carpet, fabric, etc.)

Include/present: the color fabric/material sample and the manufacturer, the name and/or code for the sample.
(check the back of the sample to see if the manufacturer has included a spec for their sample.)

Paint swatches (Interiors):
Find paint chips to match the colors used in your design.  (you may combine these with the fabric/material samples above, if you choose.)

Include/present: the color swatch and the manufacturer, color name and/or code for the sample.
(check the back of the sample to see if the manufacturer has included a spec for their sample.)

Pantone CMS specs (All majors):
Check out a Pantone swatch book.   Find the color sample that most closely matches the color in your design.  Record the PMS number for that color.  
CG applications (e.g. Adobe Illustrator & Photoshop) also offer Pantone swatches (check for the Swatches window, then select the Pantone color system)
(online: Sample/PMS#s | SamplesPDF | SamplesPDF | )
Example Spec:  PMS 2415 C 

RGB (Graphic Design):
Use an RGB color picker (available within most graphics applications) to estimate the RGB value of the color you are using.
Example Spec:  R: 127  G: 15  B: 132

CMYK (Graphic Design):
Use CMYK Pantone swatch books or a CMYK color picker (available within most graphics applications) to estimate the CMYK value of the color you are using. 
Example Spec:  C: 51%  M:  94%  Y: 0%  K:  0%

Hex (Web Design)
Hexidecimal is a computer-friendly version of RGB. While most web-design tools (e.g. Dreamweaver) allow a web designer to select colors using swatches or using RGB, Hexidecimal is usually an option. For programmers, this isn't too bad. For the rest of us, its foreign. Hexidecimal "numbers" use both letters and numbers because the numbers are "base-16", rather than the numbers that you are familiar with -- which are "decimal" or "base-10". The essential numbers that you know are "0, 1, 2, 3, 4, 5, 6, 7, 8, 9" -- 10 different numbers are used before we start combining them to create larger numbers. In hexidecimal, there are 16 essential numbers ( "0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D (13), E (14), F (15)" This suits computers just fine -- in fact, they prefer hex to decimal.
Online: ( Clr Sample-CMYK-Hex | )

Munsell H/V/C estimates (All majors):
[available tubes of color can be used to estimate h/v/c].  Use your collection of acrylic paint tubes.  Each tube (of Liquitex products) has a Munsell color designation, indicating hue, value, and chroma. 
Estimate the hue – (e.g. 4R  -- a nearly pure red hue; 8BV – a very violet blue-violet) 
Estimate the value – use your value staff painted early in the semester to provide a value 1-9. 
Estimate the chroma.  This is very much an estimate.  Look over the chroma values on you various tube colors.  The higher the chroma, the higher the Munsell Chroma number.  Browns will have chroma values between 2-4.  Moderate chromas may range from 5-8.  Anything above 9 will be pretty high in chroma.
Example:   H:  6BV  V: 5  C:  7

Liquitex color chart position (Fine Artists):
The Liquitex color chart offers an informal color specification system.  It does NOT include chroma – only hue and value are included.
Select the column of hue.  Select the row of the value.  For chroma, estimate N, L, ML, M, MH, or H – just as you did for your color charting exercises.
Example:  Hue:  Violet  Value:  5  chroma:  MH

 

How do I choose? ...which spec system?

Color Harmony is the priority — HSB

HSB offers you control of the core visual traits of a color — Hue, Saturation (Chroma) and Brightness (similar to Value)

You're designing for Print — CMYK

You might not specify your color swatches using CMYK — often I'll use HSB when I'm actually designing and laying out colors. However, in most graphic applications (e.g. Illustrator, Photoshop, etc.) you'll need to set CMYK as your document's color model.

You're designing for web or video — RGB

You may want to spec color in Illustrator/Flash/Dreamweaver/Photoshop using HSB, but be sure your document is set up for RGB as your color model.

 

How do I select colors using these spec systems?

PhotoShop (CS3)

Photoshop has long offered several color models (each color model is a system of color specification and a representation of color relationships)

Select the color model that you want to use from the drop-down menu How do I get to the various color model? They're accessed via the small triangle/arrow in the upper right corner of the color palette. Photoshop CS3 offers these color models for specifying colors: Grayscale (256 shades of white, gray and black) RGB: 16.7 million colors defined by Red, Green and Blue components. CMYK: Cyan, Magenta, Yellow and Black components.
RGB Color Model and Specifications: This is the standard color model for most digital, video and web design.
HSB (Hue, Saturation and Brightness) Color Model and Specification: HSB is similar, but deceptively different from, Hue, Value and Chroma (Munsell). Saturation is very similar to Chroma. Brightness is similar to Value. However, the relationship between value and chroma are not consistent. This model works well for video/web design -- it translates easily to RGB. Hue is a value between 0 and 255. Saturation and Brightness are percentages between 0 and 100. Note that in the two examples, to the right, Photoshop presents an "out-of-gamut" warning icon (triangle with exclamation point!). This tells the designer that the currently specified color will not print correctly using CMYK production. Photoshop offers a sample of the nearest printable color to the one specified (in the small square next to the out-of-gamut triangle/icon.). If you click on that suggested sample, the color spec will immediately switch to the in-gamut spec.
CMYK (Cyan, Magenta, Yellow and Black) This is the standard color model for 4-color process printing. Photoshop allows you to specify each component color as a percentage — 0% meaning no ink; 100% meaning full coverage with that ink (which is not normally ideal.)
Lab Value, Blue-Yellow, and Red-Green components. (which is similar to the 3 types of ganglion cells in the human eye -- thus we are modeling one aspect of human color vision.) Most of us won't use this color model often. It is reasonably reliable, but does not offer particularly intuitive hue control.

Illustrator (CS3)

PowerPoint

Flash

 

Articles and Links

Glossary | Color Theory Assignments | Course Schedule |