The Primeline 216 Color Chart

ARRANGEMENT CONTENT USING: 216  :16MM WHY 216 COLORS?

ARRANGEMENT
Our chart is arranged a little differently from the usual color-by-color presentations. To help keep contrasting colors visible, we arranged colors with red at the top, green at the bottom, and addition of blue moving rightward, which yields an overall effect not unlike a gradient fill.

In general, transitions are predictable and gradual, with brightest intensities at chart center. Blues appear in "family groups" with reasonable success. There are a couple of "oddball" lines that we slotted in at apparently appropriate intensity levels and blue-family associations.

Individual color samples are large and widely separated, so that there is ample room to visualize the various colors against the chosen background.

User-interactive Javascript allows choice of background and/or text color, and display-on-demand of a sample window demonstrating the resultant appearance.

The interactive 16 Million Color Checker plus Hex/RGB Converter allows viewing of any possible combination of colors.

CONTENT
The chart is 100% HTML plus Javascript, and contains no graphics of any kind. As a result, it may be safely downloaded to the user's hard drive and called at any time in the complete version.

USING THE CHART in AUTOMATIC 216 Colors Mode
The chart loads with background color change activated, with default BG and text colors shown in the Selected Color Report.

All color hex values (e.g., "CCCC99") in the chart swatches are active, so that a click will cause the page background to change to the selected color.

At page top, the user may select (radio button) to alter text color instead. A click on a hex value will not change page text color, but will change the setting for text color as reflected in the Selected Color report.

A small sample window displaying the chosen Background and Text colors may be opened with the View button. Presentation of a new sample requires that any open sample first be closed.

    The usual usage pattern might be:
  1. Select (click) BG color from chart.
    Browser window BG color changes.
    BG Color value is registered in the Selected Color Report.
  2. Select (radio button) Change: Text.
  3. Select (click) Text color from chart.
    Text Color value is registered in the Selected Color Report.
  4. Click View Button
    See a sample window with chosen text and background colors.
  5. Click Close Button to close the sample window.
USING THE CHART in 16 MILLION COLORS Manual Mode
With the upper radio button in the Change: Bkgrd position, the user may manually type any valid hex values for either background or text (or both) and again select the Sample View to see a sample of the selected text on the selected background. Change in the Bkgrd value will be reflected in the Hex/RGB conversion calculator below.

The Conversion Calculator may be used to convert any valid RGB intensity to its Hex value, or vice-versa. Change in any value will be reflected in the upper (auto 216) background value, and will cause page BG color to change as well. The Sample View will reflect the new BG color plus the chosen Text color.

Text color may be changed manually at any time so long as the (auto 216 section)
Change: Bkgrd choice button is selected.

Text color may be changed automatically with the 216-color chart so long as the (auto 216 section)
Change: Text choice button is selected.

The Conversion Calculator values may be changed regardless of which Auto-216 choice is selected.

HOW IT CAME ABOUT
We'd seen lots of various color charts, even a couple that were interactive, and there are a number of excellent freeware "color pickers" out there. Frankly, we'd never found a single tool that was interactive and also featured large samples, open spacing, no images, gradient layout, examples, and limited to the "Magic 216" colors...yet still capable of returning information regarding the full pallette spectrum. One thing led to another...

ABOUT 216 COLORS
(There is considerable discussion of color in the Tutorial, which is not repeated here. )

All colors are a combination of the basic three - Red, Green, Blue (RGB) - and are always specified in RGB order. Each of the three may be represented in any of 256 intensities, ranging from 0 (nothing) to 255 (brightest), yielding a maximum potential for 16,777,216 specific shades (requiring top-end graphics cards and monitors.)

The ability of the least expensive monitors and graphics cards to reproduce 256 colors is nearly ubiquitious in the industry, so that virtually all systems are capable of reproducing at least 256 colors. Browser publishers have claimed a few colors, and MACs respond differently to a few others.

As a result, there are 216 remaining colors which will be accurately reproduced (not dithered) in any user's computer and browser. These are commonly called the 216 All-Browser-Safe Colors.

(Limitation to the 216 is not required, though many web publishers view them as sacrosanct in ensuring that their presentations appear with colors exactly as designed. In any case, it is always wise to use them for text on solid-color backgrounds.)
For the decimal range 0 to 255, hexadecimal equivalents go from 00 to FF. The "Magic 216" are represented as paired sets of hexadecimal values for each color, each pair of which is divisible by three. The resultant six possible "OK" values for each color are 00, 33, 66, 99, CC, & FF.

Standard hexadecimal notation for browser colors specifies a value for each color or color combination, even if one of the three is zero, e.g., FF00FF. Thus, brightest Red is FF0000, brightest Green is 00FF00, and brightest Blue is 0000FF.

The 216 colors represent every possible RGB combination of 00, 33, 66, 99, CC, &FF, for example, 000000, 00FFFF, CC3366, etc. That is, 6 possible red values times 6 possible green values times 6 possible blue values equals 216 available RGB combinations.