Lecture 7   Hex, Colors, Images and File Size

Recap

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.

Hexadecimal Numbers

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.

Quiz Question Nr. 1

The hex equivalent of 3710 is

  1. 37

  2. 45

  3. 47

  4. none of the above

Quiz Question Nr. 2

The hex equivalent of 9010 is

  1. 50

  2. 90

  3. 5A

  4. none of the above

Quiz Question Nr. 3

The decimal equivalent of BA16 is

  1. 186

  2. 180

  3. 190

  4. none of the above

Maggie will do more of these in her SI sessions.

Converting Between Hex and Binary

Let's convert 111100102 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.

Quiz Question Nr. 3a

What's the conversion of C5A to binary?

  1. 1100 0101 1010

  2. 1010 0110 1100

  3. 0110 0101 1010

  4. none of the above

Quiz Question Nr. 3b

What's the conversion of 1111101011001110 to hex?

  1. DEAD

  2. BEEF

  3. FACE

  4. none of the above

Maggie will do more of these in her SI sessions.

Color and Graphics on the Web

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.

Hex and Colors

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 names, hexadecimal values, and samples
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

Quiz Question Nr. 4

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

  1. #437331

  2. #438331

  3. #437349

  4. none of the above

Quiz Question Nr. 5

What does that color look like?

  1. light red

  2. dark green

  3. light blue

  4. none of the above

Colors and Images

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.

Quiz Question Nr. 6

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

  1. 200 x 300 x 30

  2. 200 x 300 x 3

  3. (200 x 300 x 3)/8

  4. (200 x 300 x 30)/8

  5. 200 x 300 x 4

  6. (200 x 300 x 4)/8

Indexed Color

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.

Examples

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.

Quiz Question Nr. 7

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

  1. 30

  2. 3

  3. 4

  4. 5

Quiz Question Nr. 8

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

  1. 200 x 300 x 30

  2. 200 x 300 x 3

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

  4. (200 x 300 x 30)/8

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

  6. none of the above

Quiz Question Nr. 9

What is the best image file format?

  1. GIF

  2. JPEG

  3. PNG

  4. none of the above

Solutions

Will be posted later, visit again after .

Solutions to the quiz questions

                    1. D.  The hex equivalent of 3710 is 2516
                    2. C.  The hex equivalent of 9010 is 5A16
                    3. A.  The decimal equivalent of BA16 is 18610
                    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.
                  

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Monday, 19-Sep-2016 11:51:53 EDT