Hexadecimal Color Wheel

Click on the image below to view a much larger version.

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color scheme is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in HTML and CSS coding. You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Color Picker

The Rules of Hexadecimal Color

There are three important things to remember about hexadecimal color:

1. In decimal (“base ten”) counting, each digit can be any number from 0 to 9, or ten possibilities. That’s how we normally count, of course. In hexadecimal (“base sixteen”) counting, each digit can be any number from 0 to 9 -OR- any letter from A to F. That gives us sixteen possibilities. You would count in this order, from lowest to highest: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
   
   

   Base Ten vs. Base Sixteen

2. In decimal counting, two digits side-by-side can give you 100 possibilities (0 to 99). That’s ten for the first digit times ten for the second digit. In hexadecimal, you get 16 times 16, which gives you 256 possibilities. That’s convenient, since there are 256 possible values for red in RGB, 256 for green, and 256 for blue.
   
   

   Double-Digit Hexadecimal

3. The first two digits in hexadecimal tell you the red values. The second pair tell you the green values, and the last pair tell you the blue values. 256 for Red x 256 for Green x 256 for Blue equals just under 16.8 million.
   
   

   Combining Red, Green and Blue

High-Saturation Hues

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

Shades of White

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

Shades of Black and Gray

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Muted Colors

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Shades of Brown

Browns tend to be versions of muted orange. Try mixing middle values of red and green and leaving blue as 00.

CMYK Color Wheel

Click on the image below to view a much larger version.

CMYK Color Wheel

The color wheel above shows three colors in addition to the primary colors. In between each pair of primaries is a secondary color: a mix of two primaries. Cyan and magenta make blue. Magenta and yellow make red. Yellow and cyan make green.

I’ve shown a formula for each color. The numbers are the respective percentages of Cyan, Magenta, Yellow and black (K) in each hue. These are the numbers you would put in as the CMYK values in the Color Picker.

Mixing CMYK Color

When you add cyan, magenta, and yellow together, you get black – in theory. In reality, it’s a murky soft black, so printing a rich black requires the addition of black ink, referred to as the Key color. Mixing these four colors together in various ways gives us almost all the colors in the rainbow.

CMYK Venn Diagram

Out of Gamut

Many colors which are visible to the naked eye are not reproducible on a printing press with CMYK. These colors are called “out of gamut”. We can get pretty close, though. Photoshop and Illustrator have commands you can use that bring your colors back into gamut, so that they print a predictable color.

In the Color Picker, look for an icon of a little triangle, with an exclamation point inside, next to the current color: If you see that icon, your chosen color will not print in CMYK. Click on the triangle to choose the closest in-gamut color.

CMYK Out of Gamut

Four-Color Process Printing

In four-color offset lithography (also known as process printing), a full-color image is separated into four plates. These plates look somewhat like photo negatives after they are etched. The black areas of the plate hold no ink. Conversely, the lighter the etched area on a plate, the more ink it will hold. There is one plate each for cyan, magenta, yellow, and black.

CMYK Plates and Inks

Plates printed for process printing such as these are not printed with solid ink*. They are actually comprised of patterns of dots we cannot distinguish with the naked eye. Try looking at a magazine ad through a magnifying lens some time. It’ll look something like this:

Dot Pattern

Each of the four plates is printed in a grid of dots. So that the dots are not overlaid exactly on top of each other, the grid for each plate is turned at a different angle. The black grid is at 45°, magenta is at 75°, yellow is at 90°, and cyan is at 105°. When printed together, they form a rosette pattern.

CMYK Rosette

*Solid ink is printed when we use spot colors.

Dreamweaver CS4 Workspace

When working with Dreamweaver tutorials here, elsewhere on the Web, or in books, it pays to memorize the main components of the Dreamweaver CS4 workspace. After the jump, I describe the components I will refer to the most in my tutorials.

Click on the image below to view a much larger version.

Dreamweaver CS4 Workspace

Application Bar

Application Bar

The Application Bar includes menus* that give you access to Dreamweaver’s commands and features. They also allow you to make things visible or invisible like panels. Some menu items act on your instruction right away. Other menu items are followed by an ellipsis (…). When you select these menu items, you will get a dialog box which gives you options to modify your request.

