S
CSC 103
Pixels, RGB Color,
Digital Images
Pixels: The Building Blocks of Digital Images
A Pixel
 Pixel is short for Picture Element
 Each pixel displays 1 color
 The color of one pixel
can be any one of
16.7 million colors
Examples of Pixels
in a raster/bitmap image
Examples of Pixels
in an image
A pixel’s
Bit depth
determines its
range, or amount
of possible colors
Bit Depth of A Pixel
Bit depth of pixels can vary…
 Can be 1-bit bitmap
(only black or white pixels)
 Can be 8-bit grayscale
(256 shades of gray)
 Can be 24-bit RGB Color
(millions of colors)
1 Bit Image (Bitmap)
 Only Black or white pixels
No Gray Pixels
 Very high-resolution
is required for good quality
 Used when scanning
text, forms or
line drawings
0
0
1
1
8-Bit Image- Grayscale
 28 = 256 Choices of grey
 Shades of Gray range
from 0-255
 Black (0) to White (255)
or 1111 1111 (white)
0000 0000 (black) in Binary
0
255
24-Bit Full Color- RGB
 Composed of combinations
of Red, Green, Blue light
 3 8-bit channels
of 28 = 256
 2563 = 16.7 million color choices
 Red (0-255)
Green (0-255)
Blue (0-255)
24-Bit – RGB Color Slider
Read as 0, 0, 0
24-Bit – RGB Color Slider
Read as 163, 96, 54
RGB Color Slider - Pixlr
HSB Color Slider - Pixlr
Easier to edit colors and
create colors using
Hue, Saturation,
Lightness (or Brightness)
Additive vs. Subtractive Color
 RGB color is “additive” color
Add all 3 colors together – get white.
Subtract to black
 Inks or Paint is “subtractive” color
Subtract CMY colors to get white
(paper or canvas)
Mix all 3 colors to get black/brown
Image Size & Resolution
 Higher Resolution means smaller pixels
and more detail that is captured
 Higher Resolution means images can be
enlarged (or zoomed in) without losing
detail – more pixels per inch
 Low Resolution means larger pixels, less
detail and more blurring and “bitmapping”
especially when enlarged
Image Size & Resolution
 High Resolution (print)
more pixels per inch – 300 ppi
 Low Resolution (web and screen)
less pixels per inch – 72 ppi
Megapixels?
 Megapixels – measures total pixels
captured in millions (digital cameras)
 12 megapixel image would include
12 million pixels (4000 x 3000 px)
 Resolution is 72ppi by default, but
can be increased by adjusting size.
File Formats of Pixel Images
 BMP, TIF format used for 1-bit black & white images.
(1-bit images are not used very much anymore)
 TIF format used for 8-bit grayscale images. (Print)
 JPG, PNG, TIF format used for 24-bit color images.
 GIF, PNG format used for 8-bit color images.
Used to reduce colors (logos, clip art), for smaller file size
and provide transparency options and even animation (GIF)
8-Bit – Color Formats
 GIF format and PNG
format supports 8-bit
color (256 total colors)
and transparency
 And even animation!
Terms to Know
 Pixel, bit-depth, 1-bit (bitmap),
8-bit (grayscale), 24-bit (RGB color)
 Bitmap (b & w), Grayscale (256 grays)
RGB (16.7 million colors)
 Additive/Subtractive Color,
Hue, Saturation, Lightness/Brightness
Image Size, Megapixels
Resolution, PPI – Pixels per inch
Low 72, High 300

More Related Content

PPT
Screen and image resolution
PPT
Pixel resolution
PPTX
Lect 02 second portion
PPTX
CSC103 Vector vs Raster Graphics
PPS
Image file formats
PPTX
PPTX
3 D Technology
PPT
multimedia image.ppt
Screen and image resolution
Pixel resolution
Lect 02 second portion
CSC103 Vector vs Raster Graphics
Image file formats
3 D Technology
multimedia image.ppt

What's hot (20)

DOC
Seminar Report on image compression
PPTX
PPT
Interlaced and progressive Camera
PPT
Multimedia systems
PPT
PPTX
Multimedia fundamental concepts in video
PDF
Commonly Used Image File Formats
PPTX
Color model
PPTX
Digital Audio in Multimedia
PPT
Chapter 6 : VIDEO
PPTX
Image recognition
PPT
Image processing9 segmentation(pointslinesedges)
PDF
Image compression
PPTX
Image Restoration (Frequency Domain Filters):Basics
PPT
Image Files Formats
PPTX
Digital image formats
PPTX
1. digital image processing
PPT
PPT
3D-TV-PPT
PPTX
Histogram Processing
Seminar Report on image compression
Interlaced and progressive Camera
Multimedia systems
Multimedia fundamental concepts in video
Commonly Used Image File Formats
Color model
Digital Audio in Multimedia
Chapter 6 : VIDEO
Image recognition
Image processing9 segmentation(pointslinesedges)
Image compression
Image Restoration (Frequency Domain Filters):Basics
Image Files Formats
Digital image formats
1. digital image processing
3D-TV-PPT
Histogram Processing
Ad

