Explore our collection of 150+ developer tools, PDF editors, and image converters. Everything runs locally in your browser.
Ubify Media & Design Operations
UI/UX & DIGITAL MEDIA SPECIALISTS
About This Tool
Video compression formats like H.264, HEVC, and JPEG conserve bandwidth by exploiting human visual perception, which is far more sensitive to luminance variations than chrominance detail. Chroma subsampling reduces color resolution while maintaining full grayscale sharpness. This interactive diagnostic tool converts test patterns from RGB to ITU-R BT.601 YCbCr space, simulates color decimation across 4:4:4, 4:2:2, and 4:2:0 schemes, and renders the reconstructed output alongside an enlarged pixel-level inspection canvas.
### Subsampling Modes Explained - 4:4:4 (No Subsampling): Every pixel retains its own dedicated luminance (Y), blue-difference chroma (Cb), and red-difference chroma (Cr) sample. Saturated text and fine UI lines remain pixel-sharp without color bleeding. - 4:2:2 (Horizontal Subsampling): Chroma is sampled at half the horizontal rate while vertical resolution is preserved. Adjacent horizontal pixel pairs share identical Cb and Cr color values, cutting chroma bandwidth by 50%. - 4:2:0 (2x2 Macro-Block Subsampling): Chroma resolution is halved both horizontally and vertically. Each 2x2 block of four pixels shares a single averaged chroma pair. This scheme is standard across YouTube, broadcast television, Blu-ray discs, and consumer web video.
### Test Patterns and Channel Separation - Red Text Test: Highly saturated pure red text on dark backgrounds illustrates color fringing and blurry subpixel edges caused by 4:2:0 compression over HDMI cables or video encoders. - Gaming HUD & Radar: Sharp health bars and circular radar graphics reveal how thin colorful vector outlines bleed into dark gameplay backgrounds. - Channel Isolation: Toggle between full RGB reconstruction, isolated Y grayscale luma, Cb blue-difference chroma, and Cr red-difference chroma to inspect exactly how color information is separated.
### Client-Side Canvas Simulation All RGB-to-YCbCr color space transformations, matrix averaging, and canvas rasterization execute locally in your browser using typed Float32 arrays. No graphics files or video frames are transmitted over external networks.
How to Use
- 1
Select a chroma subsampling scheme (4:4:4, 4:2:2, or 4:2:0).
- 2
Choose a test pattern (Red Text, Gaming HUD, or Fine Stripes).
- 3
Toggle channel views (Full RGB, Y Luma, Cb Chroma, or Cr Chroma).
- 4
Inspect the enlarged zoom canvas to examine pixel-level color decimation and edge fringing.
Frequently Asked Questions
Why does red text look blurry over HDMI or in screen recordings?
Most computer displays expect uncompressed 4:4:4 RGB. If an HDMI cable, graphics driver, or video capture card falls back to 4:2:0 chroma subsampling, red pixels are averaged across a 2x2 grid, smearing color borders.
How much bandwidth does 4:2:0 chroma subsampling save?
Compared to uncompressed 24-bit 4:4:4 RGB (8 bits Y + 8 bits Cb + 8 bits Cr per pixel), 4:2:0 requires an average of only 12 bits per pixel, reducing raw color transmission data by 50%.
Does this simulator require external server rendering?
No. All ITU-R BT.601 matrix calculations and canvas rendering execute entirely in local browser memory.