The full HTML color chart by Pam Rotella
Click here for the first page of the full HTML color chart (which corresponds to number "1" in the directory to the right) or select a page number from the other tables below. Each page of the chart has 7,000 HTML color codes with a small color sample to its left.
[Scroll past the ad below to see more.]
HTML color basics
There are over 16 million possible HTML color codes, specifically 166 (16 to the 6th power), or 16,777,216. This color chart contains nearly 2,400 pages with all 16+ million colors displayed.
The code FFFFFF represents pure white, and that's where the chart begins. It will end with the code 000000, pure black.
Each color code has six digits using a hexadecimal numbering system, meaning that each digit has 16 different possibilities. Each hexadecimal "number" ranges from 0 to 9 and A to F.
The basis of HTML color notation is the RGB (red-green-blue) color model, a system of colored light used by televisions, computer monitors, and other electronic display screens. In HTML color codes, the highest level of light is indicated with an F, while the absence of light is represented by 0. That's why white is blended from the highest level of all three colors, FFFFFF. Black is the absence of all color, or 000000.
FFFFFF or white is the first code, and then the chart proceeds to yellows and reds to start, because the first two digits of the HTML color code refer to red, and the next two refer to green. (The last two refer to blue.) Mix red and yellow together in the RGB color system, and the color becomes yellow. (See the article on FileMaker loops for additional information on HTML color theory.).
As you look through pages of the chart, you'll notice that color groups "jump" as numbers "roll over" (change from 0 to F). On this chart, numbers are designed to decrease from FFFFFF to 000000 one at a time, as the far right column decreases by one like a regular 6-digit number. There are probably better ways to organize the chart by color group, although where one color group ends and another begins can be subjective. As organized, the chart is a good study in color combinations, with cyclical fluctuations as component colors increase suddenly or gradually decline.
When most color digits are high (closer to F), the overall color is lighter. If one color is high and the others are slightly lower, a color tint emerges that leans toward the highest numbers' color(s). When a color's 2-digit column is high while others are low (approach zero), the color with the high number will dominate the color theme.
Numbers in the medium range typically produce vivid colors, and a pattern of colors becoming stronger with each cycle emerges. There's also an overall progression from the red/yellow end of the spectrum to the greens and blues, as the digits representing red on the left of the number decrease gradually. Red is consistently high at the start of the chart, but consistently low at the end.
This chart's many HTML tables were generated by FileMaker database software, using HTML table tags in looped script formulas. Loops within FileMaker scripts placed table tags around HTML color codes as the color codes were generated, and then both the table and color codes were written to a field containing the finished tables. The tables were then placed in an HTML document formatted with a standard FileMakerPapers.com template.
Creating a basic table in HTML is easy. An HTML table starts with a <table> tag, which may include other parameters like the table's width, border, and alignment. A table also has <tr> and <td> tags, for table rows and table data (cells), which again can include other specifics like width and alignment. As with other HTML commands, an end tag is required with a slash in front of the original command -- </table>, </tr>, </td> -- to specify where the special formatting will end.
Tables for this complete color chart were designed to be as simple as possible, in order to display as many color codes per page with a maximum file size in the half-megabyte range. In fact, tables rarely need to be complex, as their purpose is usually only to display and organize data. Normally data is the main attraction, not the table boxes.
However, one extra command was critical for this project -- "bgcolor" (background color), which adds color to HTML table cells ...using an HTML color code, of course. Each color code is mentioned twice in its table -- once hidden to viewers in the "bgcolor" command to create the color sample, and then again as text, to allow the chart's viewers to read and copy/paste the code.
I decided against using the background of the codes' boxes to display their corresponding colors, as the codes are easier to read on a white background, and also their font colors would have to vary often for the codes to remain legible on light, dark, and medium-colored backgrounds. I could have developed a formula to vary the text color according to background color, but time was too limited to evaluate or refine such a formula over thousands of pages. A few other possible "extra features" were mentioned in the main article about FileMaker scripting, but as all programmers know, extras aren't always "budgeted."
HTML, HyperText Markup Language, is easily understood by all web browser software, and is reputedly still the most common format for documents on the world wide web.
HTML documents can be generated by making a text document (.txt), and then renaming its .txt extension to .html or .htm. The file extension (its last few digits after its final period or "dot") indicates to the web browser program that the text file should be read as HTML.
While other, newer web design programs or even online databases may be better suited for large data projects like the full HTML color chart, a database like FileMaker can act much like a web design program when scripted to generate and manage HTML documents.
This project was designed as a sample scripting project for FileMaker, to show how to compile web code with a database loop. HTML is a universal web language, understood by everyone's internet browser with good ease of use. Any programmer should be able to understand simple HTML, and the web design involved in this project shouldn't detract from the featured database programming.
Whether you're visiting for FileMaker programming samples or HTML color codes, enjoy the millions of colors!
- Pam Rotella is a Senior FileMaker Developer with over 20 years of I.T./PC database programming experience, more than 15 of those years working with FileMaker. She frequently consults with major US corporations and medium-sized companies, and can be reached via e-mail at firstname.lastname@example.org.
DISCLAIMER: This site is not affiliated with FileMaker software company, but rather seeks to provide a forum for credible discussion on software use. Tips provided here are not intended as individual consultation or advice. All papers published here are the opinions of their respective authors, and are not necessarily endorsed by FileMakerPapers.com or Pam Rotella.