Color for web and print

Color for Web and Print

04/09/23 1Color for Web and Print – Elaine Rettger ASU EDT

502

04/09/23Color for Web and Print – Elaine Rettger ASU EDT

5022

Color originates from sunlight.

All the colors of the spectrum are present in white light (sunlight).

An object will reflect a particular wavelength of light and absorb all other wavelengths.

Our eyes see the reflected wavelength.

How we see color


5023

Additive color involves light emitted from a source or illuminant.

Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. Additive color (light) uses the colors red, green and blue to produce all other colors.

Color and light emitting media


5024

Computer monitors, LED and LCD displays, televisions, cell phones and a wide variety of electronic media devices use pixels to display color.

The pixels (red, green, blue) do not overlap but rather sit side-by-side. When a green color appears, only the green pixels light up.

When a cyan color appears, both green and blue pixels light up.

When white appears all the pixels light up.

Because the pixels on our displays are so small and close together our eyes blend them together, having a similar effect as additive light.

How color is created on a color display

Pixel is a computer word formed from PICture ELement, because a pixel is the smallest element of the digital image.

The colors in pixels are really just RGB data values.

If you enlarge an image in photoshop or another photo editing program, you will see that the image gets very rough or “pixilated.”

Each of these little pixels has an RGB numeric value.


5025

What is a pixel?


5026

A digital image is made up of individual pixels. Each pixel has its’ own RGB numeric value.


5027

What is hexadecimal?

Computers store information in single ones and zeros.

Each one (1) and zero has a single value called a bit.

By counting in base 16 (hexadecimal) we can pack more values into a single space.

Hex means six (6)

Dec means ten (10)

Hexadecimal means sixteen (16)


5028

Hex Decimal0 = 01 = 12 = 23 = 34 = 45 = 56 = 67 = 78 = 89 = 9A = 10B = 11C = 12D = 13E = 14F = 15

For example:Decimal 0 is equal to 0 in hex.Decimal 5 is equal to 5 in hex.Decimal 10 is equal to A in hex.Decimal 15 is equal to F in hex.Decimal 16 is equal to 10 in hex.Decimal 17 is equal to 11 in hex.Decimal 255 is equal to FF in hex.

Hexadecimal numerology and decimal equivalents

How does hexadecimal relate to color?


5029

Scientist found that the human eye can only distinguish between 256 shades of a primary color.

16 x 16 = 256 so all shades of a specific color can be expressed with just two hexadecimal digits.

256 = FF in hexadecimal coding.

In theory the eye can see more than 16 million colors.

For each Red, Green and Blue cone in the eye there are 256 possible shades of each color;256 (Red) x 256 (Blue) x 256 (Green) = 16,777,216 possible colors


50210

Early color monitors could only display 256 colors.

Certain colors were reserved for the operating system to used in toolbars, menus, etc.

Each operating system, Windows and Macintosh, would reserve between 16 and 20 different colors.

It allows exactly six shades each of red, green, and blue (6x6x6 = 216).

Only 216 of the basic 256 would display without dithering. Dithering is a method of using more than one color to create another color that is not available. Dithered colors usually look grainy or speckled.

What is web safe color?


50211

Sample of an image dithered using 216 web safe colors

Original image Image dithered using216 web safe colors

Color-coding for web color


50212

CSS colors codes for web and displays are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.

The code is always written in the same exact order – Red, Green, Blue.

Each color has two channels or a pair of hexadecimal color so that each color has the potential for 256 values (0-255). Thus the double code for each color.

Red Green BlueFF CC 66

=


50213

Color-coding for primary web colors

To produce pure colors, leave two colors at 0, and set the value for the third (desired color).

If all values are set to 0, the screen will be black.

If all values are set to the maximum (hex FF, decimal 255) the screen will be white.

Remember, black is the absence of all color and white is the presence of all color.


50214

Web safe color valuesWeb-safe colors are expressed in percentages of 20%,

51 for decimal, and 33 in hex.

decimal hex percentage0 00 0

51 33 20102 66 40153 99 60204 CC 80255 FF 100

Remember 6 x 6 x 6 = 216

Web safe colors will always use the same number for both values of a color channel and use only 0, 3, 6, 9, C and F in coding. This makes it easy to write and identify web safe colors.


50215

Sample of web safe colors and non-web safe colors


50216

Common patterns and shorthand for coding

• For each RGB value both numbers or letters are the same.

• The web safe colors only use 0, 3, 6, 9, C and F.

• Shorthand hex notation uses a 3-character color for a hex triplet when each channel is identical RRGGBB.

• .dark-yellow {color:#ffcc00;} can be written as.dark-yellow {color:#fc0;}

• Shorthand produces smaller file sizes, smaller style sheets and faster loading pages


50217

Color for printCyan, Magenta, Yellow and Black (CMYK) are the colors space used in the world of ink and paper, and it is sometimes called a subtractive color process.

Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black.

Cyan, magenta and yellow inks are combined to create thousands of other colors.

These inks are mixed to specifications that are followed throughout the print industry so there is no variance from one commercial printer to another.


50218

Side-by-side comparison of the primary colors used in print and web

When two of the three RGB colors are mixed at the strongest intensity the result will be a secondary color. A secondary color is formed by the sum of two primary colors of equal intensity: cyan is green+blue, magenta is red+blue, and yellow is red+green.

04/09/23 19Color for Web and Print – Elaine Rettger ASU EDT

502

Sample of RGB (web) colors converted to CMYK (print) colors

RGB Colors

Converted to CMYK values


50220

References

Itten, Johannes. The Elements of Color. Pages 15, 21, 30. Van Nostrand Reinhold Company. New York.

Lem, Dean Phillip. Graphics Master 3. Page 19. Dean Lem Associates, Inc. Los Angeles.

Pantone Color Suite for the Internet. Pages 5, 13-16. Pantone Inc.

Bruno, Michael H. Pocket Pal: A Graphic Arts Production Handbook (16th ed.). International Paper. Memphis.

http://www.2createawebsite.com

Education

Color for web and print