Video Color Palette Extractor
Dominant Colors from Any Video
Turn any video into a designer-ready color palette. Sample frames across the footage, extract the dominant HEX and RGB colors, and copy them straight into Figma, CSS, or your brand kit — free, in your browser, nothing uploaded ever.
Dominant Colors
Median-cut quantization finds the colors that define your footage.
Click to Copy
Every swatch copies its HEX code — plus CSS variables export.
100% Private
Runs entirely in your browser — your video is never uploaded.
Want the actual frames instead of just their colors? Try our video to frames converter.
Every Video Has a Color Story — Here Is How to Read It
Designers have pulled color palettes from still images for years: drop a photo into a palette tool, get five swatches, build a brand around them. Video is a richer source for the same job, and it has been strangely hard to tap. A two-minute clip contains thousands of frames, each one a photograph with its own light, mood, and color relationships. Somewhere in that flood are the exact hues that make the footage feel the way it does — the teal-and-orange of a travel vlog, the muted sage of a wedding film, the neon bleed of a music video.
Extracting a color palette from video automates the oldest trick in a colorist’s book: squinting at the timeline until the dominant hues reveal themselves. Instead of scrubbing through footage and eyeballing it, you sample frames across the whole duration and let quantization math find the colors that actually dominate — weighted by how much screen time each one gets. The result is not a guess; it is a measurement.
And because this extractor runs entirely in your browser, the footage never leaves your machine. Client work, unreleased cuts, personal projects — the colors come out, the video stays in.
How the Extraction Works
Under the hood, the process has three stages. First, the tool seeks to evenly spaced timestamps across your video — skipping the very first and last instants, which are often black — and draws each frame to a small offscreen canvas. A 12-frame sample of a two-minute video effectively storyboards the whole clip.
Second, every sampled pixel goes through median-cut quantization, the classic algorithm behind tools like Photoshop’s color tables. The full RGB color space is repeatedly split along its widest channel until the requested number of color boxes remains; each box’s average becomes one palette swatch. Light pre-quantization keeps sensor noise from spawning near-duplicate swatches.
Third, the swatches are ranked by share — the percentage of sampled pixels each color represents. The first swatch is genuinely the most dominant color in your footage, not just the most saturated one. That ranking is what turns a pile of colors into a usable hierarchy: foundation, support, accent.
What Designers Actually Do With Video Palettes
Brand identity from footage
A client hands you a brand film and says “make the website feel like this.” Instead of guessing, extract the palette and build the site’s color tokens from the footage itself. The CSS-variables export drops straight into a stylesheet, so the brand’s motion identity and web identity share the same DNA.
UI design from reference video
Designing an app with a cinematic feel? Pull the palette from a film trailer or showreel in the genre you are targeting. The dominant colors become your surfaces; the low-share swatches become your accents and CTAs. It is mood-boarding with math.
Color grading reference
Filmmakers and editors use extracted palettes as grading targets: sample a reference clip, note its five core hues, then match your own footage toward them in your color panel. Faster than describing “that warm film look” in words.
Event and wedding themes
Planners pull palettes from venue walkthrough videos or inspiration reels to build decor, floral, and stationery schemes. A palette extracted from the actual venue footage beats one guessed from memory.
Thumbnail and cover design
YouTubers and marketers design thumbnails that pop against — or harmonize with — the video itself. Extract the palette first, then pick thumbnail text and shape colors from the accent swatches for contrast that is guaranteed to work with the footage.
How to Extract a Color Palette from Video in 3 Steps
- 1
Drop in your video
Add an MP4, MOV, or WEBM file. It is decoded locally — nothing is uploaded.
- 2
Tune the extraction
Choose how many frames to sample (8–24) and how many colors you want (6–10), then run it.
- 3
Copy or export
Click any swatch to copy its HEX, or export everything as CSS variables, a text list, or a PNG strip.
Turning Swatches Into a Working Color Scheme
A palette is raw material, not a finished scheme. The classic 60-30-10 rule maps neatly onto the share percentages this tool reports: let the top one or two swatches (your 60%) carry backgrounds and large surfaces, the next two (30%) handle secondary elements, and reserve the smallest-share swatches (10%) for accents — buttons, links, highlights. Because the shares come from real pixel counts, the ratio is already tuned to the footage.
Watch out for the two usual suspects in video-derived palettes: near-black and near-white. Letterbox bars, fade-ins, and overexposed skies inflate them. If your top swatches are #0A0A0A and #F5F5F5, that is the video telling you about its exposure, not its art direction — skip down to the first chromatic swatches for the real story.
Finally, treat extracted palettes as starting points for accessibility checks, not finished accessible schemes. Run your chosen pairs through a contrast checker before shipping — a beautiful cinematic palette can still fail WCAG on text, and it is cheaper to adjust a swatch now than to redesign later.
More Free Video Tools
Frequently Asked Questions
How do I extract a color palette from a video?▼
Drop your video into the extractor above and click "Extract Color Palette". The tool samples frames evenly across the full duration, analyzes the pixels with median-cut quantization, and returns the dominant colors as HEX and RGB swatches. Click any swatch to copy its HEX code, or export the whole palette as CSS variables, a text list, or a PNG strip.
Is my video uploaded to a server?▼
No. Everything runs locally in your browser — the video is decoded, sampled, and analyzed on your own device. Nothing is uploaded, which also means there is no queue, no file-size limit on our side, and your footage stays private. The only limits are your device’s memory and your browser’s codec support.
How accurate are the extracted colors?▼
The palette reflects the colors that actually dominate your footage, weighted by how many sampled pixels each color represents. Each swatch shows its share (for example "23% of sampled pixels"), so you can tell at a glance which colors define the video and which are accents. Sampling more frames gives a more representative result for long or varied videos.
Can I use these colors in Figma, Photoshop, or my code?▼
Yes. Click any swatch to copy its HEX code straight into Figma, Photoshop, Illustrator, or any design tool. The "Copy as CSS variables" button gives you a ready-to-paste :root block (e.g. --palette-1: #A1B2C3;) for stylesheets, and the text list works anywhere plain text does.
What video formats are supported?▼
MP4, MOV, and WEBM — anything your browser can decode natively. MP4 with H.264 works everywhere; HEVC/H.265 support depends on your device and browser. If a file will not load, re-exporting it as H.264 MP4 almost always fixes it.
Why do my palettes look similar, and how do I get more varied colors?▼
Similar palettes usually mean the footage itself has a consistent grade — which is useful information in its own right. For more variety, raise the "Palette colors" setting from 6 to 10 (finer shades get their own swatches) and sample more frames (16 or 24) so brief scenes contribute. Re-extracting is instant, so experimenting costs nothing.