Transcript Audio

Colour
• Look at the meaning of
colour – eyes response.
• Colour in the computer.
• Properties of colour. Hue,
Saturation and Luminance.
• Microsoft versions.
• Limitations of luminance
algorithms in computers.
• Colour in Matlab
• Demos
What is colour?
• Visible light is broken up into
wavelengths ranging from
Red to Violet. (rainbow)
• This is called the visible
spectrum.
• We perceive colours through
the stimulation of three types
of receptors in our eye called
cones.
The eye’s response to
colour
• One cone is more responsive
to red, one to green and one
to blue.
• But there is overlap.
• Any single wavelength may
stimulate more than one
type of receptor.
The eye’s response to
colour
• If we can artificially stimulate the
receptors to the same degree as
a naturally occurring colour, then
the eyes will perceive that colour.
• We therefore try three colours to
stimulate the receptors.
Colour in the
computer
• The computer monitor only
emits red green and blue
light.
• It is the combination of these
lights which give the
perception of colour.
• We fool the eye to “see”
other colours.
• However we cannot simulate
all colours in this way.
Primary colours
• Because Red, Green and
Blue are used to produce all
the other colours on the
computer monitor, they are
called primary colours.
Mixing of colours
• They are mixed together and the
system is arranged so that
mixing the maximum (and equal)
values of red, green and blue
produce a nominal white colour.
• This is called “additive mixing”
• Do not confuse with “subtractive
mixing” (dyes) which subtract to
give black.
Secondary colours
• If equal amounts of all primary
colours give white, what do equal
amounts of any two of them
give?
– Red + Blue gives magenta
– Green + Blue gives cyan
– Red + Green gives yellow
• These important results are
called secondary colours and are
easily generated.
• If a monitor loses a colour
connection the picture will be
tinted towards one of these
colours.
24 bit colour
• We will consider “true colour”
or 24 bit colour in the
computer.
• These 24 bits are divided into
three groups of 8 bits.
• This gives a range of 0-255
for each colour.
• Each group controls the
intensity of the primary
colours, red green and blue.
White or neutral
colours
• As mentioned above the
maximum equal values of
red, green and blue produce
white light on the computer
monitor.
• That is when red=255,
green= 255 and red=255.
• We can describe this 24 bit
colour (in hex) as FFFFFF.
• 3 byte representation
White or neutral
colours
• Lesser equal amounts of the
three primary colours produce
neutral colours (shade of grey).
• Put another way, these
combinations have no colour
cast.
• Thus 000000 (black) , 404040
and F5F5F5 (all hex) are all
examples of neutral colours.
• They can be considered as
proportions of white.
• Try with “Paint”
Saturation
• If a colour contains only one
or two primary colours, it is
said to be fully (100%)
saturated.
• In other words the colour is
as “strong” (saturated) as it
can be. (given the three
primary colours).
Saturation
• If we add any of the missing
colour(s) we desaturate the
colour.
• We are effectively adding some
white.
• Why?
• Take a red colour FF0000
• Red and green are missing; so
add some.
• FF4550 = BA0005 + 454545
• 454545 is the proportion of white
we have added.
Saturation
• Adding more white (equal
amounts of red, green and
blue) desaturates the colour.
• “Pastel” colours are
desaturated colours.
• White (and greys) are totally
desaturated. (0% saturation)
• For example pink is
desaturated red.
• Try this with “Paint”
Saturation
• From the above description the
equation for saturation is
intuitive:
Saturation
max(red , green, blue)  min(red , green, blue)
100%
max(red , green, blue)
• So if any primary colour is
missing then min=0 and
saturation=100%
• If all primary colours are present
in equal amounts, then max=min
and saturation =0%.
Microsoft Saturation
• Microsoft have a different idea
about saturation. It is a variation
of equation.
Saturation
max(red , green, blue)  min(red , green, blue)
 240
