Challenge: Use the slider below to choose a grayscale value (0–255) and see:

Its binary, octal, and hexadecimal representations. A preview of the corresponding grayscale color (where 0 = black and 255 = white). Try adjusting the slider and note how the numeric conversions match the visual color!

Interactive Lesson: Image Encoding & Popcorn Hack

Interactive Lesson: Image Encoding & Popcorn Hack

Interactive Converter: Grayscale Value Representations

Use the slider below to choose a grayscale value (0–255). Observe its:

  • Decimal value
  • Binary representation
  • Octal representation
  • Hexadecimal representation
Additionally, see the corresponding grayscale color preview.

Decimal: 128

Binary: 10000000

Octal: 200

Hexadecimal: 80

</html>

# Define five sample color combinations with their RGB values.
# For this hack, we chose a set of bright, distinct colors that work well
# together to create visual contrast. The colors are:
# 1. Red – a bold, primary color.
# 2. Green – a fresh, natural tone.
# 3. Blue – a calm, cool color.
# 4. Yellow – a vibrant, eye-catching hue.
# 5. Magenta – an energetic and playful shade.
colors = {
  "Red": (255, 0, 0),
  "Green": (0, 255, 0),
  "Blue": (0, 0, 255),
  "Yellow": (255, 255, 0),
  "Magenta": (255, 0, 255)
}

def rgb_to_hex(rgb):
  # Convert an RGB tuple to its Hexadecimal string
  return '#{:02X}{:02X}{:02X}'.format(*rgb)

def rgb_to_binary(rgb):
  # Convert each RGB component to an 8-bit binary string and return as a tuple.
  return tuple(bin(c)[2:].zfill(8) for c in rgb)

print("Popcorn Hack #1: Color Analysis\n")
for name, rgb in colors.items():
  hex_code = rgb_to_hex(rgb)
  binary = rgb_to_binary(rgb)
  print(f"{name}:")
  print(f"  RGB: {rgb}")
  print(f"  Hex: {hex_code}")
  print(f"  Binary: {binary}\n")

from PIL import Image as Image
from collections import Counter
# Homework Hack #1:
# For extra credit, use an image of your choice to extract color data.
# For example, you could load an image with PIL and analyze its dominant colors.
# Uncomment the code below to try this with your own image.
#
# from PIL import Image
# from collections import Counter
#
# # Load an image file
img = Image.open("../assets/icons/icons8-chat-bot-64.png")
img = img.convert("RGB")
pixels = list(img.getdata())
# Count the most common colors
common_colors = Counter(pixels).most_common(5)
print("Dominant colors in the image:")
for color, count in common_colors:
  print(f"RGB: {color}, Hex: {rgb_to_hex(color)}, Binary: {rgb_to_binary(color)}")
Popcorn Hack #1: Color Analysis

Red:
  RGB: (255, 0, 0)
  Hex: #FF0000
  Binary: ('11111111', '00000000', '00000000')

Green:
  RGB: (0, 255, 0)
  Hex: #00FF00
  Binary: ('00000000', '11111111', '00000000')

Blue:
  RGB: (0, 0, 255)
  Hex: #0000FF
  Binary: ('00000000', '00000000', '11111111')

Yellow:
  RGB: (255, 255, 0)
  Hex: #FFFF00
  Binary: ('11111111', '11111111', '00000000')

Magenta:
  RGB: (255, 0, 255)
  Hex: #FF00FF
  Binary: ('11111111', '00000000', '11111111')

Dominant colors in the image:
RGB: (0, 0, 0), Hex: #000000, Binary: ('00000000', '00000000', '00000000')
import base64

# Word to be converted. You can change "Magenta" to any word of your choice.
word = "Magenta"

# Convert the word to bytes and then encode it in Base64.
encoded_word = base64.b64encode(word.encode("utf-8"))

# Print the Base64 encoded bytes and as a decoded UTF-8 string.
print("Encoded (bytes):", encoded_word)
print("Encoded (string):", encoded_word.decode("utf-8"))
Encoded (bytes): b'TWFnZW50YQ=='
Encoded (string): TWFnZW50YQ==