L5

Color representation in
computer
Learning Objectives
• Explain how RGB color is represented in bytes

• Explain the difference between “bits” and “binary numbers”
• Change an RGB color by binary addition
• Discuss concepts related to digitizing sound waves
• Explain data compression and its lossless and lossy variants
• Explain the meaning of the Bias-Free Universal Medium
Principle
Digitizing Data
• Digitizing is more than letters, numbers, and metadata

• It is also photos, audio, and video
• What are the bits doing?
• Digitizing includes other forms of digitized information, known
as multimedia
• Same principles are used as with letters and numbers to
encode information into bits
Color and the Mystery of Light
• Color on a Computer Display:

• Pixels are small points of colored light arranged in a grid
• Each pixel is formed from three colored lights: red, green,
and blue.
• known as RGB (always in that order)
Showing Colors
• Turning on one light at a time, the display turns red, green, or

blue
• Turning off all of them makes black
• Turning on all of them makes white
• All other colors are made by using different amounts or
intensities of the three lights
Yellow = R + G?
• Combining red and green

makes yellow
• I thought that red and
yellow make orange?
– There is a difference
between colored light and
colored paint
Yellow = R + G?
• Paint reflects some colors

and absorbs others
• When white light strikes
paint, some light is
absorbed (we can’t see it)
and some light is reflected
(we see it)
Yellow = R + G?
• In the case of a pixel, the

light shines directly at our
eyes
• Nothing is absorbed
• Nothing is reflected
• Just see pure colored light
LCD Display Technology
• At left in the close-up of an

LCD is an arrow pointer with
two enlargements of it
• From a distance, the pixels
appear white
• Close up, the pixels are red,
green, and blue colored
lights
Black and White Colors
• The intensity of RGB light is usually given by a binary number

stored in a byte
• Representing the color of a single pixel requires 3 bytes (1 for
each color)
- Smallest intensity for a color is 0000 0000
- Largest intensity for a color is 1111 1111
• Doing the math from, says the range of values is 0 through
255 for each color
Black and White Colors
• Black is the absence of light:

- 0000 0000 0000 0000 0000 0000
- RGB bit assignment for black
• White is the full intensity of each color:

- 1111 1111 1111 1111 1111 1111
- RGB bit assignment for white
Color Intensities
• Consider blue (0000 0000 0000 0000 1111 1111)
• The 8 bits specifying its intensity have position values:
128 64 32 16 8 4 2 1
1 1 1 1 1 1 1 1
• If we want the sub pixel to be at half intensity : each bit

contributes half as much
power as the bit to its left
128 64 32 16 8 4 2 1
1 0 0 0 0 0 0 0
Color Intensities
Decimal to Binary
• Which powers of 2 combine to make the decimal number?

Lighten Up
• Changing Colors by Addition

• To make a lighter color of gray, we change the common
value to be closer to white.
Lighter Still…
• Imagine that the color lighter still by another 16 units of
intensity for each RGB byte
• The 16’s position is already filled with a 1:
1101 1110
• “Carry” to the next higher place
Binary Addition
• Same as decimal addition but with only two digits

• Work from right to left, adding digits in each place position,
writing the sum below
• Like decimal addition, there are two cases:
- Add the two numbers in a place and the result is
expressed as a single digit
- Add two numbers in a place and the result requires
carrying to the next higher place
Computing on Representations
• When digital information is changed through computation,
it is known as computing on representations
• For example: changing
the brightness and
contrast of a photo
Brightness and Contrast
• Brightness refers to how close to white the pixels are

• Contrast is the size of difference between the darkest and
lightest portions of the image
• Photo manipulation software often gives the values of the
pixels in a Levels graph
Levels Graph
• 0 percent is called the

black point, or 000000
• 100 percent is the white
point, or ffffff
• The midpoint is called the
gamma point and it is the
midpoint in the pixel range
Brightness
• We want all the pixels to be

closer to intense white, but to
keep their relative
relationships
• Add 16 to each pixel
• A pixel which is
197, 197, 197 becomes 213,
213, 213
Contrast
• Goal is not to shift the Levels

diagram right, but rather to
“stretch it out” toward the
right
• Add an amount to each pixel
as before
- add a smaller amount for dark
pixels
– Add a larger amount for light
pixels
New Levels Graph
New Levels Math
• For every original pixel Po, subtract the amount of the lower
end of the range:
Po – 38
• That tells how much to increase each pixel position; smaller
(darker) numbers get lightened less than larger (lighter)
numbers
New Levels Math
• Then we multiply by the size of the new interval divided by

the size of the old interval
• Add the low end of the original range back in again to

return each pixel to its new position along the second line
New Levels Math
• The equation for the value in each pixel position of the new
image:
Pn = (Po – 38)*1.08 + 38
• Round the answer to a whole number
• Try it yourself!
For original pixel 239, did you get 255?
For original pixel 157, did you get 167?
Adding Color
• Whenever the 3 bytes differ in value there is color

• “highlights” are the lightest 25 percent of the pixels, and
“shadows” are the darkest 25 percent of the pixels
• Must count the pixels to know those values:
– There are 600 × 800 = 480,000 pixels
in the image
Adding Color
• Pick the lowest pixel value and go up to the next level and
keep adding until you have approximately ¼ of the total
pixels (in this case 120,000)
• Pick the highest pixel value and go down to the next level,
adding until you have the top ¼ of the total pixels
Adding Color
Adding Color
Pixel Type R Chg G Chg B Chg
Highlights +8 0 -4
Midrange +9 +6 -4
Shadows +15 0 -6
Changes we want to make

Adding Color
• Simple algorithm to colorize

an image:
- For each pixel, get the red sub
pixel and check its range
- Using the color modifications
given above for that portion of
the image adjust the color of
each sub pixel
THANK YOU

L5

Uploaded by

Copyright:

Available Formats

L5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

L5

Uploaded by

Copyright:

Available Formats

Color representation in

• Explain how RGB color is represented in bytes

• Digitizing is more than letters, numbers, and metadata

• Color on a Computer Display:

• Turning on one light at a time, the display turns red, green, or

• Combining red and green

• Paint reflects some colors

• In the case of a pixel, the

• At left in the close-up of an

• The intensity of RGB light is usually given by a binary number

• Black is the absence of light:

• White is the full intensity of each color:

• If we want the sub pixel to be at half intensity : each bit

• Which powers of 2 combine to make the decimal number?

• Changing Colors by Addition

• Same as decimal addition but with only two digits

• Brightness refers to how close to white the pixels are

• 0 percent is called the

• We want all the pixels to be

• Goal is not to shift the Levels

• Then we multiply by the size of the new interval divided by

• Add the low end of the original range back in again to

• Whenever the 3 bytes differ in value there is color

Pixel Type R Chg G Chg B Chg

Changes we want to make

• Simple algorithm to colorize

You might also like