max(red , green, blue)  min(red , green, blue)
• But it is modified according to the
brightness values.
• (see
support.microsoft.com/kb/q292
40/)
• Microsoft set the maximum
saturation as 240, that is why we
multiply by 240.
Saturation
• We can make a desaturated
colour saturated by removing
the min(r,g,b) from all
colours.
• Then the smallest colour
primary will be missing.
• But one property of colour
remains the same.
• The colour hue.
Hue
• Colour hue describes the
“tone” of a colour. (informal)
• So pink FF8080 has the
same colour hue as red.
• It is expressed in degrees
around a colour circle.
• Colours from red to blue are
arranged around the circle
and the colour is specified in
degrees.
Hue
• Angular position of arrow
determines the colour (hue).
C
Hue
• Angular position of arrow is
determined (and specified) by the
distance along the line joining
two of the three primary colours.
• All saturated colours lie along
these lines.
• We can consider the centre of
the circle/triangle as white (totally
desaturated).
C
Hue
• Each of the lines is divided into
120 steps. The beginning and the
end of the line correspond to
0,120, 240 degrees of angle.
• Mid points correspond to 60
degree intervals.
• But the points in between do not
(quite).
• Nevertheless they are counted
as degrees of colour.
• Easier for computation this way.
Hue
• So for saturated colours , the
arrow will lie on one (and only
one) of the lines .
• To calculate the colour hue we
must find how far along the line
the arrow lies.
• (For desaturated colours it will
point towards one line, unless the
colour is neutral)
C
Hue
• In the diagram the arrow lies on
the line red to green, but more
towards the green primary.
• Max(rgb) will be equal to the
green value in this case.
• We have to find how far along the
line from red to green it lies.
C
Hue
• If red corresponds to zero
degrees and green corresponds
to 120 degrees. How many
degrees is point C?
• Well, if green is max(r,g,b) then
the point lies between the mid
point of the line 60 degrees (red
value =green value) and the
green end (120 degrees) (red
value=0).
C
Hue
• An equation to express this
would be:
Huemax green  60 (1 
 60 (2 
red value
)  60
green value
red value
)
green value
But green value  max(r,g, b)
Hue  60 (2 
C
red value
)
max(r , g , b)
Hue
• However, if green is dominant
and point C lies on the line
between green and blue.
• Then the hue values will vary
between green (120 degrees)
and the midpoint of the green
blue line.
C
Hue
• An equation to express this
would be:
Huemax green  60 (1 
 60 (2 
blue value
)  60
green value
blue value
)
green value
But green value  max(r,g, b)
Hue  60 (2 
C
blue value
)
max(r , g , b)
Hue
• We have not considered
unsaturated colours, when the
third colour (blue in the first
case) is not zero.
• If we subtract the smallest colour
(blue) from all of the others. The
colour will be saturated, but of
the same colour hue.
• The resultant arrow will then lie
on one of the adjoining lines and
we can use the equations as
before.
Huemax green  60 (1 
blue value
)  60
green value
blue value
 60 (2 
)
green value
But green value  max(r,g, b)
Hue  60 (2 
blue value
)
max(r , g , b)
Hue
• So subtracting the minimum
values in the first case gives
Hue  60 (2 
 60 (2 
red value blue value
)
max(r , g , b)  blue value
red value blue value
)
max(r , g , b)  min(r , g , b)
• And subtracting the minimum
value (red) in the second case
gives
Hue  60 (2 
 60 (2 
blue value red value
)
max(r , g , b)  blue value
blue value red value
)
max(r , g , b)  min(r , g , b)
• These two equations are the
same, so we use the last one to
avoid double minuses.
Hue
• And if we do this while
considering all primary colours at
maximum, we get a set of
equations. One for each case.
• When red is dominant
(maximum)
Hue  60 (
green value blue value
)
max(r , g , b)  min(r , g , b)
• When green is dominant
Hue  60 (2 
blue value red value
)
max(r , g , b)  min(r , g , b)
• When blue is maximum
Hue  60 (4 
red value green value
)
max(r , g , b)  min(r , g , b)
Hue anomalies
• The first equation can give
negative values (when When red
green is minimum. However
since the answer is in degrees of
a circle we can add 360 degrees
and get a positive (valid) answer)
• Microsoft have a values of 240
as maximum hue, so to convert
360 degrees to 240 Microsoft
units we must multiply by:
– 240/360 = 2/3 = 0.667
Hue
• Lets get the hang of this with
some exercises.
• Calculate the colour hue if (in
decimal) green=255, blue = 45
and red = 50
– Max(rgb)=255 so we use
Hue  60 (2 
blue value red value
)
max(r , g , b)  min(r , g , b)
– Min(r,g,b)=45
– So in the equation
blue value red value
)
max(r , g , b)  min(r , g , b)
45  50
 60 (2 
)
255 45
 119o (rounded)