Many menu items are accompanied by mysterious text on the right, such as “Ctrl-Alt+T”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Ctrl and Alt keys (on the PC), then click the T key to create a table. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).

Application Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Insert > Layout Objects > Div Tag means start with the Insert menu, select the Layout Objects item, and then select Div Tag from the fly-out menu.

The Application Bar gives you some button shortcuts to common functions, like viewing the site map and opening the Extension Manager. It also includes the Workspace Switcher, which allows you to change the configuration of your workspace to accommodate your work flow. It simply allows you to save and load different arrangements of panels. To save your own custom workspace, click on this button and select New Workspace…

* PCs only; Macs show the menus in a separate bar.

Document Toolbar

Document Toolbar

Files Panel

Files Panel

The Files Panel is one of many panels available in Dreamweaver, and it’s the one I use most frequently. Panels allow you do all sorts of tasks quickly, like edit your style sheets, and behaviors to your page, and insert common page elements. The Files Panel allows you to view and manage the files in your Web site. You can see the files on your local computer, on the server, or both. The up and down buttons allow you to upload (“put”) or download (“get”) the files you specify.

Files Panel

Tag Selector

Tag Selector

The Tag Selector gives you a quick snapshot of where your cursor is placed within the code, and allows you to select entire HTML tags. The hierarchy left to right goes from the general to the more specific (where your cursor is located).

For example, in the image below, the cursor is place inside a paragraph <p> tag. This <p> tag is inside a <td>  (table data cell) tag, which is in a <tr> (table row) tag. All of these are inside a table. You can select the entire table (and its contents) for editing by clicking on <table> in the Tag Selector, as I have done here. Once you’ve selected a tag, you change change its settings in the Property Inspector.

You can see, finally, that the table is inside the main <body>.

Property Inspector

Property Inspector

The Property Inspector allows you to see and edit the settings for any given selected object or text. Each type of object will have a different set of options in the Property Inspector.

For example, a table tag will have options for number of rows and columns, overall width, border width, and any spacing between individual table cells or between the border and the cell contents. An image tag will have options for image source, width, height, alt attribute, and alignment.

RGB Color Wheel

When you remove red, green, and blue light you get black, or no light at all. Mixing these primaries together in various ways gives us all the colors in the rainbow – literally. On a monitor, it’s only 16.8 millions colors. But that’s a lot, right?

Click on the image below to view a much larger version.

RGB Color Wheel

The color wheel above shows three colors in addition to the primary colors. In between each pair of primaries is a secondary color (a mix of two primaries), and two tertiary colors (a mix between a primary and a secondary). Red and green make yellow (I know, weird, huh?) Green and blue make cyan, and blue and red make magenta.

I’ve shown two formulas for each color. The first is the degree around the circle, the top (red) being 0° and a full rotation clockwise being 360°. You will see color expressed as a degree in some functions in Photoshop. In particular, it is used for the Hue slider in Image > Adjustments > Hue and Saturation.

The second formula indicates the values for red, green and blue you would enter into the RGB fields in the Color Picker. Each of these RGB values can be anywhere from zero to 255, making 256 possible values. 256 for red x 256 for green x 256 for blue = the approximately 16.8 million colors we talked about above. Zero in the Red box means that no red is contributing to the selected color. 255 in the Red box means that Red is as strong as it can possibly be in the selected color. Ditto for Green and Blue.

RGB Venn Diagram

• You can get a pure white with R:255, G:255, B:255.
• You can get a pure black with R:0, G:0, B:0.
• An equal number for all three colors (other than 0 or 255) will get you various shades of gray; the higher the number, the lighter the gray.

For more details on pinpointing just the right color, see below.

Red

Red

Red

In the RGB color wheel, red is at the top, at 0 degrees.

Pure red is created with a value of 255 for R and 0 for G and B. To achieve a darker red, reduce the value for R. To achieve a lighter red (pink), add a bit of G and B at equal amounts. Oranges can be created with pure red and some green. For example, 255-125-0 is a rich orange.

Yellow

