Image channel extract — split RGB(A) into per-channel PNGs

The images that need channel extraction often carry sensitive content

RGB channel extraction comes up in image-processing research, retouching analysis, medical or scientific image evaluation, and game / CG texture mask verification. In each of those contexts, the source image may be research data, non-public medical imagery, or an in-development game asset.

Channel extraction is ‘making the internals visible.’ If the source image is sensitive, the extracted R / G / B channels are sensitive as well — they are derivatives of the original. In some cases, individual grayscale channels carry enough information to reconstruct or partially recover the source. The extracted files warrant the same care as the original.

What uploading to a channel-extraction service sends

Online services that offer channel extraction upload the source image to a server and return the separated channels. Every pixel of the original travels to the operator’s infrastructure before any splitting happens. ‘I just want the red channel’ is the intent, but the full image is what gets transmitted.

Medical scans, satellite imagery, original photographs of identifiable subjects — passing any of these to a third-party service for channel analysis means the pixel data leaves the device. The output channels are in your hands; the original is on their server.

Canvas getImageData / putImageData for per-channel separation

The tool reads pixel data with getImageData(), which returns a flat array of [R, G, B, A, R, G, B, A, …] values. For each channel, a new ImageData is constructed: grayscale mode copies the channel’s value into all three RGB channels, producing a monochrome representation; tint mode keeps the channel value in its own slot and zeros the other two. The result is written back via putImageData() and exported as PNG via canvas.toBlob().

Every step stays in browser memory. No network request is made. Canvas re-encoding strips EXIF, GPS, and ICC profiles from the output — location data from the source doesn’t survive into the channel images. When the goal is to complement the channel breakdown with a dominant-color histogram, the extracted PNGs feed cleanly into image-palette, which surfaces the per-channel colour distribution from the same browser-side pipeline.

Working with the extracted channels

Extracted channels are saved as lossless PNG, preserving full channel intensity. For scientific or medical work where quantitative precision matters, PNG’s lossless encoding ensures the luminance values match the original channel data exactly. Note that ICC color profile information is stripped by Canvas; if the source color space matters downstream, keep the original file alongside and run the extraction tool for the derived output only.

RGB / RGBA / CMYK / HSL and what channel extraction actually does

getImageData() returns an sRGB-space 8-bit RGBA buffer (Uint8ClampedArray) in which every pixel takes four bytes: [R, G, B, A]. The alpha channel runs from 0 (fully transparent) to 255 (fully opaque) and is supported by PNG, WebP, and GIF. JPEG has no alpha channel, so loading a JPEG produces A = 255 everywhere. The R, G, B channels are the additive primaries used by displays.

Print workflows use CMYK (Cyan / Magenta / Yellow / Key=Black) subtractive primaries, and the RGB → CMYK conversion typically passes through an ICC-profile transform via Adobe Color or CIE-standard pipelines. Canvas 2D cannot represent CMYK directly, so this tool is RGB-only. HSL and HSV (Hue / Saturation / Lightness or Value) are perceptual representations — for HEX-to-HSL conversion see color-converter. If you need print-grade colour separation, Adobe Photoshop or Affinity Photo with CMYK support is the right tool. For web asset R / G / B visualisation, texture mask creation, and selecting medical-imaging wavelength bands, this tool’s RGB(A) split is sufficient.

Channel extraction in game graphics, medical imaging, and astrophotography

Game graphics pipelines often pack PBR (Physically Based Rendering) material maps into a single PNG using multiple channels — for example RGB = Albedo (base color) with A = Roughness, conserving VRAM bandwidth. Unity HDRP and Unreal Engine’s Material Editor commonly use ORM (Occlusion-Roughness-Metallic) textures with Metallic / Roughness / Occlusion / Height mapped to RGBA. Splitting an ORM texture with this tool lets you inspect and edit each channel separately.

In medical imaging, CT and MRI data is typically 12–16 bit grayscale (DICOM), but composite RGB images that fuse multiple modalities (e.g. T1-weighted on R, T2-weighted on G, FLAIR on B) are produced for at-a-glance comparison. Channel extraction lets clinicians inspect each modality’s contribution separately. Astrophotography uses narrow-band filter sets like SHO (Hα = R, OIII = G, SII = B) for capture; channel-splitting reveals the distribution of each gas species in the composite. The grayscale-extract mode preserves the per-channel intensity values losslessly, which is what makes it appropriate for these scientific and industrial use cases. If a single luminance map is the actual goal, image-grayscale reaches the same output in one fewer step while sharing the same in-browser Canvas pipeline.