Project 2: Hex Color Visualizer

  • File: P02-hex-color-visualizer.md
  • Main Programming Language: JavaScript or Python
  • Alternative Programming Languages: C, Rust, Go
  • Coolness Level: Level 2 (See REFERENCE.md)
  • Business Potential: Level 1 (See REFERENCE.md)
  • Difficulty: Level 1 (See REFERENCE.md)
  • Knowledge Area: Encoding, Visualization
  • Software or Tool: Web or CLI UI
  • Main Book: “Code” by Charles Petzold

What you will build: A tool that accepts a hex color code and displays RGB values and a color swatch.

Why it teaches binary/hex: Hex color notation encodes RGB values in hex pairs.

Core challenges you will face:

  • Hex parsing -> Bits/Bytes/Nibbles
  • Pair-to-decimal conversion -> Positional Systems
  • Rendering feedback -> Encoding & Interpretation

Real World Outcome

For web UI: a page with an input box, a live color swatch, and numeric RGB values.

Example behavior:

  • Input: #33CC99
  • Output: RGB(51, 204, 153)
  • Swatch: a teal-green block filling a 200x200 square

The Core Question You Are Answering

“How do three pairs of hex digits become visible color?”

Concepts You Must Understand First

  1. Hex digit pairs
    • Why do two hex digits represent one byte?
    • Book Reference: “Computer Systems: A Programmer’s Perspective” - Ch. 2
  2. RGB channels
    • Why are colors stored as separate byte values?
    • Book Reference: “Code” by Charles Petzold - Ch. 7-8
  3. Hex color notation
    • Why is #RRGGBB the standard?
    • Book Reference: “Code” by Charles Petzold - Ch. 7-8

Questions to Guide Your Design

  1. Input handling
    • How will you normalize 3-digit vs 6-digit input?
    • How will you handle alpha if present?
  2. Conversion
    • Will you parse by pairs or convert through binary?
    • How will you validate that digits are hex-safe?

Thinking Exercise

Color as Bytes

Imagine a pixel in memory as 3 bytes: R, G, B. Sketch what bytes correspond to pure red and pure green.

Questions to answer:

  • Why does 00 mean “none” and FF mean “full”?
  • What is the binary representation of 0x33?

The Interview Questions They Will Ask

  1. “Why does CSS use hex for colors?”
  2. “How do you validate a hex color input?”
  3. “How would you support 3-digit shorthand?”
  4. “What does the alpha channel represent?”
  5. “How would you convert #FF00FF to RGB?”

Hints in Layers

Hint 1: Starting Point Strip the leading #, then split into pairs.

Hint 2: Next Level Support 3-digit input by duplicating each digit (e.g., F -> FF).

Hint 3: Technical Details Pseudocode:

if length == 3:
  expand each digit to two digits
for each pair:
  value = parse_hex(pair)

Hint 4: Tools/Debugging Compare against a browser’s built-in color picker.

Books That Will Help

Topic Book Chapter
Number systems “Code” by Charles Petzold Ch. 7-8
Data representation “Computer Systems: A Programmer’s Perspective” Ch. 2

Common Pitfalls and Debugging

Problem 1: “My colors are inverted”

  • Why: You reversed byte order when parsing.
  • Fix: Ensure the order is R then G then B.
  • Quick test: #FF0000 should be pure red.

Definition of Done

  • Accepts 3- and 6-digit hex colors
  • Displays correct RGB values
  • Shows a visible color swatch
  • Rejects invalid characters