Under each color’s name on its card is a code such as #3366CC. It is the color’s red, green and blue light levels, each from 0 to 255, written in hexadecimal, two characters per light. It is the plainest name a computer has for a color, and the easiest way to carry a color from one program to another.
What it does
The code sits directly under the name, Front, Back or Ground, and you can edit it. Click in it, type a code, and press Enter or click elsewhere to apply it. Escape puts the old code back.
- It takes six digits,
#3366CC, or the three-digit shorthand,#36C, which doubles each digit to make#3366CC. - The
#is optional, and capitals or small letters both work. Whatever you type, the field shows the color back as six capital digits. - Anything that is not a hex color is refused, and the field puts the current color back. A mistyped code is never read as black.
- There is no transparency: the field holds seven characters, the
#and six digits. - A gray keeps the hue the color had, so its wheel marker does not jump to red.
The code is the same whichever color space the cards are showing. Switch from RYB to CMYK to HSV to RGB and it does not change, because the color does not change.
How to read one
After the # come three pairs: red, then green, then blue. Each pair is a number in base sixteen, which counts with sixteen digits, 0 to 9 and then A to F for ten to fifteen. The first digit of a pair counts sixteens, the second counts ones.
33is 3 × 16 + 3 = 51.66is 6 × 16 + 6 = 102.CCis 12 × 16 + 12 = 204.
So #3366CC is red 51, green 102, blue 204: a mid blue. 00 is none of a light and FF (15 × 16 + 15) is all 255 of it. Three equal pairs make a gray; #000000 is black and #FFFFFF is white. With practice you can read a code at a glance: the largest pair tells you which way the color leans, and the spread between the pairs tells you how intense it is.
Why it works this way
Hexadecimal fits computer memory exactly. Each light is stored in one byte, which has 256 possible values, and 256 is 16 × 16, so one byte is always exactly two hex digits. The code is short, exact and easy to copy, and every design program, stylesheet and paint app understands it.
The app shows it on every card because it is the one description that belongs to no model. It is also how the color is saved: a design file records its three colors as hex codes.
The metaphor
A hex code works like an address. There are 256 streets of red, 256 of green and 256 of blue, and #3366CC is house 51 on the first, 102 on the second and 204 on the third. Give someone the address and they arrive at exactly the same house: the code is exact, and it survives email, print-outs and being read aloud.
The metaphor breaks in two ways. An address tells you where a house is, not what it looks like. Nothing in #C0A080 says “warm sand” until you have learned to read it, and two codes that look alike can be quite different colors. And the address is only good in one town. The numbers mean the color they mean only on a screen that follows the sRGB standard. A different screen shows a slightly different color, and a printer must translate the code into inks before it means anything on paper.
A history
In art
Painters have never used hex codes, and the honest connection is thin. The nearest craft is naming colors exactly enough for someone else to find them again. In 1814 the Scottish botanical painter Patrick Syme published Werner’s Nomenclature of Colours: 108 named colors, with examples of each from animals, plants and minerals. Charles Darwin carried the 1821 edition on the voyage of the Beagle and used its names in his notes. Albert Munsell’s notation of 1905 went a step closer to a code: a color written as hue, value and chroma, letters and numbers anyone could look up. Josef Albers wrote on the back of each Homage to the Square which paints he had used.
In printing
Printers have their own codes. The Pantone Matching System, launched in 1963 by Lawrence Herbert, gave each ink color a number and a recipe from a small set of base inks, so a designer in one city and a printer in another could agree without meeting. CMYK percentages are a code of the same kind. Today a brand color is often written three ways at once: a Pantone number for spot ink, CMYK for process printing, and a hex code for screens.
In technology
The word “hexadecimal” is first recorded in 1952. Early computers disagreed about which symbols to use for ten to fifteen: the ILLIAC I used K, S, N, J, F and L, and the Bendix G-15 used u to z. The letters A to F became the standard in the later 1960s, after IBM’s System/360, whose eight-bit bytes made two hex digits the natural way to write one.
The web made hex colors ordinary. In the mid-1990s Netscape’s browser let a page set its background color with a six-digit code, and the first browsers took their list of color names from the X Window System. The first CSS specification, in 1996, accepted both #rrggbb and the three-digit shorthand. In the late 1990s, when many screens could show only 256 colors at once, designers kept to a “web-safe” palette of 216 colors built from six levels per light, 00, 33, 66, 99, CC and FF. #3366CC is one of them. Later versions of CSS added an eight-digit form with transparency in the last pair.
In professional software
A hex code is the nearest thing design software has to a common language: almost every program that works in RGB has a field for one, and copying a code across is the quickest reliable way to move a color. What transfers from Studio Notan is reading it: three pairs, red, green and blue.
- Adobe Photoshop. The ‘Color Picker’ has a field marked # for the six digits. Tick ‘Only Web Colors’, at its lower left, and any code you enter is held to the 216 web-safe colors.
- Adobe Illustrator. The ‘Color’ panel and the ‘Color Picker’, opened by double-clicking the fill, both have a hex field. In a CMYK document a typed code is converted to inks, so it may read back with slightly different digits.
- Adobe InDesign. Hex codes are accepted in the ‘Color Picker’, and in the swatch dialogs once the color mode is set to RGB.
- Figma. Hex is the picker’s default, with opacity in a separate box beside it, and the code is the same one a CSS stylesheet uses.
- Blender. The picker’s ‘Hex’ field takes the three-digit shorthand too. Hex is gamma-corrected for sRGB while the RGB numbers beside it are linear, unless the picker is set to ‘Perceptual’, so a pasted code gives the right color even when those numbers do not match Photoshop’s.
- Autodesk AutoCAD. The ‘True Color’ tab takes RGB as three numbers with commas, so decode a code first:
#3366CCbecomes51,102,204.
What carries over. Keep your colors as a list of hex codes; every screen program reads them. Know what a code does not carry. It has no profile of its own: on the web it means sRGB, and in a document with another profile it can show a slightly different color. It says nothing about ink, so for print carry CMYK numbers or a Pantone reference beside it. And CSS and some programs add a fourth pair for opacity, which Studio Notan will not accept.
Try this
- Type
fc0into a card’s hex field and press Enter. It becomes#FFCC00, a warm yellow. - Decode
#3366CCby hand (51, 102, 204), then type it in and switch to RGB to check. - Give a card a vivid color, then type
#777777over it and switch to HSV. The color is gray, but H still shows the old hue; raise S and the old hue returns.
Going further
The three lights the code spells are in RGB: light. How the one color is read in four languages is in Color space. Swapping colors between cards is in Colors.
Books: Charles Petzold, Code: The Hidden Language of Computer Hardware and Software; Patrick Syme, Werner’s Nomenclature of Colours.