Yellow

Yellow

In the RGB color wheel, yellow is 1/6th the way around clockwise, at 60 degrees.

Pure yellow is created with a value of 255 for R and G, and 0 for B. To achieve a darker yellow (which in light or paint ends up greenish), reduce the values for R and G. To achieve a lighter yellow, add a bit of B. A nice yellow-green requires a reduction of red.

Green

Green

Green

In the RGB color wheel, green is 1/3th the way around clockwise, at 120 degrees.

Pure green is created with a value of 0 for R, 255 for G, and 0 for B. To achieve a darker green, reduce the value for G. To achieve a lighter green, add a bit of R and B (that gets me in the mood for some Motown). Turquoise can be yours if you add a generous dose of blue to green.

Cyan

Cyan

Cyan

In the RGB color wheel, cyan is 1/2 the way around clockwise, at 180 degrees.

Pure cyan is created with a value of 0 for R, and 255 for G and B. To achieve a darker cyan, reduce the values for G and B. To achieve a lighter cyan, add a bit of R. You can get a cornflower blue by leave R at 0 and reducing G by half.

Blue

Blue

Blue

Blue, our final primary, is 2/3th the way around clockwise, at 240 degrees.

Pure blue is created with a value of 0 for R and G, and 255 for B. To achieve a darker blue, reduce the value for B. To achieve a lighter blue, add a bit of R and G. Voilet/purple is created by adding some red into a pure blue.

Magenta

Magenta

Magenta

Magenta, our final secondary color, is 5/6ths the way around clockwise, at 300 degrees.

Magenta is created with a value of 255 for R, 0 for G, and 255 for B. To achieve a darker magenta, reduce the value for R and B by equal amounts. To achieve a lighter magenta, add a bit of G. A pretty fuchsia color can be had by reducing the blue.

Browns

Browns tend to fall in the muted-orangey area. Here are a few to get you started:

Photoshop CS4 Workspace

Adobe made drastic changes in the names of these components since version CS3. I will be referencing the CS4 names in my tutorials.

It is possible to completely rearrange many of these components. For example, you can hide the panels (Shift+Tab) and move the Tools Panel over there (clicking-and-dragging the black bar at the top of the Tools Panel).

Click on the image below to view a much larger version.

Photoshop CS4 Workspace

Application Bar

Application Bar

Many menu items are accompanied by mysterious text on the right, such as “Alt+Ctrl+C”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Alt and Ctrl keys (on the PC), then click the C key to open the Canvas Size dialog box. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).

Application Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Images > Adjustments > Hue & Saturation means start with the Images menu, select the Adjustments item, and then select Hue & Saturation from the fly-out menu.

The Application Bar gives you some button shortcuts to common functions, like changing the screen mode and opening Adobe Bridge. It also includes the Workspace Switcher, which allows you to change the configuration of your workspace to accommodate major functions such as Painting and Typography. It simply allows you to save and load different arrangements of panels. To save your own custom workspace, click on this button and select Save Workspace…

The Application Bar used to be called the Menu Bar in earlier versions of Photoshop.

* PCs only; Macs show the menus in a separate bar.

Tools Panel

Tools Panel

The Tools Panel used to be called the Tool Box in earlier versions of Photoshop.

Control Panel

Control Panel

The Control Panel used to be called the Options Bar in earlier versions of Photoshop.

Color Picker

The Illustrator Color Picker

A) The Color Field

Color Field

The square is 256 levels of saturation (vividness) across the top, from pure white to pure hue (color; in this case, a bright blue). The square is 256 levels of value (lightness/darkness) from top to bottom, adding more black as you go down, until the color is pure black at the very bottom edge. This means there are 65,536 possible colors in this square alone.

B) The Color Spectrum Slider

Color Spectrum Slider

The best practice when you want to completely change the current color is to start with B (the Color Spectrum Slider), and then narrow your choice to a particular value and saturation in A (the Color Field).

If you multiply the 256 hues in the Color Spectrum Slider with the 65,536 colors in the Color Field, you get 16,777,216 colors available in the Color Picker.

C) The Current Color and D) The Previous Color

Current Color / Previous Color

