Base 64
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 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
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==