Source · light before capture
Video color demonstrations
Explore how cameras capture color, how video stores it, and what changes in an edit. Choose a demonstration, follow the image pipeline, or look up a term.
01 / GAMUT
Which colors can this system represent?
BIT DEPTH COMPARISON
Reference, quantized, and dithered gradients.
All three ramps begin with the same smooth gray signal. The middle ramp rounds it to the selected bit depth. The bottom adds a tiny amount of noise before rounding.
01 / Smooth referenceNo recording quantization
02 / Quantized—
03 / Quantized with ditherNoise breaks up the boundaries
What to look for
Broad vertical strips in the middle ramp are values that have been rounded to the same number. With dither, neighboring pixels can round to different values, making the boundary less coherent. The missing precision becomes less visible, but it has not been recovered.
This neutral sRGB ramp isolates bit depth. Gamut, chroma, transfer and the main dither checkbox do not affect these three rows. These ramp buffers are still sRGB / 8-bit. Contrast stretching magnifies the recording steps and the dither noise together.
LIGHT → FILTER → MEASUREMENT → RGB
Follow what the sensor measures, then what the software estimates.
1. Send light through one filter
A photosite produces one signal from the light that passes through its filter. It does not measure three independent RGB values. In this ideal model, an R filter passes only the red channel. Change the light or switch the filter and watch the one measurement.
INCOMING LIGHT1
AFTER FILTER2
PHOTODIODE RESPONSE3
One scalar measurement. The other two channels are unknown at this site.
Try it: choose Red light, then switch R → G → B filters. Next choose Mixed light, keep the R filter, and change only green or blue. Why does the R measurement stay fixed?
These are normalized linear-light channel levels, not three measured luminances. Real filters have broad, overlapping spectral responses; this ideal RGB model isolates sampling. It does not simulate wavelength spectra or a sensor ADC.
2. Capture one measurement at every site
The filter changes with position. A Bayer tile repeats two G filters, one R and one B. Click Capture to retain only each site's filtered channel. The colored mosaic identifies the filter; the recording itself contains one number per site.
3. Keep the measurement; estimate the missing channels
Select a photosite below. Its own filter channel is retained exactly. Choose Output R, G or B to see which neighbors supply that channel. Click Debayer to assemble those estimates into the complete image, then compare nearest and bilinear in the controls.
Each square is one photosite. Color identifies its filter; the number is its linear measurement. The white outline selects a site. Orange outlines mark the measured sites used for the chosen output channel. Click a square or use arrow keys.
SELECTED PHOTOSITE
—Try it: select an R site, then Output R and Output G. One uses the site's own measurement; the other needs neighbors. At a fine colored edge, compare the estimate with the ideal reference RGB listed below it.
The full comparison appears after debayering: source left, output right, at equal sensor resolution. The independent single-site sliders above do not alter this captured test image. This model excludes sensor noise, optics, white balance and an optical low-pass filter.
SOURCE · sRGB preview
OUTPUT · sRGB preview
Choose 1280 × 720 for responsiveness or 1920 × 1080 for more detail. Fit resizes the preview; 100% uses one image pixel per CSS pixel. Bayer intentionally samples a smaller virtual sensor raster.
Outside destination—
Chroma raster1280 × 720
Signal precision10-bit
Preview buffersRGB / 8-bit
COLOR SPACE TRANSFORM
Pixel values through the transform.
01 / INPUT VALUES
—Decode the input transfer function to recover linear RGB.
02 / COMMON REFERENCECIE XYZ · D65
—Express that color with a common colorimetric reference.
03 / OUTPUT BASIS
—Convert to destination linear RGB. Map out-of-gamut values if necessary.
04 / OUTPUT VALUES
—Encode the output transfer function. A correct display decodes it again.
Values above describe the pixel you click in the image. Triples are R / G / B, except the XYZ reference. These are normalized floating-point values before recording quantization.
Convert
Change the numbers using the known input and output definitions. Correct viewing preserves colors that fit the destination, apart from any deliberate rendering or gamut mapping.
Assign / interpret
Keep the numbers and tell the software what they mean. Correctly assigning a missing input tag can fix interpretation. Incorrectly assigning output characteristics to input values produces the “Assign output” error shown here.
The photograph is synthetically encoded from an sRGB image for this experiment. It is not original camera log footage. Illustrative log is log₂(1 + 63L) / 6, with inverse (2⁶ⱽ − 1) / 63. This is a reversible SDR teaching encoding with no manufacturer look, highlight roll-off or HDR tone mapping.
GAMUT MAPPING
Source gamut and destination gamut
709 / sRGBP3-D652020
SELECTED COLOR
Source preview
Mapped preview
Outside destination
- Source x / y
- —
- Mapped x / y
- —
- Destination RGB
Before mapping · linear - —
Click the image or move the probe. Rings are source chromaticities; filled dots are mapped colors. The connecting line shows this color’s journey.
Camera and working gamuts can use virtual primaries, including negative y coordinates. Their triangles describe a numerical encoding, not the sensor’s spectral response or a display’s capabilities. Some synthetic RGB combinations do not correspond to physical colors.
xy describes chromaticity, not brightness. Equal distances here are not equal perceptual differences. The axes expand to fit the selected primaries.
SIGNAL STRUCTURE
See how the values are stored.
A bigger gamut is a bigger set of possible colors.
CAPTURE, POST & DELIVERY
Image pipeline: capture to delivery
A camera turns light into numbers. Those numbers are processed, recorded, edited, and turned back into light on a screen. Each stage makes choices about color, detail and file size. A typical processed-video path is sensor → camera processing → recording → editing → delivery. RAW recording can defer debayering and some image processing until post. The exact processing order and what is baked in vary by camera and recording mode.
Take one frame through the pipeline
Set the light level, click the shutter, then build, record, edit and deliver that same frame. The previews show what is available at each stage. The captured frame stays fixed until you start again.
The raw mosaic needs two missing channels estimated at each site.
Debayer the retained measurements.
Defined color values become stored codes.
Decode the recording before changing its light values.
Render the edited image for the chosen screen definition.
sRGB · SDR screen preview
COLOR DEFINITIONRec.709 primaries · D65 · sRGB transfer
SAMPLE STORAGE
VIDEO FILE EXAMPLECodec → container
A codec encodes pictures; a container packages video, audio and metadata. For example, H.264 can be packaged in MP4.
This still-frame activity calculates ideal Bayer sampling, bilinear reconstruction, full-range RGB signal quantization, and a linear-light edit. It uses sRGB encoding for a reversible teaching workflow. It does not encode a video file, model Y′CbCr subsampling, simulate camera color calibration or apply a cinema/HDR output renderer. The video-specific choices are explained below.
- 01 / ACQUIRE
Measure the light
The sensor collects light. Small light-sensitive sites measure the image, and the camera converts those measurements into numbers.
Exposure and optics determine what reaches the sensor. A Bayer array measures one filtered signal per photosite; the analog-to-digital converter turns it into numbers. Sensor readout precision, such as 12 or 14 bits per sample, is separate from the eventual video’s bit depth.
Explore Bayer capture - 02 / PROCESS
Build the image
The camera builds a usable color picture from the sensor measurements. Some choices become part of the recording; others can be left for editing.
Debayering estimates full RGB pixels. Camera processing can apply black-level and defect correction, white balance, noise reduction, a camera-to-output color transform, sharpening and a rendering look. Processed video bakes in many choices. RAW often retains more choices for post, but can still include preprocessing and compression.
- 03 / RECORD
Encode and package
Recording means choosing both what the picture’s numbers mean and how to store them in a file.
For processed video, primaries and a transfer function define the RGB values. Video commonly stores Y′CbCr with a specified matrix, range, chroma sampling and bit depth. The codec compresses the image sequence; a container packages video, audio, timing and metadata into a file.
Explore recording precision - 04 / EDIT
Interpret and work
Editing software must read the recording correctly before you change it. A common working color space helps footage from different cameras fit into one project.
Decode the codec and correctly identify the source color space. Develop RAW where needed. An input transform brings sources into the working space for grading and effects. Proxies or an intermediate codec can improve playback. Relink to the intended full-quality media for final rendering.
Explore color transforms - 05 / DELIVER
Render for the destination
Make a version that the final screen or service can play and display as intended. Keep a high-quality master for future exports.
The output transform renders the working image for the target gamut and light range. Export the required codec, profile, precision and container with correct color tags. Check the actual exported file in the intended playback path. Keep a high-quality master for later versions.
What the numbers mean, and how the file stores them
A file needs both a color definition and a recording format. Think of these as the meaning of the picture and the way it is packed. Changing one does not automatically change the other.
| Property | What it defines | What it does not establish |
|---|---|---|
| Gamut / primaries | Which colors the RGB definition can describe. Primaries are its red, green and blue building blocks. | Bit depth, detail or compression quality. |
| Gamma / transfer function | How a stored number relates to light, including how the values are distributed between dark and bright regions. Power gamma, log, PQ and HLG are different relationships. | A gamut. “Log” alone is not a complete input definition. |
| Color space / video interpretation | Primaries, white point and transfer function; video can also need matrix and range conventions. | A codec or file extension. Rec.709 primaries alone do not identify every display relationship. |
| Video bit depth & chroma | Sample precision and color’s spatial sampling. 8-bit has 256 full-range codes per component; 10-bit has 1,024. 10-bit 4:2:2 describes precision and sampling. | HDR by itself, or recovery of precision already lost. |
| Codec & container | H.264, HEVC or ProRes describe compression; MP4, MOV and MXF describe packaging. | A fixed color space or quality level. A MOV file can contain different codecs. |
TEMPORAL COMPRESSION
How frames share information
Some codecs store each frame independently. Others save space by predicting from nearby frames and recording information needed to correct that prediction. To show one frame, the player may need to decode others first.
A group of pictures (GOP) organizes a sequence of coded pictures. An I-picture uses intra-picture coding. P-pictures predict from reference pictures; B-pictures can use references before and after them in display order. Prediction still needs coded information to reconstruct the image, including residuals. Intra coding can also be lossy.
Click a frame. Green is selected; orange marks other pictures required to reconstruct it.
This simplified GOP uses non-reference B-pictures. Real encoders can use other reference structures. An I-picture is not automatically a clean random-access boundary; headers and codec rules also matter, including H.264 IDR pictures.
WORKING COLOR
Color for editing, files for editing
A working color space gives your footage a common set of color rules while you edit. An intermediate codec gives it a file format that may be easier to play and exchange. They solve different problems.
A working space gives mixed camera sources a common color definition. ACEScct uses wide AP1 primaries and a log-like encoding for grading. ACEScg uses AP1 with linear-light values for rendering and compositing. DaVinci Wide Gamut / Intermediate is another working-space pairing.
These are not final display looks. A display or output transform produces the view for an SDR or HDR destination. A wider working space can avoid premature clipping and support multiple outputs; it cannot create colors or highlight detail absent from the source.
A ProRes or DNxHR intermediate instead changes how image data is compressed and stored. Transcoding to it does not automatically perform a color-space transform. Specify whether the source color encoding is preserved or converted, and preserve its interpretation.
ACEScct is a grading encoding, not the ACES archival interchange encoding. Choose effects and transforms that expect your actual working-space definition.
Choosing a codec for each stage
Camera recording balances quality with card space and recording time. Editing favors smooth playback and easy access to individual frames. Delivery favors files the destination can play at an acceptable size. One format rarely wins all three.
| Stage / choice | Useful for | Tradeoff |
|---|---|---|
| Camera recording: long-GOP H.264 / HEVC | Long recordings and limited card capacity. Temporal prediction uses similarity between frames. | Seeking and multistream edits can require more decoding work. Hardware support depends on profile, bit depth and chroma format. Motion and noise can stress a restricted bitrate. |
| Camera recording: All-I, ProRes or RAW modes | All-I / ProRes can simplify frame access. RAW can retain more control over image development. | Typically more media bandwidth and storage. RAW development adds processing. All-I does not guarantee better quality than long-GOP at an arbitrary bitrate; RAW is a separate choice from GOP structure. |
| Intermediate / master: ProRes or DNxHR | Editing performance, exchanges and a high-quality rendered master. Choose the variant for required chroma and precision; use an alpha-capable format such as ProRes 4444 when needed. | Larger files and another encode for a transcode. Higher precision avoids some new rounding but does not restore the original’s missing information. These codecs are not universally lossless. |
| Delivery: compatible H.264 / HEVC / AV1 profile | Efficient distribution within the destination’s playback and upload requirements. | Compatibility, encoder time, bandwidth and visible compression compete. The service may transcode again. A broadcast or screening specification may instead require an intra-frame master. |
GOP structure, bitrate, bit depth, chroma sampling and color definition are distinct variables. Compare actual camera modes and destination specifications, not codec names alone.
Shooting for delivery and keeping a master
Decide what must survive capture
Choose the recording mode around the edit and the final destination. Quick turnaround and heavy color correction place different demands on the camera files.
For a fast SDR turnaround with limited grading, a known Rec.709-oriented camera rendering can reduce post work. For demanding grades, keying or several SDR/HDR outputs, supported 10-bit or higher precision, appropriate chroma sampling and a log/wide-gamut or RAW path can retain more flexibility. Log redistributes code values; it does not increase the photons captured or rescue clipped sensor highlights.
Exposure, white balance, noise and focus still matter. Test the complete path before choosing a recording mode solely by its largest numbers.
Separate the master from the delivery copy
The master is your high-quality finished version. A delivery copy is an export made to suit a particular screen, service or client.
Keep original camera files and their metadata. Grade in the chosen working space, monitor through the intended output transform, and create a high-quality rendered master. Make smaller delivery copies from that master when appropriate, without applying the output transform a second time.
Verify resolution, frame rate, audio, codec/profile, bitrate, bit depth, chroma sampling, range and color tags against the delivery specification. HDR delivery also needs its defined transfer, mastering conditions and applicable metadata. Display P3 browser support does not by itself establish an HDR mastering path.
Technical references
Apple ProRes RAW: sensor-to-post workflow · Apple ProRes: intra-frame coding and variants · Sony: Intra and long-GOP camera modes · MDN: media containers · Adobe: input, working and output color management · ACEScct specification · ACEScg specification · DaVinci Wide Gamut / Intermediate specification · Sony: gamma and color mode · ITU-T H.264
VIDEO & COLOR TERMS
Vocabulary
Start with the everyday explanation, then read the technical detail beneath it. These terms describe different parts of an image; knowing which one changed helps explain what you see.
Color model
The kinds of numbers used to describe a color.
RGB uses red, green and blue components. Y′CbCr uses luma and two color-difference components. A model alone does not specify the primary colors or how its values relate to light.
Color space
The rules that tell software what color a set of numbers means.
For these RGB experiments, a color space specifies primaries, a white point and a transfer function. Video interpretation can also require a matrix and signal range. An RGB triplet without that context is incomplete.
Gamut
The range of colors a color space or device can represent.
The xy triangle shows primary chromaticities without brightness. It does not show the full three-dimensional color volume. A wide gamut does not automatically mean HDR or higher bit depth.
Primaries & white point
Primaries are the red, green and blue building blocks. The white point sets the reference for neutral white.
All selectable gamuts here share D65 white. Camera and working gamuts may use virtual primaries that a display cannot emit. Their encoding triangle is not a map of sensor spectral sensitivity.
Transfer function & gamma
A rule that connects stored numbers to light. It explains why 0.5 does not always mean half the light.
Pure gamma is a power-law relationship. sRGB and BT.709 use piecewise curves. OETF describes scene light to signal; EOTF describes signal to display light. A camera-to-display rendering relationship can involve an OOTF.
Log encoding
A way to spread recorded values across a large brightness range. Unmanaged log footage often looks flat.
A log curve changes how values are allocated; it does not create captured dynamic range. The actual curve and gamut must be known. The lab’s illustrative log is a teaching curve, not a camera-specific LogC or S-Log encoding.
Linear light
Numbers that grow in direct proportion to the light they represent.
Doubling a linear-light value doubles the represented light. Many operations, including the RGB↔XYZ transforms here, need linear values rather than gamma- or log-encoded signals.
Luma & luminance
Two related descriptions of the light-and-dark information in an image.
Y′ luma is calculated from nonlinear RGB′ signals. Y luminance is a linear-light photometric quantity. They are related but not interchangeable, and neither is simply a measure of perceived brightness in every viewing condition.
Chroma subsampling
Saving fewer color-detail samples while keeping the luma image at full resolution.
4:4:4 keeps full chroma sampling. 4:2:2 halves it horizontally. Progressive 4:2:0 halves each chroma plane’s width and height. It reduces spatial color detail, not the gamut or the number of colors to one quarter.
Bit depth & quantization
Bit depth sets how many numerical steps can be stored. Quantization rounds values to those steps.
An 8-bit component has 256 possible code values; a 10-bit component has 1,024. A narrow gradient uses only some of them. Increasing precision later cannot recover values already lost to rounding.
Banding & dither
Banding turns a smooth gradient into visible strips. Dither uses a little noise to make those strips less obvious.
Noise added before quantization lets nearby pixels round to adjacent values, making boundaries less coherent. It trades contours for noise and does not turn an 8-bit recording into a 10-bit recording.
Gamut mapping & tone mapping
Gamut mapping adapts colors; tone mapping adapts the brightness range or rendering.
They can interact in an output transform. Changing primaries alone is not HDR-to-SDR tone mapping. The lab’s compression toward neutral is an illustrative gamut mapper, not a standardized perceptual rendering method.
LUT & color management
A LUT is a table for changing values. Color management makes sure those values are interpreted and displayed correctly.
A LUT needs the expected input color space to behave as intended. Color management can include input, working and output transforms. A creative look serves a different purpose from identifying the source encoding.
Bayer sensor & debayering
A Bayer sensor measures one color-filtered value at each site. Debayering estimates the missing channels to build RGB pixels.
A typical 2 × 2 Bayer tile has one red, two green and one blue site. Real filter responses overlap. Demosaicing and camera color processing turn those measurements into an image in a defined color space.
RAW recording
Sensor-oriented data that leaves some image-building choices for later.
RAW commonly defers debayering and some camera processing until development. It may still include preprocessing and compression. RAW is not automatically uncompressed, lossless or free of camera decisions.
Codec
The method used to encode and decode the video data.
H.264, HEVC, AV1, ProRes and DNxHR are codec examples. Profile, bitrate, bit depth, chroma and encoder settings affect the result. The codec name alone does not specify color space or guarantee quality.
Container
The file wrapper that holds video, audio, timing and metadata together.
MP4, MOV and MXF are containers. A MOV file can carry different codecs. The extension alone does not tell you how the video was compressed or which color definition it uses.
I-frame, P-frame, B-frame & GOP
Some frames stand on their own; others use references to help reconstruct the picture. A GOP organizes that sequence.
I-pictures use intra-picture coding. P- and B-pictures use prediction; B-pictures can reference frames later in display order. Decode order can therefore differ from display order. An I-picture alone is not always a clean random-access boundary.
Working space, intermediate & master
A working space sets color rules for editing. An intermediate helps store and play media. A master keeps the finished result at high quality.
An intermediate codec such as ProRes or DNxHR is separate from an intermediate color space. Transcoding does not automatically transform color. Rendered masters and destination-specific delivery copies have different purposes.
How this lab works Math, assumptions & display limits
Processing uses floating-point linear RGB and XYZ with D65 white. Synthetic images are authored in the selected source primaries; the photograph is decoded as sRGB and converted without inventing wider-gamut colors. Each lesson bypasses the attributes taught on the other pages. In the signal model, destination gamut mapping happens in linear light. Transfer encoding happens before RGB′ → Y′CbCr, centered chroma subsampling, full-range quantization, reconstruction and transfer decoding. The final image is converted to the selected preview color space for a tagged 8-bit Canvas buffer.
Display: Automatic preview uses explicitly tagged Display P3 pixels when both the browser Canvas API and the display advertise P3 support; otherwise it uses sRGB. You can select either supported preview space. The 16-inch 2019 MacBook Pro has a P3 wide-gamut display. Display P3 combines P3 primaries, D65 white and the sRGB transfer function. It is distinct from cinema DCI-P3. XYZ values are converted into the selected preview space before its channels are clipped to 0–1. A P3 preview shows more colors on a P3 display, but cannot show the whole Rec.2020 gamut. The xy coordinates remain mathematical values before preview clipping. The plot background is an approximate sRGB rendering, not a spectral color reference. Detection is not monitor calibration.
Scope: progressive 4:4:4, 4:2:2 and 4:2:0; centered box sampling and nearest/bilinear reconstruction; 4–12-bit quantization; SDR transfer curves. No codec compression, interlaced sampling, PQ/HLG display rendering, calibrated monitor simulation or standardized perceptual gamut mapper is implied. “Compress” moves toward neutral at constant luminance Y when Y is in range; it does not promise perceptual hue preservation. Saturation boost clamps source RGB to its source gamut. BT.709 and BT.2020 use their standard non-constant-luminance matrix coefficients. All other gamuts use teaching Y′CbCr matrices derived from their Y weights, rather than standardized camera video encodings. Full-range chroma uses the integer midpoint as neutral.
New isolated lessons: Transform decodes a known input encoding, converts primaries through XYZ, maps the destination gamut and encodes the output. It bypasses chroma and bit-depth controls. The banding lesson quantizes a neutral sRGB signal ramp from 0.35 to 0.45; optional 8× signal contrast is applied after quantization, equally to the reference and both comparisons.
Precision: synthetic gradients start as floating point. The photo and text/chart canvas sources are 8-bit. A higher bit-depth setting cannot restore missing source precision, and the final 8-bit preview buffers can hide differences between 10-bit and 12-bit. Difference shows absolute signal error in the selected preview space, not perceptual ΔE. The preview buffers have 8 bits per component; that does not establish the physical panel’s precision.
References: ITU-R BT.709, ITU-R BT.2020, W3C color conversion reference, 2019 MacBook Pro display specifications, Basler: Bayer capture and demosaicing, ARRI Wide Gamut 3, ARRI Wide Gamut 4, Sony S-Gamut3 primaries, DaVinci Wide Gamut.