Your files never leave your device. All processing happens locally in your browser.
How do I check whether a creative follows my brand colours, resolution and safe zones without uploading it?
Open the Creative Brand Compliance Checker and drop in a PNG or JPG — it is decoded locally on an in‑page canvas. Set your BRAND RULES: an allowed colour palette (type hex, pick a preset, or one‑click LOAD from a saved Brand Kit), a colour tolerance (OKLab ΔE), an intended output size + minimum DPI, and an edge safe‑zone margin. The tool then runs three automated checks — it extracts the creative’s dominant colours and matches each to the nearest brand colour by perceptual ΔE in OKLab (flagging off‑brand colours and reporting an on‑brand %), computes the effective DPI at your output size versus the minimum, and scans how much non‑background content sits in the outer edge margin — and returns a PASS / REVIEW verdict with a score, an annotated PNG and a copyable text report. Everything runs in your browser; the creative never leaves your device.
Drop a PNG / JPG — decoded locally, never uploaded
Brand palette by hex, preset, or one‑click load from a saved Brand Kit
Colours matched to the nearest brand colour by perceptual OKLab ΔE — off‑brand flagged, on‑brand % reported
Effective DPI at your output size vs a minimum, plus the exact pixels you’d need
Edge safe‑zone scan + PASS / REVIEW report, annotated PNG and copyable text
What is
brand compliance checking (of a creative)
Brand compliance checking is verifying that a finished creative follows the brand’s rules — its approved colour palette, minimum resolution and safe‑zone / clear‑space margins — before it is published. An automated, 100% client‑side version reads the image’s pixels in the browser, extracts its dominant colours and measures each one’s perceptual ΔE to the nearest brand colour, calculates the effective DPI at an intended output size, and estimates how much content intrudes into the edge margin, producing a pass / review report without the image ever leaving the device.
No. The image is decoded on an in‑browser canvas and every check runs on your device, so nothing is uploaded.
The Creative Brand Compliance Checker is 100% client‑side. Your creative is read with a FileReader and drawn onto an in‑page <canvas>; the colour extraction, OKLab ΔE matching, DPI maths and safe‑zone scan all run locally in JavaScript, and any saved Brand Kit is read from your own browser localStorage. Nothing — not the image, not the report — is fetched, uploaded, logged or stored on a server, there is no CDN in the processing path, and the tool works offline once cached. Close the tab and your file is gone.
It matches each dominant colour to the nearest brand colour by perceptual ΔE in OKLab and flags any beyond your tolerance.
The tool extracts the creative’s dominant colours with a modified median‑cut quantiser (the same engine as the palette extractor), then for each one finds the nearest colour in your brand palette using ΔE — Euclidean distance in Björn Ottosson’s OKLab colour space, which is perceptual and hue‑linear. The ΔE is scaled ×100 so its magnitude sits near the familiar CIE‑ΔE range (about 2 is just‑noticeable). Any colour whose nearest‑match ΔE exceeds your tolerance is flagged off‑brand, and the tool reports an on‑brand percentage weighted by each colour’s pixel share. Colours are read in sRGB, so it is a fast perceptual pre‑check, not a CMYK / Pantone or ICC‑profile match.
Effective DPI = pixels ÷ output inches vs your minimum; the safe zone flags content in the outer edge margin.
For resolution you set an intended output size (business card, A4, poster or a custom width × height in inches) and a minimum DPI, and the tool computes effective DPI as the creative’s pixel dimensions divided by that size on each axis, reporting the binding value and the exact pixel size you’d need to hit the minimum. For the safe zone it estimates the background colour from the four corners, then measures how much non‑background content falls inside an outer edge margin you choose (a percentage of the shorter side) — the zone most likely to be cropped by feed placements — and flags it if occupancy is high. Both are heuristics: an up‑scaled image can pass on pixel count yet look soft, and the safe‑zone scan reads pixels, not your layout.
No — it is an automated pre‑check for colour, resolution and safe zones, not a full brand review.
It is designed to catch the obvious, expensive mistakes fast — off‑brand dominant colours, too‑low resolution and content sitting in the crop zone — before a design goes out. It does not understand your layout, so it cannot tell a deliberate full‑bleed photo from a logo about to be cropped, and because it judges the dominant colours a tiny wrong accent or a colour used in the wrong place can slip through. It also does not check logo clear‑space rules, typography, spelling, legal disclaimers, CMYK / Pantone colour or platform ad policies. Treat the PASS / REVIEW verdict as a helpful first pass, then confirm by eye against the full brand guidelines.
Detailed Explanation
📖How It Works
What the Creative Brand Compliance Checker Does
The Creative Brand Compliance Checker is a 100% client-side pre-check that verifies a finished creative against a brand’s rules before it is published. The user drops in a PNG or JPG — decoded locally onto an in-page canvas — and defines BRAND RULES: an allowed colour palette (typed hex, a preset, or one-click loaded from a Brand Kit saved in the browser), a colour tolerance expressed as OKLab ΔE, an intended output size plus a minimum DPI, and an edge safe-zone margin. It then runs three automated checks — colour, resolution and safe zone — and returns a binary PASS / REVIEW verdict with a 0–100 score, an annotated PNG and a copyable text report. It is the free, private answer to “does this ad actually follow our brand colours, resolution and crop-safe rules?” without uploading the artwork to a cloud service.
Creative decoded locally on an in-page canvas — never uploaded
Three checks: on-brand colour, effective DPI, edge safe-zone occupancy
Palette can be loaded one-click from a saved Brand Kit (localStorage)
PASS / REVIEW verdict with a score, annotated PNG and copyable report
⚙️Methodology
How the Colour Check Works (OKLab ΔE)
The creative’s dominant colours are extracted with a modified median-cut quantiser (the same paletteExtractEngine used by the colour palette extractor), which weights each split by population so small, vivid accents are not swallowed by one large region. Each dominant colour is then matched to the NEAREST brand colour by ΔE — the Euclidean distance in Björn Ottosson’s OKLab colour space, a perceptual, hue-linear space — scaled ×100 so its magnitude sits near the familiar CIE-ΔE range where roughly 2 is just-noticeable. A colour whose nearest-match ΔE exceeds the user’s tolerance is flagged OFF-BRAND, and the tool reports an on-brand percentage weighted by each colour’s share of the sampled pixels. All colour maths runs through culori, loaded lazily and memoised; colours are read in sRGB.
Dominant colours via modified median cut (population-weighted)
Nearest brand colour by perceptual ΔE in OKLab, scaled ×100 (~2 ≈ just-noticeable)
Off-brand = nearest ΔE above the chosen tolerance (default 10)
On-brand % is weighted by each colour’s pixel share
sRGB read; no CMYK / Pantone / ICC-profile matching
🔧Technical Details
Resolution and Safe-Zone Maths
The resolution check computes EFFECTIVE DPI as the creative’s true pixel dimensions divided by the intended output size in inches, per axis, and compares the binding (smaller) value to the minimum DPI; it also reports the exact pixel size needed to hit that minimum. Because DPI is meaningless without a physical size, the check is disabled when the user picks the “screen / social” option (minimum DPI 0). The safe-zone check estimates the background colour by averaging the four corner blocks, then walks the outer edge margin (a percentage of the shorter side) counting pixels whose RGB distance from the background exceeds a threshold; it reports the band’s occupancy overall and per side, flagging content that a feed placement might crop.
Effective DPI = pixel dimension ÷ output inches, taken per axis
Reports the binding DPI and the exact pixels needed for the minimum
Resolution check auto-disables for screen / social (min DPI 0)
Background estimated from the four corners; edge band scanned for content
Safe-zone occupancy reported overall and per side (top / right / bottom / left)
⚠️Limitations
Honest Limitations
These are fast, automated HEURISTICS, not a replacement for a human reviewing against the full brand guidelines. The colour check judges the DOMINANT colours, so a tiny but wrong accent, or a brand colour used in the wrong place, can slip through, and matching is perceptual sRGB — not CMYK, Pantone or ICC-profile colour management. The resolution check is bitmap-only: an image up-scaled from a small original can “pass” on pixel count yet still look soft, and the effective DPI depends entirely on the output size entered. The safe-zone scan reads pixels, not layout, so it cannot distinguish a deliberate full-bleed photo from a logo about to be cropped, and it assumes a reasonably uniform background. The tool does NOT check logo clear-space rules, typography, spelling, legal disclaimers or platform ad policies. The verdict is a helpful first pass to confirm by eye.
Judges dominant colours — a small wrong accent can slip through
sRGB perceptual match only; no CMYK / Pantone / ICC colour management
Resolution is bitmap-only; an up-scaled image can pass yet look soft
Safe zone is a background/edge heuristic, not layout understanding
No logo clear-space, typography, spelling or ad-policy checks
🔒Privacy & Security
Private by Design
Everything happens on the device. The creative is read with a FileReader and drawn onto an in-page <canvas>; the colour extraction, OKLab ΔE matching, DPI arithmetic, safe-zone scan and the annotated-PNG report are all computed locally in JavaScript, and any brand palette loaded from a Brand Kit comes from the browser’s own localStorage. Nothing — not the image, not the report — is fetched, uploaded, logged or stored on a server, there is no CDN in the processing path, and the only optional network use is consent-gated ads. The tool works offline once cached and keeps no accounts. This matters because ad and marketing creatives are frequently confidential before launch and should never round-trip through a third-party service just to be checked.
Image read with FileReader and drawn onto an in-browser canvas
Colour, DPI and safe-zone maths computed locally; report built on-device
Brand Kit palette read from your own localStorage — not a server
No upload, no CDN in the path; works offline once cached
Only optional network use is consent-gated ads
Ways to check a creative against brand rules
Approach
How it works
Trade-off
Used here
This client-side checker
Reads the image locally, matches dominant colours by OKLab ΔE, checks effective DPI and edge safe-zone occupancy
Private + free + offline; heuristic pre-check on dominant colours, sRGB only
Yes
Manual eyeball vs brand book
A person compares the design to the guidelines by eye
Understands context and intent, but slow, subjective and error-prone at volume
Complement
Enterprise brand-governance suites
Cloud platforms score assets with ML against a hosted brand profile
Powerful and layout-aware, but paid and the creative is uploaded to a service
No
Eyedropper / DPI calculators
Sample a pixel or divide pixels by inches by hand
Free, but manual, one value at a time, and no combined verdict
Alternative
Everything here runs in the browser; the creative is never uploaded. Checks are automated heuristics (colour ΔE in OKLab/sRGB, effective DPI, edge occupancy), not a full human brand review. As of July 2026.
