Team Teach: Color Codes, Images, Base64 Blog #15
Description
Classwork
Exercise 1: Hex to RGB Conversions
#1E90FF
R: 1E (hex) = 30 (decimal)
G: 90 (hex) = 144 (decimal)
B: FF (hex) = 255 (decimal)
RGB: rgb(30, 144, 255)
RGBA: rgba(30, 144, 255, 1)
#32CD32
R: 32 (hex) = 50 (decimal)
G: CD (hex) = 205 (decimal)
B: 32 (hex) = 50 (decimal)
RGB: rgb(50, 205, 50)
RGBA: rgba(50, 205, 50, 1)
#FFD700
R: FF (hex) = 255 (decimal)
G: D7 (hex) = 215 (decimal)
B: 00 (hex) = 0 (decimal)
RGB: rgb(255, 215, 0)
RGBA: rgba(255, 215, 0, 1)
50% Transparent Teal
For a 50% transparent teal (rgb(0, 128, 128)), the RGBA value would be: rgba(0, 128, 128, 0.5)
Exercise 2:
Icon:
[Color1][Color2]
[Color3][Color4]
Color1: #E63946 (Bright red)
Color2: #F1FAEE (Off-white)
Color3: #A8DADC (Light blue)
Color4: #457B9D (Dark blue)
Storage Calculation
- For a 2×2 image at 24-bit color depth:
Bits per pixel = 24 bits (8 bits per channel × 3 channels RGB)
Number of pixels = 2 × 2 = 4 pixels
Total storage = 24 bits × 4 pixels = 96 bits (or 12 bytes)
Exercise 3:
Cat encoding: "Cat" → Q2F0
Image: iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
<imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1×1 Red Pixel">