mca101 : computeR gRaphics
coloR RepResentation
Raghav B. Venkataramaiyer
CSED TIET Patiala India.
August 23, 2024
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
what aRe colouRs
Colour is the visual perception based
on the electromagnetic spectrum.
Though color is not an inherent prop-
erty of matter, color perception is re-
lated to an object’s light absorption,
reflection, emission spectra, and in-
terference — Wikipedia
FiguRe: Image Courtesy: Wikipedia
Rgb colouRs
Perception of color originates from
different light wavelength or spec-
tral sensitivity in cone cell types,
which is then processed by the brain.
For most humans, colors are per-
ceived in the visible light spec-
trum with three types of cone cells
(trichromacy)
— Wikipedia
FiguRe: Image Courtesy: Wikipedia
visible spectRum
FiguRe: Visible Spectrum. Courtesy: Wikipedia
Rgb/a RepResentation
A colour in machine representation is
a 3-vector for RGB, i.e.
c ∈ R3[0,1] in floating-point representation;
c ∈ Z3[0,255] in 8-bit fixed-point representation.
a 4-vector for RGBA, i.e.
c ∈ R4[0,1] in floating-point representation;
c ∈ Z4[0,255] in 8-bit fixed-point representation.
outline
1 colouRs — intRoduction
Image Representation
2 colouR tables
3 colouR spaces
4 InteRpolation
an image as composition of pixels
An image is represented in pixels;
Conceptually, an image may be thought of split into a
rectangular grid of height H and width W;
Each cell of such a grid, is called a pixel. A pixel is the
smallest unit of area patch in an image and contains a
uniform colour throughout;
H × W is called the resolution of such an image.
an image as a bounded space
An optical camera sensor receives coloured signals
within the spatial opening from its shutter;
The sensor registers the signals as energy/ intensity
corresponding to each of the R,G,B frequencies of
visible spectrum.
The signals are physically continuous in space.
In practice, samples are discrete in space.
The space is 2-dimensional and bound on top, bottom,
left and right.
Hence an image may also be interpreted as a quantised
and bounded spatial signal.
image channels
Each of R, G, B, A etc. are known as channels.
If a camera may sample more frequencies, including
ultra- and infra-optical spectrum, the resulting image
is called a hyper-spectral image.
The RGB image has 3-channels
The RGBA image has 4-channels
A hyper-spectral image may have many channels, say
C channels.
image in floating-point RepResentation
A floating-point may be 16-bit, 32-bit or 64-bit per channel,
generally used internally within graphic frameworks like
OpenGL/ WebGL etc.
An image with resolution H × W,
containing C channels
is represented as x ∈ RC×H×W
[0,1] .
An RGB image with resolution H × W,
is represented as x ∈ R3×H×W
[0,1] .
An RGBA image with resolution H × W,
is represented as x ∈ R4×H×W
[0,1] .
image in 8-bit fixed-point
A fixed-point may be 8-bit, 16-bit, 32-bit or 64-bit per
channel, generally 8-bit is most commonly used.
An image with resolution H × W,
containing C channels
is represented as x ∈ ZC×H×W
[0,255] .
An RGB image with resolution H × W,
is represented as x ∈ Z[0,255]
3×H×W
.
An RGBA image with resolution H × W,
is represented as x ∈ Z4×H×W
[0,255] .
question
1 How is a grayscale image with resolution H × W with floating-point representation
described mathematically?
2 How is a grayscale image with resolution H × W with 8-bit fixed-point
representation described mathematically?
3 How is a grayscale image with resolution H × W with 16-bit fixed-point
representation described mathematically?
question
1 What is the minimum size (in bytes) required to store an uncompressed RGB image
in FHD resolution. Assume the image header to be H bytes.
2 What is the minimum size (in bytes) required to store an uncompressed RGBA
image in FHD resolution. Assume the image header to be H bytes.
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
colouR tables
In order to improve storage efficiency of images,
Included colours are listed, the count n < 256
generally. This is called a colour table.
For each pixel, the colour is approximated and
assigned to be one of the colours in the table, and the
colour index is stored instead of the complete colour
information.
This reduces the storage requirement by order of
magnitude.
The only additional storage requirement is that of the
colour table, n × 3 bytes
stoRage efficiency
For example,
RGB image requires 8 × 3 = 24 bits per pixel; whereas
Colour table with upto 2 colours would require only
1-bit per pixel;
Colour table with 3-4 colours would require only 2-bit
per pixel;
Colour table with 5-8 colours would require only 3-bit
per pixel;
stoRage efficiency
Num Bits Max Num Colours
1 2
2 4
3 8
4 16
5 32
6 64
7 128
8 256
question
What is the minimum size (in bytes) of storage required to
store an image with colour table with 100 RGB-colours?
Assume the image header to be H bytes.
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
hsl and hsv
FiguRe: Image Courtesy: Wikipedia
cmyK (pRint technology)
FiguRe: When subtractive CMY inks are
combined at full strength, pairwise combinations FiguRe: Color printing typically uses ink of four
are red, green, and blue. Combining all three colours: cyan, magenta, yellow, and black.
gives an imperfect black colour.
Rgb vs cmyK
A comparison of CMYK and RGB color
models. This image demonstrates the
difference between how colors will look on
a computer monitor (RGB) compared to how
they might reproduce in a particular CMYK
print process.
Image Courtesy: Wikipedia
colouR mixing: additive vs subtRactive
additive colouR mixing subtRactive colouR mixing
Three overlapping light bulbs in a vacuum, Three splotches of paint on white paper,
adding together to create white. subtracting together to turn the paper black.
FiguRe: Image Courtesy: Wikipedia FiguRe: Image Courtesy: Wikipedia
otheR colouR spaces
1 Munsell (Munsell Colour System)
2 Pantone (Pantone Matching System)
3 Colour Fan Decks (by Paint Manufacturers)
4 Y,u,v Colour Space
5 L,a,b Colour Space
(Read More)
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
Linear Interpolation
Barycentric Interpolation
lineaR inteRpolation
Point on straight line segment connecting
vectors a, b, may be given parameterised by
t ∈ R[0,1] as,
f(t) = (1 − t)a + t b
= a + t(b − a)
t = 0 ⇐⇒ f(t) = a
t = 1 ⇐⇒ f(t) = b
lineaR inteRpolation
Solution
Point on straight line connecting a, b, and in between, may be
given parameterised by t ∈ R[0,1] as,
Question
Given two points f(t) = (1 − t)a + t b
a, b ∈ R2 , find the point
on straight line Here if the Euclidean distance ∆E (a, b) = 1 unit, then
connecting them, and in ∆E (a, f(t)) = 1 − t units, and ∆E (f(t), b) = t units.
between, so that it is twice Hence,
as far away from b as it is
from a. 2
t= ∵ t = 2(1 − t)
3
2 1 2
p = f(t = ) = a + b
3 3 3
lineaR inteRpolation
Solution
Point on hypothetical straight line in RGB colour space
connecting a, b, and in between, may be given parameterised
by t ∈ R[0,1] as,
Question
Given two RGB colours f(t) = (1 − t)a + t b
a, b ∈ R3 , find the colour
c, so that it is twice as far Here if the Euclidean distance ∆E (a, b) = 1 unit, then
away from b as it is from ∆E (a, f(t)) = 1 − t units, and ∆E (f(t), b) = t units.
a. Hence,
2
t= ∵ t = 2(1 − t)
3
2 1 2
p = f(t = ) = a + b
3 3 3
outline
1 colouRs — intRoduction
2 colouR tables
3 colouR spaces
4 InteRpolation
Linear Interpolation
Barycentric Interpolation
baRycentRic cooRdinates
With respect to the vertices a, b and c, the
points inside the triangle may be
represented as (λa , λb , λc ), where
λa + λb + λc = 1.
FiguRe: Image Courtesy:
Wikipedia
baRycentRic cooRdinates
With respect to the vertices a, b and c, the
points inside the triangle may be
represented as (λa , λb , λc ), where
FiguRe: Barycentric λa + λb + λc = 1.
coordinates are used for
blending three colors over a
triangular region evenly in
computer graphics. Image
Courtesy: Wikipedia
