Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

The Color Spot at HTML Station

Welcome to The Color Spot, a collection of pages about color definitions used in HTML attributes and Cascading Style Sheets. You can use The Color Spot to choose colors for Web page features.

At The Color Spot, you'll find:

The Color Spot is part of HTML Station, a reference site for HTML and related technologies.

Here are pages at The Color Spot:

Definitions
Color Definitions Chart: summarizes how you can define colors in HTML style attributes and in Cascading Style Sheets. Shows examples of color definitions.
Terms
Color Terms Page: describes and illustrates terms used in The Color Spot and explains the color codes and named color sets included in its pages.
Color Tables
Table of Color Tables: helps you choose a color table at The Color Spot. In the cells, links take you to a table showing the set of colors identified in the row's first column and displaying codes in the column header. You can use this quick reference table to help you choose from among the many color tables available.
Hex Hub
This chart helps you pick a hexadecimal color code from more than 1,000 named colors. Click on the swatch set closest to the hue that you want, and you'll see a chart of color names, hex codes, and swatches. This is the best entry point if you just want hexadecimal color codes based on a set of named colors (as opposed to unnamed colors generated at intervals).
Code Chart
Color Codes Chart: large chart which shows colors, swatches defined by their six-digit hexadecimal representations, then the hexadecimal code, decimal code, percent code, HSL (hue, saturation, and light), and CMYK (cyan, magenta, yellow, and black--for comparison--CMYK is not used in HTML or CSS) code of the color. In the comment section of the chart, colors that are on the safe color list are marked safe; colors that are on the 16 named colors list are marked 16 name COLOR, where COLOR is the color name as used on the 16 named color list; colors that are on the SVG named colors list are marked SVG name COLOR, where COLOR is the color name as used on the SVG named color list. Includes many colors you won't find anywhere else--such as cheddar, lake michigan, moon, cinnamon, fog, titanium, battleship, mint, yolk, chili, espresso, cream city brick, hematite, safety vest, and more!
Color Shades
Color Shades: shows a list of colors and, for each color, three other colors based on the original color but with higher light values. You can use this chart to set up color schemes.
Hexadecimal
Hexadecimal Color Codes: demonstrates the six-digit hexadecimal representation of color of the form #RRGGBB, where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. Also available in "chip" form grouped by similar hue, saturation, and light.
Generated Chips:
shows colors defined by hex codes generated at regular intervals of hue (hue each 30°), saturation, and light; you can also look at colors generated at regular intervals of hue (hue each 10°), saturation, and light or generated at regular intervals of hue (hue each 6°), saturation, and light. You can use these Generated Chips charts to set up color schemes.
Decimal
Decimal rgb(R,G,B) Color Codes: demonstrates the decimal representation of color of the form rgb(R,G,B), where R, G, and B are the decimal values for the red, green, and blue values of the color on the range 0 to 255
Percent
Percentage rgb(R%,G%,B%) Color Codes: demonstrates the percent representation of color of the form rgb(R%,G%,B%), where R%, G%, and B% are the percent values for the red, green, and blue values of the color on the range 0% to 100%
Triple Hex
Hexadecimal Three-Digit Color Codes: demonstrates the three-digit hexadecimal representation of color of the form #RGB, where RGB is a a three-digit hexadecimal which is expanded to define the six-digit color where each digit is repeated once; thus #RGB defines to the color #RRGGBB. Tables show all the possible combinations of these three-digit hexadecimal codes: from #000 to #3FF, from #400 to #7FF, from #800 to #BFF, from #C00 to #FFF
Safe Hex
Non-dithering Safe Colors (Netscape Palette) Hexadecimal: shows the 216, six-digit hexadecimal color codes define what are considered safe, non-dithering colors. This is sometimes called the Netscape palette because Netscape (Web browser maker) defined this palette to display color graphics based on an 8-bit system (28 - 40 (reserved by operating system) = 216 colors) You can also see one chart showing the hexadecimal code, decimal code, percent code, HSL (hue, saturation, and light), and CMYK (cyan, magenta, yellow, and black--for comparison--CMYK is not used in HTML or CSS) for the 216 safe colors.
Soft Hex
Safe, Soft Hexadecimal Color Codes: six-digit hexadecimal color codes defining colors that are useful in areas of a web page where you want subtle coloring
16 Named
The 16 Named Colors shown in Hexadecimal, Decimal, and Percentage: the sixteen color names for use in an HTML attribute as originally defined in HTML 3.2; this page shows tables of the sixteen colors with swatches specified by name, hexadecimal code, decimal code, and percent You can also see one chart showing the hexadecimal code, decimal code, percent code, HSL (hue, saturation, and light), and CMYK (cyan, magenta, yellow, and black--for comparison--CMYK is not used in HTML or CSS) for the 16 named colors.
Names
The summer sky--is it Vivid Blue? Or is it Ultramarine Blue, Cerulean Blue, Bonnie Blue, Sevres, Bradley's Blue, Methyl Blue, Rood's Blue, or Spectrum? The human eye can discern millions of colors, and the human imagination has come up with many names for them. Introduces Universal Color Language and color names with synonyms.
Swatch Control.
This interactive SVG tool allows you to set the value of a swatch based on red, green, blue, hue, saturation, or light values and see these values displayed on gauges and dials. One swatch. 71 switches, dials, and gauges. And YOU'RE in control... at Swatch Control!
Color Scheme Maker
You can mix your own color scheme using the Color Scheme Maker. The Color Scheme Maker creates a palette of hexadecimal color swatches based on your settings for the hue, saturation, and light and then shows those swatches used in a page mockup. You can try out different color schemes using these colors. Don't just dream--scheme with the Color Scheme Maker 2000!
Color Picker
You can use this interactive Java applet to pick colors by red, green, and blue values. Benefits of a color picker: you get to choose from any of 16,777,216 colors. You see can see the results interactively and immediately. Downside of a color picker: you get to choose from any of 16,777,216 colors. A good color is hard to find. An alternative is a color codes chart with swatches of recognized or named colors.
Color Chooser
You can use this interactive page to choose color schemes and see how they look.
Color Stepper
You can mix your own color charts using the Color Stepper tool. The color swatches are arranged in rows and columns based on your settings for the origin color and increments. Starting with the origin swatch in the upper left corner of the chart, the red, green, and blue hexadecimal values of the other swatches are set based on horizontal and vertical increments. The Color Stepper is implemented in Scalable Vector Graphics (SVG).
Hue Stepper
You can mix your own color charts using the Hue Stepper tool, an interactive SVG tool to mix a hex color chart based on a hue value and increments of saturation and light. The Hue Stepper creates a chart of hexadecimal color swatches arranged in rows and columns based on your settings for the hue and increments for saturation and light.
Hex UCL
This page shows color swatches defined by hexadecimal code and named according to the Universal Color Language (UCL) described in COLOR Universal Language and Dictionary of Names (listed in Links). Specifically, this page shows colors named according to the UCL Level 3, where color descriptions consist of 267 color blocks named by a method devised by the Inter-Society Color Council (ISCC) and the the United States Department of Commerce's National Bureau of Standards (NBS) (now called the National Institute of Standards and Technology). This method is called the ISCC-NBS Method of Designating Colors.
SVG Named
This page shows the 147 color names defined by the Scalable Vector Graphics (SVG) 1.1 Specification and swatches of colors that are defined using these names. Use this page to test to see if your browser recognizes all these names.
SVG in SVG
This page shows the 147 color names defined by the Scalable Vector Graphics (SVG) Specification and swatches of colors that are defined using those names as shown in a Scalable Vector Graphics viewer. Requires a free SVG viewer to view.
SVG Hex
The Named Colors in the Scalable Vector Graphics Specification in Hexadecimal: shows the names and the six-digit hexadecimal representation of the 147 colors defined by the Scalable Vector Graphics (SVG) 1.1 Specification
SVG Decimal
The Named Colors in the Scalable Vector Graphics Specification in Decimal rgb(R,G,B): shows the names and the decimal representation of the form rbg(R,G,B) of the 147 colors defined by the Scalable Vector Graphics (SVG) 1.1 Specification
SVG Percent
The Named Colors in the Scalable Vector Graphics Specification in Percent rgb: shows the names and the the percent representation of the form rgb(R%,G%,B%) of the 147 colors defined by the Scalable Vector Graphics (SVG) 1.1 Specification
SVG HSL
The Named Colors in the Scalable Vector Graphics Specification in HSL: the hue, saturation, and light method of defining color for a selected list of colors. The definition is of the form hsl(H,S%,L%) where H is the hue measured in degrees of the color circle (red = 0; green = 120; blue = 240). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal') (Mozilla Web browser shoes colors like this, but Internet Explorer (Feburary 2004) does not.
SVG CMYK
The Named Colors in the Scalable Vector Graphics Specification in CMYK: this is of the form cmyk(C%, M%, Y%, K%), where C, M, Y, and K are the percent values for the cyan, magenta, yellow, and black values of the color. This color system is used in printing, and is presented here for comparison purposes only to the ways you can define colors in HTML attributes and in Cascading Style Sheets. The CMYK system is NOT used in HTML or style sheets, but is a popular form of color representation, and is shown here to help you get an insight into color and for comparisons.
RGBA Decimal
shows the decimal representation of color of the form rgba(R,G,B,a), where R, G, and B are the decimal values for the red, green, and blue values of the color on the range 0 to 255 and a is the opacity of the color (a = 0 = transparent; a = 1 = opaque). NOTE: I know of no Web browser that shows colors defined this way (February 2004).
RGBA Percent
shows the percent representation of color of the form rgba(R%,G%,B%,a), where R, G, and B are the percent values for the red, green, and blue values of the color on the range 0 to 100 and a is the opacity of the color (a = 0 = transparent; a = 1 = opaque). NOTE: I know of no Web browser that shows colors defined this way (February 2004).
HSL Codes
demonstrates the hue, saturation, and light method of defining color for a selected list of colors. The definition is of the form hsl(H,S%,L%) where H is the hue measured in degrees of the color circle (red = 0; green = 120; blue = 240). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal') (Mozilla Web browser shoes colors like this, but Internet Explorer (Feburary 2004) does not.
HSL Table
demonstrates the hue, saturation, and light method of defining color for a generated table of values at intervals (hue each 30°). The definition is of the form hsl(H,S%,L%) where H is the hue measured in degrees of the color circle (red = 0; green = 120; blue = 240). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal') (Mozilla Web browser shoes colors like this, but Internet Explorer (Feburary 2004) does not. Also available: with hue defined each 10° and with hue defined each 6°.
CMYK Codes
Selected colors in CMYK: this is of the form cmyk(C%, M%, Y%, K%), where C, M, Y, and K are the percent values for the cyan, magenta, yellow, and black values of the color. This color system is used in printing, and is presented here for comparison purposes only to the ways you can define colors in HTML attributes and in Cascading Style Sheets. The CMYK system is NOT used in HTML or style sheets, but is a popular form of color representation, and is shown here to help you get an insight into color and for comparisons.
HSLA Table
demonstrates the hue, saturation, light, and alpha (opacity) method of defining color for a selected list of colors with swatches defined by this method. The definition is of the form hsla(H,S%,L%,a) where H is the hue measured in degrees of the color circle (red = 0; green = 120; blue = 240). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal'). The alpha (a) is the opacity of the color (a = 0 = transparent; a = 1 = opaque). I don't know of a browser that shows colors like this!
Links
These are links to reference information used to prepare information for The Color Spot at HTML Station as well as links to informative color-related information.
Books
Books about color theory and use
Save this page to any social bookmarking site! Share · Search · Market · Directory
2015-11-01 · John December · Contact · Terms of Use © December Communications, Inc.