The reading covered four related topics: hexadecimal numbers, color representation, image file formats, and file size calculations. We'll briefly remind ourselves of these concepts one at a time as we study the material.

Programmers use hex to have a convenient replacement for binary, because strings of bits are hard to read and hard to write. We will see that there is an easy way to convert binary to hex and vice versa. But first, we'll learn about hex as a number system, where it also finds use in programming.

- Hexadecimal ("hex" to its friends) is
*base 16*. - The place values are powers of
*sixteen* - In principle, hex numbers can be infinitely big, we will typically be using two digits, the ones place and the sixteens place.
- Digits larger than 9 use the letters A to F.
- Hex is nice because there's a simple way to convert between hex and binary without going through decimal.
- Each digit is the equivalent of a four-bit number

First, we'll count in hex up to 29.

The hex equivalent of 37_{10} is

37

45

47

none of the above

The hex equivalent of 90_{10} is

50

90

5A

none of the above

The decimal equivalent of BA_{16} is

186

180

190

none of the above

Maggie will do more of these in her SI sessions.

Let's convert 11110010_{2} to hex in two different
ways:

- via decimal
- directly

Which way is easier?

This works because dividing by 16 (which we need to do when
converting to hex) is equivalent to shifting the bits four
places. Each hex digit corresponds to exactly four bits
(a nibble

), and so the arithmetic is much easier.

What's the conversion of C5A to binary?

1100 0101 1010

1010 0110 1100

0110 0101 1010

none of the above

What's the conversion of 1111101011001110 to hex?

DEAD

BEEF

FACE

none of the above

Maggie will do more of these in her SI sessions.

Because of the way human vision works, we can represent any color using three primaries:

- Red
- Green
- Blue

If we represent the *amount* of each with a number
from 0-255.

- How many colors can we have?
- Why 255?

In modern CSS, you can say `rgb(24, 118, 208)`

using decimal numbers, but hex digits are still in wide use.

There's a nice match between colors being represented as 3 bytes and hex digits:

- Every six-digit hex string can be interpreted as a color and
- every color can be written as a six-digit hex string.

Here are the (old) standard colors. Things to notice in this table:

- When the primaries are equal, the color is a shade of gray.
- When the primaries are big, the color
is
*lighter* - Only a few levels of each primary are used: FF is full power, 80 is half power. C0 is three-quarters power.
- The secondaries are
- Fuchsia = red + blue
- Cyan = green + blue
- Yellow = red + green

Color name | #RRGGBB | Example |
---|---|---|

black | #000000 | |

gray | #808080 | |

silver | #C0C0C0 | |

white | #FFFFFF | |

maroon | #800000 | |

red | #FF0000 | |

orange | #FFA500 | |

olive | #808000 | |

yellow | #FFFF00 | |

green | #008000 | |

lime | #00FF00 | |

teal | #008080 | |

aqua | #00FFFF | |

navy | #000080 | |

blue | #0000FF | |

purple | #800080 | |

fuchsia | #FF00FF | |

Last time, we saw the numbers 67, 115, and 49 converted to ASCII. Converted to a color, they are:

#437331

#438331

#437349

none of the above

What does that color look like?

light red

dark green

light blue

none of the above

Colors can be represented as rectangular collections of
spots of color called *pixels*. An image file comes
in a variety of *formats,* some of which
are *uncompressed* and some are *compressed*.

We will study the ideas behind one particular compressed
format, namely *GIF* and touch on the others.

What is the approximate image size in bytes of an uncompressed image of 200 x 300 with 30 colors in it?

200 x 300 x 30

200 x 300 x 3

(200 x 300 x 3)/8

(200 x 300 x 30)/8

200 x 300 x 4

(200 x 300 x 4)/8

Indexed color depends crucially on
the *bit-depth*, which is just another form of the
relationship between the number of bits devoted to a
representation and the number of different things you can
represent.

When we use indexed color, we usually count *bits*
and have to divide by eight to convert from bits
to *bytes*.

We'll work through a series of examples that show the power of indexed-color and the effect of adding colors. We'll look at these:

- 80x100 image, uncompressed
- 80x100 image, two colors
- 80x100 image, three colors
- 80x100 image, four colors
- 80x100 image, five colors

For each of these, we'll compute the file size
in *bytes*.

What is the bit-depth of an index-color image with 30 colors in it?

30

3

4

5

What is the approximate image size in bytes of an image of 200 x 300 with 30 colors in it, using indexed-color representation?

200 x 300 x 30

200 x 300 x 3

(200 x 300 x 3)/8 + 30 x 3

(200 x 300 x 30)/8

(200 x 300 x 5)/8 + 30 x 3

none of the above

What is the best image file format?

GIF

JPEG

PNG

none of the above

Will be posted later, visit again after .

Solutions to the quiz questions

1. D. The hex equivalent of 37_{10}is 25_{16}2. C. The hex equivalent of 90_{10}is 5A_{16}3. A. The decimal equivalent of BA_{16}is 186_{10}3a. A = 1100 0101 1010 3b. C = FACE 4. D. The color 67, 115, 49 is`#437331`

5. B. The color is a dark green 6. B. The approx size is 200 x 300 x 3 bytes. 7. D. The bit depth for 30 colors is 5 8. E. The approx size is (200 x 300 x 5)/8 + 30 x 3 bytes. 9. D. There is no best image file format.