RGB is the screen’s own language. Every color in the app is made by three tiny lights, red, green and blue, each set to one of 256 levels from 0 to 255. Light adds: red and green make yellow, and all three at full make white. RGB is the most literal of the four color spaces and the least intuitive.
What it does
With RGB chosen under Color space, each card shows three sliders, R, G and B. Each letter sits on a disc of pure red, green or blue light. Each track runs from none of that light to all of it, with the other two held, so you can watch green climb from nothing to full.
The values are whole numbers from 0 to 255. Type one into a number box and press Enter. The hex code under the color’s name is these same three numbers written in base sixteen, two characters each. A gray, where R, G and B are equal, keeps the hue the color had, so its wheel marker does not jump to red. Like CMYK and HSV, the RGB sliders are a reading of the color: switch away and back and nothing moves.
Why it works this way
RGB is here because it is the truth about the device. Whatever model you choose, the color is finally sent to the screen as three light levels. RGB is also what other software, websites and stylesheets speak, so it is the easiest way to match a color exactly.
The range 0 to 255 comes from computer memory. Each light is stored in one byte of eight bits, and eight bits can hold 256 different values. Three bytes give 256 × 256 × 256 = 16,777,216 colors, the “24-bit color” that became standard on personal computers.
RGB is not where the app starts, because it is hard to choose colors in. Adding light works backwards from what painters expect. To make a color paler you raise the two weaker lights toward the strongest. To make brown you need a dim orange. Red and green, which in paint make mud, make yellow.
The metaphor
Picture three colored spotlights, red, green and blue, pointed at a white wall in a dark theatre. Where two overlap, you see their sum: red and green make yellow, green and blue make cyan, blue and red make magenta. Where all three overlap, white. With every light off, the wall is black. That is additive mixing, and it is the reverse of paint, which starts from white paper and takes light away.
The picture is true in principle and wrong in detail. A screen’s lights do not overlap; they sit side by side as tiny subpixels, too small to see separately, and the mixing happens in your eye. The numbers are not amounts of light, either. They are encoded on a curve that matches the eye’s sensitivity: 128 is half the number but only about a fifth of the light. The eye is more sensitive to differences in the dark, so a fifth of the light already looks like a middle gray. And the three lights are particular colors, fixed by a standard, not pure spectral red, green and blue. Some colors of the rainbow, especially deep blue-greens, lie outside what any three such lights can make.
A history
In art
Painters could not paint with light, but some tried to mix in the eye. In the 1880s Georges Seurat placed small separate touches of color so that they would blend at a distance, drawing on the color science of Chevreul and others. Optical mixing of dots behaves more like averaging than like adding lights, but the ambition, color made in the eye rather than on the palette, is the one a screen fulfills.
In the twentieth century light itself became a medium. Thomas Wilfred built an instrument for playing colored light, the Clavilux, and gave its first public recital in New York in 1922; he called the art lumia. In 1963 Dan Flavin began making works from ordinary colored fluorescent tubes, and the same year Nam June Paik showed doctored television sets in Wuppertal. Every artist who has since worked on a screen has worked in RGB, knowingly or not.
In printing
RGB and printing are closer than they look, because color printing began by photographing through red, green and blue filters. In 1861 James Clerk Maxwell showed an audience at the Royal Institution in London a color image of a tartan ribbon. The photographer Thomas Sutton had made three negatives of it through red, green and blue filters, and Maxwell projected them through the same filters, one over another. It was the first demonstration of three-color photography.
Printers turned the idea around. Shoot an original through a red filter and you record where red light is. The ink plate made from that record is cyan, the ink that removes red. Green gives the magenta plate and blue the yellow. Every separation made by camera, and later by scanner, starts from a red, a green and a blue record. Photography went the other way too: the Lumière brothers’ Autochrome plates, sold from 1907, carried millions of potato-starch grains dyed red-orange, green and blue-violet, an additive mosaic.
In technology
The theory came first. In 1802 Thomas Young proposed that the eye codes color with just three kinds of receptor. Hermann von Helmholtz and Maxwell developed the idea later in the century. In 1964 microspectrophotometry of single cone cells, by Marks, Dobelle and MacNichol, confirmed three cone pigments. RGB works because we are built that way.
Color television put RGB in the home. RCA’s shadow-mask tube fired three electron beams through a perforated metal sheet onto triads of red, green and blue phosphor dots, and the United States approved its color broadcast standard in December 1953. The flat screens that followed kept the triads as subpixels. The byte came from IBM in the 1950s: Werner Buchholz coined the word in 1956, and IBM’s System/360 made the eight-bit byte standard in the 1960s. In 1996 Hewlett-Packard and Microsoft proposed sRGB, so that the same three numbers would mean roughly the same color on any screen. It became an international standard in 1999, and it is what the numbers on these cards mean.
In professional software
RGB is the working language of every screen program. What transfers from Studio Notan is the picture of three lights. What changes is the scale and the meaning: programs write the same lights as 0 to 255, as 0 to 1 or as percentages, and a color profile says which red, green and blue the numbers stand for.
- Adobe Photoshop. New images are RGB by default (‘Image › Mode › RGB Color’). The ‘Channels’ panel shows the three lights as grayscale images, white where a light is full and black where it is off. ‘Edit › Assign Profile’ changes what the numbers mean; ‘Edit › Convert to Profile’ changes the numbers to keep the look.
- Adobe Illustrator. Choose ‘File › Document Color Mode › RGB Color’ for anything that will end on a screen. The ‘Color’ panel in RGB mode gives three sliders from 0 to 255 and a hex field.
- Figma. Figma works in RGB throughout. A file’s color profile can be sRGB or Display P3; P3 reaches more vivid reds and greens than sRGB, and the same numbers look different under each.
- Autodesk AutoCAD. In the ‘True Color’ tab, choose RGB and type the three numbers with commas,
51,102,204, on the same 0 to 255 scale as here. - Blender. Blender stores colors from 0 to 1 in linear light, as amounts of light rather than screen levels. Switch the picker to ‘Perceptual’ to see sRGB values that compare with other programs: 51, 102, 204 reads 0.2, 0.4, 0.8.
What carries over. Read RGB as three lights and you can match a color exactly anywhere by typing its numbers. The pitfall is the profile: the same numbers mean slightly different colors in sRGB, Display P3 or Adobe RGB. When a color must match, give both files the same profile, or keep to sRGB, which the web and this app assume.
Try this
- Set R 255, G 255, B 0. Two lights make yellow, the color that paint treats as a primary nothing can mix.
- Set R 255, G 0, B 0 and raise G slowly: red passes through orange to yellow. Now lower all three together, to about R 128, G 64, B 0. The orange turns brown. To a screen, brown is only a dim orange.
- Set R 0, G 255, B 0, pure green light, and switch to RYB. The nearest the paints can come is mostly yellow with a little blue, a yellow-green, and Nearest mix appears. Screen red, yellow and blue, by contrast, are exactly the app’s three paints.
Going further
The same three numbers written as a code are explained in Hex color codes. The opposite way of mixing is in RYB: mixing paint and CMYK: printing ink.
Books: Margaret Livingstone, Vision and Art: The Biology of Seeing; Charles Poynton, Digital Video and HD: Algorithms and Interfaces; Alvy Ray Smith, A Biography of the Pixel.