This interactive tutorial demonstrates that a color image is a stack of three grayscale intensity maps (Red, Green, Blue). You will see how channels are separated, how a single pixel is represented as RGB/HEX/Binary data, and how filters, color balance, and channel mapping are applied mathematically.

Learning objectives

• Separation: How R, G, and B values are extracted from each pixel using getImageData() and stored in Uint8ClampedArray buffers.
• Visualization: A "Red" channel can be shown as red pixels (true color) or as a grayscale intensity map (white = high red value). Both views represent the same underlying data.
• Recomposition: Adding the three channels (R + G + B) reconstructs the full spectrum. Toggling channels on/off shows additive color synthesis (e.g. R + G = Yellow).

Pixel data: RGB, HEX, and Binary

Each pixel is four bytes: R, G, B, and Alpha (0–255). The same color can be expressed as RGB (e.g. rgb(255, 128, 0)), HEX (e.g. #FF8000), or 8-bit binary per channel (e.g. Red: 11111111). Color is a coordinate in a 3D color space, not just a visual feeling.

Mathematical filters

Use the Filter dropdown to apply a per-pixel transformation. Filters are linear combinations or simple functions of R, G, B.

• Grayscale (luminance): gray = (R×0.299) + (G×0.587) + (B×0.114). The weights reflect human eye sensitivity (green contributes most).
• Sepia: A 3×3 linear combination gives a vintage look: new R, G, B are linear functions of the original R, G, B.
• Invert: R' = 255 − R (and similarly for G, B).
• Brightness: Add a constant to each channel (e.g. R' = R + 40), clamped to [0, 255].
• Contrast: Scale around a pivot: R' = pivot + (R − pivot) × factor (e.g. pivot 128, factor 1.4).
• Saturate: Blend with luminance: R' = L + (R − L) × s; s > 1 increases saturation.
• Posterize: Quantize to fewer levels (e.g. 4 levels: 0, 85, 170, 255).
• Threshold: Binarize from luminance: L ≥ 128 → 255, else 0.

Color balance (channel gain)

Balancing is a multiplication (gain) per channel. If a slider value is k (e.g. 0 to 2), the new value is min(255, original × k). Keeping the original buffer and applying gains on each update avoids "compound degradation" and illustrates non-destructive editing.

Channel mixer (false color)

Channel mapping re-routes source data to output channels. For example, mapping Blue source → Red output, Green → Green, Red → Blue gives the BGR order (common in OpenCV). Mapping Green→R, Blue→G, Red→B can simulate an "infrared look" or vegetation reflection. This shows that data (the numbers) is separate from representation (which channel we display it in)—the basis of false-color imagery in science and art.

 

Usage instructions

Follow these steps to explore Image Color Separation (RGB):

1. Load an image: Use Image to choose a file, or click Default gradient to load the built-in gradient. The main canvas shows the image; the three smaller canvases show the Red, Green, and Blue channels.
2. Channel toggle: Uncheck R, G, or B to hide that channel in the main view. For example, unchecking B leaves R+G, giving a yellow tint (additive synthesis).
3. Filters: Use the Filter dropdown to choose None, Grayscale, Sepia, Invert, Brightness, Contrast, Saturate, Posterize, or Threshold. The formula box and the Pipeline & maths infobox show the math for the active filter in real time.
4. Color balance: Use the R, G, B sliders (0–2×) to boost or cut each channel. Click Reset balance to return to 1.0.
5. Channel mixer: Use the Preset dropdown (RGB, BGR, Infrared look, GBR) or set each output channel (R←, G←, B←) to a source (R, G, or B) to remap channels (false color).

Tip: Start with the default image and toggle channels off to see R+G (yellow), R+B (magenta), G+B (cyan). Apply Grayscale to see the luminance formula in action.

Parameters

• Channel toggle (R, G, B): When unchecked, that channel is set to 0 in the main view. Used to demonstrate additive color.
• Filter (dropdown): None, Grayscale, Sepia, Invert, Brightness, Contrast, Saturate, Posterize, or Threshold. One filter at a time. Formula box and Pipeline & maths infobox show the active formula.
• Color balance (R, G, B sliders): Multiplier 0–2 per channel. Values are clamped to 0–255. Reset returns all to 1.0.
• Channel mixer (Preset / R←, G←, B←): Maps which source channel (R, G, B) feeds each output channel. Presets: RGB (identity), BGR (OpenCV order), Infrared look and GBR (channel shift).

Key concepts

• Separation: An image is stored as a flat array of bytes (R, G, B, A per pixel). Extracting one channel means reading every 4th byte at an offset (0=R, 1=G, 2=B).
• Additive synthesis: Turning off a channel (e.g. B) leaves R+G, which we perceive as yellow. This is how screens build color.
• Filters: Grayscale and Sepia are weighted sums of R, G, B; Invert is 255 minus each value; Brightness adds a constant; Contrast scales around a pivot; Saturate blends with luminance; Posterize quantizes levels; Threshold binarizes from luminance.
• Non-destructive balance: The original pixel buffer is kept; balance multiplies a copy so you can reset without reloading.
• False color: Channel mapping changes which data is shown in which channel without changing the numbers—used in scientific imaging and creative effects.