24-Bit Color Manual

This app shows how bits can represent color values. Click the toggle switches on or off to change the amount of red, green, and blue intensities for the composite color in the rectangular patch on the left. For each bank of switches, the highest bit value appears on the left and decreases by successive powers of 2 toward the right.

Here are the decimal and hexadecimal values for each switch in a row:

Pixels and framebuffers

Earlier in the course we learned that bits are binary digits, meaning that they can represent 1 of 2 values. Bits are often grouped to represent integers and floating point numbers, but sometimes they're grouped in ways that are convenient for solving particular problems. In computer graphics, one of those problems is to assign a color to a portion of a screen. Pixels, the smallest 'addressable' portions of a screen, are grouped into a framebuffer (sometimes referred to as a raster), laid out in a virtual grid. Each pixel in the grid holds a number describing the color for its designated cell. Modern computer graphics systems render color with red, green, and blue emissive color primaries. A pixel's color number specifies the intensity of each primary for its cell.

How color numbers work

There are several different conventions for creating color numbers but they share the same goal: to represent 3 (or more) primary values within a single number, represented by a fixed number of bits. In this app, color numbers are represented by 24-bits subdivided into 8-bit sections. I made the arbitrary choice to reprent blue intensity in the 8 'lowest' bits--those with values from 2⁰ (dec 0) to 2⁷ (dec 128), green in the 8 middle bits (2⁸ to 2¹⁵), and blue in the top 8 bits (2¹⁶ to 2²³). In total, there are 2²⁴ color combinations, or 16,777,216 decimal. In practice, a programmer rarely provides a single number in that range--instead, he or she specifies a value between 0 and 255 for each of the 3 primaries. Many graphics systems let you do this by specifying decimal or hexadecimal primary values. The system takes your primary values and builds a 24 bit color number for use in the framebuffer.

Why do we use hexadecimal numbers?

Hexadecimal, or base 16 numbers, are convenient shorthand for binary numbers. 1 hex digit holds the same information as 4 binary digits (bits)

Why 24 bits?

Generally, people seem to be at about the limit of color discrimination with 8 bits per color primary, giving a range of 256 values from black to full intensity. However, many color display systems use more than 24 bits per pixel. The remaining bits are used for special effects like color overlay (also known as opacity or alpha) among other things.

Things to try

As you're flipping switches, notice how the numeric color values on the right change. Numbers beginning with 0x are binary representations, # are hex, and those without an identifier are decimal. Notice that the hex numbers for the primaries also appear in the RGB composite number on the left (red in the left 2 digits, green in the middle 2, and blue in the right 2).

Hexadecimal is shorthand for binary. 1 hex digit represents the same range of values (16 in decimal) as 4 binary digits (bits).

Try counting from 0 to f in hex by flipping the 4 right-most bits for one of the color primaries and watching the lower of the 2 hex digits

Turn off all the bits and then count from 0 to f by flipping the 4 left-most bits--same result for the upper hex digit

Experience the weirdness of RGB colors

Many people find it difficult to construct common colors from RGB primary values. That's ok--other systems are out there and those color numbers can be easily converted to RGB.

Start with all switches off. Turn on all the red and green bits, starting at the right and working to the left. What do you end up with? Surprisingly, you will find that you get the same result if you shine flashlights with red and green filters onto the same spot on a white wall.

Try making orange. This takes me forever to remember how to do--good luck!

Other things

The bits on the left make much larger changes on the primary and composite color swatches than do those on the right

Try working in a dark room. How far to the right can you go and still see a visible change?