Comparing the two colors comes in really handy if a shade of green is not quite natural enough, for example, and you want to add a touch of gray or brown. Or if you are coordinating two colors in a color scheme and want one color to be the same intensity as another, but a different hue (like a muted blue with a muted green.)

E) RGB Color Values

RGB Color Values

Each of these values can be anywhere from zero to 255, making 256 possible values. 256 for red x 256 for green x 256 for blue = the approximately 16.8 million colors we talked about above.

Zero in the Red box means that no red is contributing to the selected color. 255 in the Red box means that Red is as strong as it can possibly be in the selected color. Ditto for Green and Blue.

• You can get a pure red with R:255, G:0, B:0.
• You can get a pure green with R:0, G:255, B:0.
• You can get a pure blue with R:0, G:0, B:255.
• You can get a pure yellow with R:255, G:255, B:0.
• You can get a pure magenta with R:255, G:0, B:255.
• You can get a pure cyan (blue-green) with R:0, G:255, B:255.
• You can get a pure white with R:255, G:255, B:255.
• You can get a pure black with R:0, G:0, B:0.
• An equal number for all three colors (other than 0 or 255) will get you various shades of gray; the higher the number, the lighter the gray.

By the way, RGB is referred to as an Additive Color Mode, because when you add all the primaries together at full strength, you get pure, white light.

F) Hexadecimal Color Value

Hexadecimal Color Value

Hexadecimal values are like RGB values but expressed in a different format. The first two digits are for Red, the second two for Green, and the last two for Blue. Because each digit can be any of sixteen values, a two-digit combination can represent 256 values. See how that relates to RGB? And similar to RGB mode, a double-zero means no color (or black if all six digits are zero.) What is special in Hexadecimal is that after 9, the brighter colors go from A to F.

Here are some Hexadecimal colors:

• White: #FFFFFF
• Black: #000000
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF

G) CMYK Color Values

CMYK Color Values

The values for C, M Y and K are expressed as percentages. These percentages represent how much of that color ink would be printed on paper. For example, C at %100 means that a particular area would get 100% percent coverage of Cyan. We will not be using CMYK often in these tutorials, so I won’t go into greater detail here.

Other Features

The HSB values are for Hue, Saturation and Brightness. This is another way to control color. Hue means the given name for a color, Saturation means the strength or vividness, and Brightness means how close it is to white.

The OK button saves your color change and closes the Color Picker.

The Cancel button closes the Color Picker without making changes.

The Color Swatches button lets you access a multitude of preset colors.

The Only Web Colors checkbox is a throwback to when many people did not have monitors that displayed 16.8 millions colors. It makes the Color Field show only what were once called “Web-Safe” colors. Don’t worry about this.

Color Picker

The Photoshop Color Picker

A) The Picked Color

Picked Color

This circle inside the large square of colors indicates which color is currently selected in the Color Picker. You can click anywhere in this square to change the selected color.

The square is 256 levels of saturation (vividness) across the top, from pure white to pure hue (color; in this case, a bright blue). The square is 256 levels of value (lightness/darkness) from top to bottom, adding more black as you go down, until the color is pure black at the very bottom edge. This means there are 65,536 possible colors in this square alone.

B) The Color Slider

Color Slider

But what if you don’t want blue? No problem. The Color Slider to the right of the large square offers a range of 256 hues like a rainbow. Just click on the rainbow band, or drag the slider up or down. You will see the overall hue change in the large square.

The best practice when you want to completely change the current color is to start with B (the Color Slider), and then narrow your choice to a particular value and saturation in A (the Picked Color).

If you multiply the 256 hues in the Color Slider with the 65,536 colors in the Picked Color square, you get 16,777,216 colors available in the Color Picker.

C) The Adjusted Color and D) The Original Color

Adjusted Color, Original Color

These rectangles allow you to see your new color selection on the top, and compare it to your previously selected color on the bottom.

Comparing the two colors comes in really handy if a shade of green is not quite natural enough, for example, and you want to add a touch of gray or brown. Or if you are coordinating two colors in a color scheme and want one color to be the same intensity as another, but a different hue (like a muted blue with a muted green.)

