How to set up color management across web, print, and motion so your brand looks identical everywhere

I’ve lost count of how many times a client has sent a Pantone swatch or a PNG exported from a website mockup and then received a printed poster that looks nothing like the on-screen design. Color consistency across web, print, and motion is one of those deceptively tricky problems: it’s part technical, part process, and part communication. In this post I’ll walk you through a practical, repeatable color-management workflow that keeps your brand colors looking as identical as possible across screens, paper, and video.

Why color management matters (and what “identical” really means)

Color is perception. Different devices reproduce different ranges of color (gamuts) and different viewers sit in different lighting conditions. So “identical” is aspirational — but we can get extremely close by managing three things intentionally: the color space, the device profiles, and the exported assets.

In practice, a good color-managed workflow means:

• Predictability: The color you choose in your design file will look close to the final deliverable.
• Repeatability: Anyone on the team can create compliant assets without ad hoc tinkering.
• Communication: You can provide files/printer specs that minimize surprises.

Quick primer: color spaces you’ll deal with daily

It helps to know a few names:

• sRGB: The web’s default color space. Narrower gamut, but consistent across most browsers and devices.
• Display P3 (and DCI-P3): Wide-gamut RGB used by many modern phones, tablets, and some monitors. Richer colors than sRGB.
• Adobe RGB: A wider gamut than sRGB, used sometimes in print workflows and photography.
• CMYK: The ink-based color model for printing. No single CMYK profile — different presses and paper require different ICC profiles (e.g., FOGRA, GRACoL).
• Rec.709 / Rec.2020: Video color spaces used for broadcast and some motion workflows.

Start with hardware: calibrate and profile your monitor

Before you do anything, make sure the primary design monitor is calibrated. I use a hardware calibrator (X-Rite i1Display Pro or Datacolor Spyder) and calibrate to a sensible target: D65 white point and 120–140 cd/m² brightness for typical office lighting.

Calibration creates an ICC profile that tells your OS and apps how your monitor reproduces color. Without this, two designers using different monitors will literally see different colors and make different adjustments.

Pick a “master” working color space

Choose one color space as your canonical workspace — where you create and store brand color values. My recommendation:

• For most brands: work in Adobe RGB or Display P3 if you want a wide gamut and often publish to devices that support P3. This gives you headroom to convert to sRGB for the web and to CMYK for print.
• If your audience is strictly web-only: you can work directly in sRGB to avoid conversions, but you lose gamut headroom for saturated brand colors.

Keep a recorded list of your brand color values in multiple representations: hex (for web), sRGB values, Lab or LCH (for perceptual adjustments), and CMYK (for print). That list becomes your single source of truth.

Practical workflow: web, print, motion

Here’s a step-by-step I follow on real projects.

Design phase

• Set your document’s color profile to your chosen master (e.g., Display P3 or Adobe RGB).
• Define brand colors as variables/tokens in your design tool. In Figma, use Color Styles; in Sketch, use Color Variables; in Photoshop/Illustrator, use Global Colors or Swatches.
• Keep Lab/LCH values for important colors — they’re more predictable when you need to adjust contrast or make perceptual matches across media.

Export for the web

• Convert images and raster assets to sRGB on export. Most browsers assume sRGB when a profile is missing; embedding the sRGB ICC profile in JPEG/PNG gives better reliability.
• For SVGs, specify colors as hex or use CSS color functions (e.g., rgb(), lab(), lch() — modern browsers support color() but test fallbacks).
• Consider offering P3 versions of hero images or video thumbnails for devices that can render them. Use picture element or media queries when you want to serve different assets.
• Use CSS media queries to detect color-gamut: @media (color-gamut: p3) to provide P3 palette alternatives if needed.

Export for print

• Convert artwork to CMYK only when you know the printer’s ICC profile. Ask the print house for their recommended profile (e.g., FOGRA39, SWOP, GRACoL).
• Soft-proof in Photoshop/Illustrator using the exact printer profile and simulate paper/ink. Adjust colors in Lab if a color falls out of gamut.
• Use spot colors (Pantone) for brand-critical hues that can’t be reliably achieved with CMYK. Provide Pantone specs and/or a Pantone bridge file.
• Export print files as PDF/X-1a or PDF/X-4 depending on the printer’s requirements. These formats embed profiles and preserve CMYK/spot colors correctly.

Export for motion and video

• Decide the destination color space early: Rec.709 for SDR broadcast, P3/Rec.2020 for HDR or cinema. Set your project/sequence color space accordingly (Premiere, DaVinci Resolve, After Effects).
• Work with linear/light-managed color workflows and apply LUTs for final grading. If your brand color is critical, create a reference LUT that maps your design color to the target video space.
• Render masters in the widest practical space (ProRes 4444 with a profile) then create delivery variants (Rec.709, H.264) with careful color transforms.

Embed and name profiles consistently

Always embed ICC profiles in raster exports when you can. It reduces surprises. Name your assets clearly: brand-color-name_color-space_profile (e.g., brand-blue_sRGB_icc.jpg).

Documentation and tokens

Make a color spec sheet for the brand that contains:

• Hex (sRGB)
• RGB (sRGB)
• Lab and LCH
• CMYK values for the printer’s profile
• Pantone or spot specs (if any)

Publish these as part of your design system — either as JSON tokens, CSS custom properties, or a small downloadable PDF — so developers, printers, and video producers all have the same source of truth.

Common pitfalls and how to avoid them

• Designing in sRGB then printing without conversion: leads to duller prints. Always soft-proof and convert to the printer’s CMYK profile.
• Failing to embed profiles: web browsers guess; printers make their own assumptions. Embedding reduces ambiguity.
• Using wildly saturated P3 colors for web-only assets: they’ll clip to sRGB for many users. If a color must be identical across all audiences, choose within sRGB gamut or define fallbacks.
• Not communicating with your printer/video house: printers have preferred profiles and paper stocks; post houses have color pipelines. Ask early.

Recommended tools

• Hardware: X-Rite i1Display Pro, Datacolor SpyderX
• Design: Photoshop, Illustrator, Figma, Sketch, Affinity Designer
• Proofing & conversion: Adobe Acrobat (PDF/X export), Ghostscript, ColorSync Utility (macOS)
• Motion: DaVinci Resolve, Adobe Premiere Pro, After Effects
• Color management helpers: LittleCMS, DisplayCAL for advanced profiling

Quick reference table: destination vs. recommended approach

Color management isn’t a one-click setting — it’s a small suite of habits: calibrate your hardware, pick a master working space, embed profiles, soft-proof to the final medium, and document everything. When everyone on the team follows the same rules and you communicate requirements to printers and post houses, the number of “why does this look different?” moments drops dramatically. If you want, I can give you a template color spec (JSON + PDF) you can plug into your design system — say the word and I’ll draft one based on a sample palette.