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. The headline example is the luminance (grayscale) weighting, which reflects human eye sensitivity — green contributes most:

Filter	Per-pixel operation
Grayscale	gray = 0.299·R + 0.587·G + 0.114·B
Sepia	A 3×3 linear combination of R, G, B for a vintage look
Invert	R′ = 255 − R (and similarly for G, B)
Brightness	Add a constant, e.g. R′ = R + 40, clamped to [0, 255]
Contrast	R′ = pivot + (R − pivot) × factor (e.g. pivot 128, factor 1.4)
Saturate	R′ = L + (R − L) × s; s > 1 boosts saturation
Posterize	Quantize to fewer levels (e.g. 4: 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.

Simulation

The interactive simulator is below. Use the controls to explore the concepts described above.

 

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).

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.

Limitations

• 8-bit sRGB only: each channel is 0–255 in the sRGB space the browser provides; wide-gamut, 10/12-bit, or linear-light workflows are not represented.
• Gamma ignored: filters operate directly on gamma-encoded sRGB values, so luminance and contrast are perceptual approximations, not physically-linear light math.
• Per-pixel point operations: filters act on one pixel at a time; spatial operations (blur, sharpen, edge detection) that use neighbouring pixels are out of scope.
• Display-dependent color: on-screen appearance depends on your monitor and its calibration; values are not color-managed to a reference profile.