Hexadecimal Numerals and RGB Colors

Consider splitting this into three pages. Also add more depth and interest to the first section. --MF, 1/11/23
In this activity, you will learn another number system commonly used by computer programmers.

An Easier Computer Number System to Type

The prefix hexa- means "six" like the word hexagon (a polygon with 6 sides), and since decimal is a base 10 system, hexadecimal is a base 16 system.

You've learned about decimal numerals (the base 10 system with ten digits, 0-9, that uses powers of ten for place values) and binary numerals (the base 2 system with two digits, 0 and 1, that uses powers of two for place values).

Another common number system used with computers is hexadecimal...

: Hexadecimal Numerals
The letters A-F are used for the values 10-15:
10 11 12 13 14 15
A B C D E F

A hexadecimal numeral is part of the base 16 system.

In base 16, there are sixteen digits (0-9 and A-F), and each place is worth sixteen times as much as the place to its right.

For example, consider the hexadecimal numeral 2D9...

2
D
9
256s place
16s place
1s place

We can figure out the decimal equivalent by adding up the 2 two-hundred-fifty-sixes, the D (that is, 13) sixteens, and the 9 ones: (2 × 256) + (13 × 16) + (9 × 1) = 729. You could write it in Snap! like this:
(((2 × 256) + (13 × 16)) + (9 × 1) reporting 729
  1. Talk with Your PartnerFind the decimal representation for these hexadecimal numerals:
    1. C0
    2. 96
    3. 3F
    2. Need help reading hexadecimal?

    place values in hexadecimal 3B7: 3 256's 11 16's 7 1's Base 16 uses powers of sixteen instead of powers of two or ten. Place values in hexadecimal represent the units place (160 = 1), the sixteens place (161 = 16), the two-hundred-fifty-sixes place (162 = 256), etc. So, for example:

    3B716   =   3 × 162  +  11 × 161  +  7 × 160   =   768  +  176  +  7   =   95110

Hexadecimal vs. Binary

Computers store information in binary as on and off signals (ones and zeros), but for computer programmers, typing long strings of ones and zeros is inconvenient and prone to typos. Hexadecimal (also known as "hex") numbers require less typing and are easier to type correctly.

Since 16 is a power of 2 (24 = 16), 4 bits fit inside one hex digit. For example, the binary numeral 1101 is (1 × 8) + (1 × 4) + (0 × 2) + (0 × 1) = 13 in decimal or just D in hex.

  1. Watch this counter. The top row shows binary, the middle shows decimal, and the bottom shows hex.
    Hexadecimal timer
  1. Talk with Your PartnerWrite a description of the counter's behavior.
  2. Find the hexadecimal representation for these decimal numerals:
      2F16, B916, 11216
    1. 47
    2. 185
    3. 290
  1. Use the Snap! blocks binary of hex () and hex of binary () in your "Numbers Bits Electricity" project to check your work on the problems above.

    2. Click for a hint about using Snap! to check your work with hex.

    You will need to nest the binary and hex conversion blocks above with the binary of decimal () and decimal of binary () blocks in order to get from hex to decimal.

    Why do the input slots to binary of hex and hex of binary have different shapes?

    Snap! uses the shape of the input slot to tell Snap! and the programmer what kind of inputs are expected.

    • A round slot means that the input should be a number, such as: RGB pixel, red: (85) green: (170) blue: (255)
    • A picture of a list means that the input should be a list, such as: draw pixel 'list input slot'
    • A long rectangular slot means that the input should be a text, such as: fancy ()
    • A short rectangular slot slot means that the input can be anything, such as: join
    While binary of decimal (), decimal of binary (), and hex of binary () all take digits 0-9 as input (or just 0 and 1), the binary of hex () block takes numbers that can include letters as digits, so that block needs an a more flexible slot for the hex input to allow for numbers that might include letters as digits.

Hexadecimal and RGB Colors

The three color values of RGB pixels each range from 0 to 255 because eight bits are used for each of the three colors and 28 = 256. But in hexadecimal, 162 = 256, so it only takes two hex digits to represent each of the RGB color values (0 to 255 in decimal is 00 to FF in hex).

As you've seen, if all three color values are as bright as possible, we see white, and if they are as dark as possible, we see black. Instead of writing (255, 255, 255) for white and (0, 0, 0) for black, we often use hex notation: FFFFFF and 000000.

Also (128, 0, 255) = 8000FF is the color is purple: some red (128 = 8016) and as much blue as possible (255 = FF16), but no green at all (0 = 0016). And this color is red 255, green 127, and blue 0, which is FF7F00 in hex.

  1. Represent these colors in hex notation:
    1. (10, 120, 255)
    2. (220, 10, 220)
    3. (60, 255, 60)
  1. Learn more about hex notation for RGB colors:
In this activity, you learned about hexadecimal notation, how it relates to binary, and how it is used to represent RGB color values.