Similar to CSC103 Digital Images, Pixels, RGB Colors (20)

PDF
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
PDF
Technical concepts for graphic design production 4
PPTX
VCT 3080 Resample Lecture
PPT
Graphics
PDF
Lecture 2-2023.pdf
PDF
Lecture 2-2023.pdf
PPT
SD & D Bitmapped Graphics
PDF
Lesson 1 • Introduction to Photoshop
PPTX
PPTX
Understanding Raster Graphics
PPT
Digital Imaging Basics
PPTX
Chap9 10
PPTX
Unit iv graphics
PPTX
Chap46
PPT
Graphics
PPTX
PPTX
Multimedia Systems- bitmap and vector images-part 5.pptx
PPTX
RGB Color Model and Monitor Resolution
PDF
E2_T1_Mia-Bonilla
PDF
Prepress and File Formats: Preparing Images for Print
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
Technical concepts for graphic design production 4
VCT 3080 Resample Lecture
Graphics
Lecture 2-2023.pdf
Lecture 2-2023.pdf
SD & D Bitmapped Graphics
Lesson 1 • Introduction to Photoshop
Understanding Raster Graphics
Digital Imaging Basics
Chap9 10
Unit iv graphics
Chap46
Graphics
Multimedia Systems- bitmap and vector images-part 5.pptx
RGB Color Model and Monitor Resolution
E2_T1_Mia-Bonilla
Prepress and File Formats: Preparing Images for Print
Ad

More from Richard Homa (20)

PPTX
Programming 1: Compilers, Interpreters & Bytecode
PPTX
CSC103 Digital Security
PPTX
CSC 103 Databases Overview
PPTX
CSC103 Intro to Programming
PPTX
CSC103 Gaming Overview (for Everyone)
PPTX
CSC103 3D Software & Technology
PPTX
CSC103 Bits, Bytes & Binary
PPTX
CSC103 Web Technologies: HTML, CSS, JS
PPTX
CSC103 Processing, Memory & Storage
PPTX
CSC103 Digital Devices: Device Basics
PPTX
CSC103 Internet
PPTX
CCS103 Bits, Bytes, Binary
PPTX
Excel Review Quiz
PPTX
CSC102 Excel Basics
PPTX
CSC102 Word Paragraph Formatting
PPTX
CSC102 Computer Software
PPTX
CSC102 Computer Connectivity
PPTX
CSC 102 Computer Intro
PPTX
Creating Immersive Technology Experiences with Web-based Software & Resources
PPTX
Creating Immersive Technology Experiences with Web-based Software & Resources
Programming 1: Compilers, Interpreters & Bytecode
CSC103 Digital Security
CSC 103 Databases Overview
CSC103 Intro to Programming
CSC103 Gaming Overview (for Everyone)
CSC103 3D Software & Technology
CSC103 Bits, Bytes & Binary
CSC103 Web Technologies: HTML, CSS, JS
CSC103 Processing, Memory & Storage
CSC103 Digital Devices: Device Basics
CSC103 Internet
CCS103 Bits, Bytes, Binary
Excel Review Quiz
CSC102 Excel Basics
CSC102 Word Paragraph Formatting
CSC102 Computer Software
CSC102 Computer Connectivity
CSC 102 Computer Intro
Creating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & Resources

Recently uploaded (20)