Hue  60 (2 
 79 Microsoftunits.Check it!
Brightness
• Brightness is a perception of
the light emitted (or reflected)
from an object.
• But our eyes are more
sensitive to green light than it
is for red and green light.
• For the red green and blue
lights emitted by a computer
monitor our eyes sensitivities
are 30%, 59% and 11%
respectively.
Brightness/Value/Inten
sity/Luma
• Brightness, value, lightness,
Intensity are terms used to
loosely associate brightness with
a colour.
• In computer systems no weight is
given to the different colours.
• “Value” is generally taken to be
max(rgb) Matlab (rgb2hsv)
• Brightness, lightness, “luma” as
(max(r,g,b)-min(r,g,b))/2
(Microsoft, but 240 max, so
multiply 240/255)
• Intensity as (r + g +b ) / 3
HSB Hue, Saturation
and Luma/Brightness
• Many packages specify
colours in terms of Hue,
saturation and brightness
instead (or as well as RGB).
• Slightly different algorithms
exist (Microsoft do not follow
convention)
• None of these algorithms
take into account the eyes
differing sensitivities to red,
green and blue.
Hue, Saturation and
Luma Exercises
• Find the Hue ,Saturation and
Luma of the following colours
and convert to Microsoft units as
a check.
–
–
–
–
Red = 240, Green = 100, blue = 50
Red = 240, Green = 50, blue = 100
Red = 150, Green = 100, blue = 50
Red = 40, Green = 100, blue = 150
Colour spaces
• RGB and HSB are called
colour spaces
• This means that a colour can
be described by suitable
selection of the variables in
the colour space.
• Other colour spaces exist
– YUV ( considers sensitivity)
– Lab
Production of a
greyscale image
• Although a greyscale image
can be produced from a
colour image, by reducing
the saturation in HSL
colourspace. Better results
would be obtained by taking
the changes in sensitivity of
the eye into account.
• So use from the YUV system
Y=0.3R + 0.59G + 0.11B
Modifications to our
bitmap structure for
colour
240
63
240
63
240
63
Our matrix is now
Of size
640 x 480 x 3
Now we need three
separate matrices,
one for each colour.
Each matrix holds
values which represent
the corresponding
colour in the image
Colour in Matlab
• Matlab stores (as does 24 bit
.bmp) colour images in a three
dimensional arrays.
• You can think of the array as
three colour (two dimensional)
pictures/planes, each
representing one of the colours
red, green and blue, (indexed as
1,2,3 respectively.
• In Matlab syntax
P(row, column, colour) will select a
single pixel
So P(40, 50, 2) will select the pixel on
row 40, column 50 colour green (2)
Primary colours in
Matlab
• If we create an 3D array which is
filled with zeros to experiment
with colour.
mycolarray=zeros(100, 180,3)
Cast it so as to use byte
representation:
mycolarray=uint8(mycolarray)
Fill the red plane with 255:
mycolarray(:,:,1)=255
And view it
image(mycolarray)
Primary colours in
Matlab
• Reset the red plane to zeros
mycolarray(:, :, 1) = 0
• and repeat for green
mycolarray(:,:,2)=255
• and then blue (exercise).
• Look at HSL values.
• Are they as expected?
White or neutral
colours in Matlab
• If you fill all the planes with
255 you will get a white image.
• Do this plane by plane as
before. (it is possible to do it in
one go.
• Change the values in all arrays
between 0 and 255.
• The colours should be neutral.
• Save the image
imwrite(mycolarray, ‘myfile.bmp’,)
And inspect using “Paint”
White or neutral
colours in Matlab
• Look at the hue saturation and
brightness values.
• Are they as expected.
Secondary colours in
Matlab
• You are now going to
produce the secondary
colours; yellow, cyan and
magenta.
• Fill you array with 255 on two
of the planes only.
Fill blue and green (yellow)
Fill red and green (cyan)
Fill red and blue (magenta)
• Look at HSL values as
before.
The eyes differing
sensitivity to colour
• Make up an array with the first 60
columns red, the next 60 green
and the last 60 blue.
• Use 255 for all values.
mycolarray(:,: ,:)=0
mycolarray(:,1:60 ,1)=255
mycolarray(:,61:120 ,2)=255
mycolarray(:,121:180 ,3)=255
• Look at it.
• What is the brightest colour?
• What is the darkest colour?
• Sketch how you think it would
look in monochrome (black and
white)
The eyes differing
sensitivity to colour
• Make a monochrome version
using the “Microsoft”
algorithm, setting red green
and blue to equal values
giving a neutral image.
– See Code 1 at end of
presentation
This would not be a good
monochrome picture.
True Luminance
• Make a monochrome version
using the equation for the Y
(Luma) component of YUV.
See Code 2 at end of presentation
• Inspect it
• Now the monochrome image
reflects the eyes differing
sensitivity to colour.
• Note that all of the band are less
than white.
• This allows true white to be
represented correctly.
Mix Colours
• Create the colours that you
used in the Hue exercises.
• Inspect using “Paint”.
• Are the HSL values the same
as you calculated.
True luma demo code
Code 1
mycolarray=double(mycolarray)
mono_msoft(:,:,1) =(max(mycolarray(:,:,3),max(mycolarray(:,:,1), mycolarray(:,:,2)))+ ...
min(mycolarray(:,:,3),min(mycolarray(:,:,1), mycolarray(:,:,2))))/2
mono_msoft(:,:,2) =mono_msoft(:,:,1)
mono_msoft(:,:,3) =mono_msoft(:,:,2)
image(uint8(mono_msoft))
Code 2
mycolarray=double(mycolarray)
mono_true_lum(:,:,1) =0.3*mycolarray(:,:,1)+0.59*mycolarray(:,:,2)+0.11*mycolarray(:,:,3)
mono_true_lum(:,:,2) = mono_true_lum(:,:,1)
mono_true_lum(:,:,3) = mono_true_lum(:,:,2)
image(uint8(mono_true_lum))