5. Representing Images: Pixels and Color Codes

Learning Objectives Define a pixel as the smallest unit of a digital image. Explain how computers use the RGB color model to represent different colors. Decode simple RGB color codes to identify primary and secondary colors. Describe the relationship between pixels, resolution, and image quality. Calculate the total number of pixels in an image given its width and height. Create a simple 2x2 pixel art image using given RGB values. Have you ever zoomed in on a photo so much that you see tiny squares? 🤔 Those squares are the secret to how computers store every image you've ever seen! In this lesson, we'll pull back the curtain on digital images. You will learn how computers see pictures not as whole images, but as a giant grid of tiny dots called pixels, each with...

TermDefinitionExample PixelShort for 'Picture Element', it is the smallest single dot of light on a digital screen. A grid of thousands or millions of pixels makes up a complete image.If you look very closely at your phone screen, you can see the individual red, green, and blue lights that form a single pixel. Bitmap ImageAn image made up of a grid (or map) of pixels. Each pixel in the grid is assigned a specific color.Common bitmap image file types include JPEG, PNG, and GIF. Your digital photos are bitmap images. RGB Color ModelA system where colors are created by mixing different amounts of Red, Green, and Blue light. It's how screens on TVs, computers, and phones create all the colors you see.To make the color yellow on a screen, you mix a high amount of red light with...

RGB Value Range (R, G, B) where each value is between 0 and 255. Each part of an RGB color code (Red, Green, and Blue) is represented by a number from 0 to 255. A value of 0 means that color is 'off' (no light), and 255 means that color is at its 'brightest'. Mixing Primary Colors Red + Green = Yellow, Red + Blue = Magenta, Green + Blue = Cyan When you mix the primary colors of light (Red, Green, Blue) at their maximum brightness, you create the secondary colors (Yellow, Magenta, Cyan). Calculating Total Pixels Total Pixels = Width (in pixels) × Height (in pixels) To find out how many total pixels are in an image or on a screen, you multiply the number of pixels in a row (width) by the number of pixels in a column (height).