PDF
Abstractive summarization using multilingual text-to-text transfer transforme...
PPTX
2018-HIPAA-Renewal-Training for executives
PPTX
Modernising the Digital Integration Hub
PPTX
Custom Battery Pack Design Considerations for Performance and Safety
PPT
Module 1.ppt Iot fundamentals and Architecture
PDF
CloudStack 4.21: First Look Webinar slides
PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
PDF
A contest of sentiment analysis: k-nearest neighbor versus neural network
PPTX
Chapter 5: Probability Theory and Statistics
DOCX
search engine optimization ppt fir known well about this
PDF
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
PDF
A comparative study of natural language inference in Swahili using monolingua...
PDF
sbt 2.0: go big (Scala Days 2025 edition)
PPTX
The various Industrial Revolutions .pptx
PDF
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
PDF
Hindi spoken digit analysis for native and non-native speakers
PPTX
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PDF
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
PDF
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
Abstractive summarization using multilingual text-to-text transfer transforme...
2018-HIPAA-Renewal-Training for executives
Modernising the Digital Integration Hub
Custom Battery Pack Design Considerations for Performance and Safety
Module 1.ppt Iot fundamentals and Architecture
CloudStack 4.21: First Look Webinar slides
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
A contest of sentiment analysis: k-nearest neighbor versus neural network
Chapter 5: Probability Theory and Statistics
search engine optimization ppt fir known well about this
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
A comparative study of natural language inference in Swahili using monolingua...
sbt 2.0: go big (Scala Days 2025 edition)
The various Industrial Revolutions .pptx
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
Hindi spoken digit analysis for native and non-native speakers
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game

CSC103 Digital Images, Pixels, RGB Colors

  • 1. S CSC 103 Pixels, RGB Color, Digital Images Pixels: The Building Blocks of Digital Images
  • 2. A Pixel  Pixel is short for Picture Element  Each pixel displays 1 color  The color of one pixel can be any one of 16.7 million colors
  • 3. Examples of Pixels in a raster/bitmap image
  • 4. Examples of Pixels in an image A pixel’s Bit depth determines its range, or amount of possible colors
  • 5. Bit Depth of A Pixel Bit depth of pixels can vary…  Can be 1-bit bitmap (only black or white pixels)  Can be 8-bit grayscale (256 shades of gray)  Can be 24-bit RGB Color (millions of colors)
  • 6. 1 Bit Image (Bitmap)  Only Black or white pixels No Gray Pixels  Very high-resolution is required for good quality  Used when scanning text, forms or line drawings 0 0 1 1
  • 7. 8-Bit Image- Grayscale  28 = 256 Choices of grey  Shades of Gray range from 0-255  Black (0) to White (255) or 1111 1111 (white) 0000 0000 (black) in Binary 0 255
  • 8. 24-Bit Full Color- RGB  Composed of combinations of Red, Green, Blue light  3 8-bit channels of 28 = 256  2563 = 16.7 million color choices  Red (0-255) Green (0-255) Blue (0-255)
  • 9. 24-Bit – RGB Color Slider Read as 0, 0, 0
  • 10. 24-Bit – RGB Color Slider Read as 163, 96, 54
  • 11. RGB Color Slider - Pixlr
  • 12. HSB Color Slider - Pixlr Easier to edit colors and create colors using Hue, Saturation, Lightness (or Brightness)
  • 13. Additive vs. Subtractive Color  RGB color is “additive” color Add all 3 colors together – get white. Subtract to black  Inks or Paint is “subtractive” color Subtract CMY colors to get white (paper or canvas) Mix all 3 colors to get black/brown
  • 14. Image Size & Resolution  Higher Resolution means smaller pixels and more detail that is captured  Higher Resolution means images can be enlarged (or zoomed in) without losing detail – more pixels per inch  Low Resolution means larger pixels, less detail and more blurring and “bitmapping” especially when enlarged
  • 15. Image Size & Resolution  High Resolution (print) more pixels per inch – 300 ppi  Low Resolution (web and screen) less pixels per inch – 72 ppi
  • 16. Megapixels?  Megapixels – measures total pixels captured in millions (digital cameras)  12 megapixel image would include 12 million pixels (4000 x 3000 px)  Resolution is 72ppi by default, but can be increased by adjusting size.
  • 17. File Formats of Pixel Images  BMP, TIF format used for 1-bit black & white images. (1-bit images are not used very much anymore)  TIF format used for 8-bit grayscale images. (Print)  JPG, PNG, TIF format used for 24-bit color images.  GIF, PNG format used for 8-bit color images. Used to reduce colors (logos, clip art), for smaller file size and provide transparency options and even animation (GIF)
  • 18. 8-Bit – Color Formats  GIF format and PNG format supports 8-bit color (256 total colors) and transparency  And even animation!
  • 19. Terms to Know  Pixel, bit-depth, 1-bit (bitmap), 8-bit (grayscale), 24-bit (RGB color)  Bitmap (b & w), Grayscale (256 grays) RGB (16.7 million colors)  Additive/Subtractive Color, Hue, Saturation, Lightness/Brightness Image Size, Megapixels Resolution, PPI – Pixels per inch Low 72, High 300