E) RGB Color Values

RGB Values

RGB refers to Red, Green and Blue. Unlike the traditional color wheel where red, yellow and blue are the primary colors from which everything else is mixed, monitors have primaries of red, green and blue. That is because the colors on monitors is created with light instead of paint or ink.
By the way, RGB is referred to as an Additive Color Mode, because when you add all the primaries together at full strength, you get pure, white light.

To learn more about how to select colors in RGB, see my mini-guide on The RBG Color Wheel.

F) Hexadecimal Color Value

Hexadecimal Value

Hexadecimal values are like RGB values but expressed in a different format. The first two digits are for Red, the second two for Green, and the last two for Blue. Because each digit can be any of sixteen values, a two-digit combination can represent 256 values. See how that relates to RGB? And similar to RGB mode, a double-zero means no color (or black if all six digits are zero.) What is special in Hexadecimal is that after 9, the brighter colors go from A to F.

Here are some Hexadecimal colors:

• White: #FFFFFF
• Black: #000000
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF

G) CMYK Color Values

CMYK Values

The values for C, M Y and K are expressed as percentages. These percentages represent how much of that color ink would be printed on paper. For example, C at %100 means that a particular area would get 100% percent coverage of Cyan. We will not be using CMYK often in these tutorials, so I won’t go into greater detail here.

Other Features

The HSB values are for Hue, Saturation and Brightness. This is another way to control color. Hue means the given name for a color, Saturation means the strength or vividness, and Brightness means how close it is to white.

The LAB values are for LAB color, a color space used by advanced Photoshoppers for color correction, noise reduction, and other techniques. L stands for Luminosity, and its channel carries all the value and detail of an image. The A channel contains the magenta and green hues, and the B channel contains the blue and yellow hues.

The OK button saves your color change and closes the Color Picker.

The Reset button reverts your selected color to the Original Color and leaves the Color Picker one.

The Add to Swatches button lets you save the selected color in the Swatches palette for future repeated use.

The Color Libraries button gives you access to large libraries of colors, in particular the variety of Pantone colors used in printing spot colors.

The Only Web Colors checkbox is a throwback to when many people did not have monitors that displayed 16.8 millions colors. It makes the Color square show only what were once called “Web-Safe” colors. Don’t worry about this.

To close the Color Picker without making changes, click on the Close button (the red X in the upper-right corner on the PC).

The Illustrator CS3 Interface

Click on the image below to view a much larger version.

The Illustrator CS3 Interface - click for a larger image

Menu Bar

Menu Bar

Many menu items are accompanied by mysterious text on the right, such as “Shift+Ctrl+G”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Shift and Ctrl keys (on the PC), then click the G key to ungroup a group of items. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).

Menu Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Object > Path > Join means start with the Object menu, select the Path item, and then select Path from the fly-out menu.

Tools Panel

Tools Panel

Options Bar

Options Bar

Panels

Panel

Cursor

Cursor

For example, the Cursor looks like a little eyedropper when you select the Eyedropper tool. It looks like a paint brush when the Paint Brush tool is selected.

The Photoshop CS3 Interface

It is possible to completely rearrange many of these components. For example, you can hide the palettes (Shift+Tab) and move the Tool Box over there (clicking-and-dragging the blue PS at the top of the Tool Box).

Click on the image below to view a much larger version.

The Photoshop CS3 Interface - click for a larger image

Menu Bar (Application Bar in CS4)

Menu Bar

Many menu items are accompanied by mysterious text on the right, such as “Alt+Ctrl+C”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Alt and Ctrl keys (on the PC), then click the C key to open the Canvas Size dialog box. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).

Menu Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Images > Adjustments > Hue & Saturation means start with the Images menu, select the Adjustments item, and then select Hue & Saturation from the fly-out menu.

Tool Box (Tools Panel in CS4)

Tool Box

Options Bar (Control Panel in CS4)

Options Bar

Palettes (Panels in CS4)

Palettes

Cursor

Cursor

For example, the Cursor looks like a little eyedropper when you select the Eyedropper tool. It looks like a paint bucket when the Paint Bucket tool is selected.