Documentation

Quick start

1. Open the Color Scope demo in a modern browser — desktop, tablet, or phone.
2. Click the preview + or Load for an image or video, or use Screen / Camera for a live source.
3. Watch the scope panels update in real time as frames are analyzed.
4. Click or drag on the preview to sample a region; read color values in the Selection Info panel.
5. Use Visibility to show or hide panels; click a scope to solo it; collapse controls for more space.

Input sources

Load — Opens a file picker for images and video. Click the preview + placeholder or drag-and-drop in most browsers.

Screen — Captures a browser tab, window, or full screen via the system share dialog. Useful for monitoring another application’s output.

Camera — Uses your webcam or connected camera. Use Switch Camera when multiple devices are available.

Clear — Removes the current source and resets scopes. Disabled until something is loaded.

Live FPS — Controls how often live sources are sampled (1–60 fps). Lower values reduce CPU load on long sessions.

Pause / Resume — Freezes the current frame on loaded video or live capture for detailed inspection. Label updates based on source type.

Vectorscope

Plots chrominance (hue and saturation) for every sampled pixel. The graticule shows primary and secondary color targets plus the skin-tone line.

Use the gear icon to adjust Scale (0.5×–3×) — higher values spread saturated colors outward for easier reading.

Waveforms & histogram

Luma waveform — Brightness distribution. Scale options: IRE (0–100), digital (0–255), or dual overlay.

RGB waveform — Separate red, green, and blue parade traces using the same scale settings.

RGB overlay — Combined trace colored per pixel — helpful for spotting channel imbalances.

RGB histogram — Stacked per-channel histograms. No scale setting — always full 0–255 range.

Selection & color copy

Click or drag on the preview to define a sample region. A quick tap or click without dragging places a small fixed rectangle. On mobile, touch and drag works the same way. All active scope panels analyze only pixels inside that region.

The Selection Info panel shows:

• Average color swatch
• Hex, RGB, and HSL values
• Selection dimensions in pixels

Click any value chip to copy it to your clipboard.

Preview navigation & layout

Scroll to zoom — Mouse wheel zooms the preview toward the cursor (when media is loaded).

Pan — Middle- or right-click drag pans the image when zoomed in.

Scope solo — Click a scope panel to show only that scope; click the same panel again to restore your previous visibility.

Collapse controls — Use Hide Controls to reclaim vertical space. Preference is remembered for the session.

Responsive layout — Wide screens use a side-by-side layout (preview, selection info, scopes). Narrow, portrait, or phone viewports stack vertically with scroll.

On set & on the go

Color Scope is not a calibrated broadcast monitor — it is a flexible browser companion for quick reads anywhere you have a screen.

• White-balanced stills — Load a reference photo or exported frame to sanity-check hue and exposure before trusting a small on-set display.
• Live checks — Screen-capture a grading session or aim your camera at a program monitor for real-time vectorscope and waveform feedback.
• Phone in your pocket — Stacked layout and touch selection make a fast vectorscope available between setups or on location.

Global settings

• Sampling — Controls pixel skip rate. Lower settings (Max) analyze more pixels for finer detail at higher CPU cost.
• Brightness — Adjusts trace intensity on dark backgrounds or in bright rooms.
• Scope Resolution — Dynamic resizes panels to your viewport; Fixed keeps a consistent canvas size.

Browser requirements