Figma Colors from a Photo

Updated June 10, 2026

Figma colors from a photo are hex or RGB values extracted from a reference image and imported into Figma as color variables, styles, or swatch libraries—replacing tedious manual eyedropper sampling with a repeatable, algorithm-driven workflow that keeps design and engineering aligned on identical color codes.

Why Designers Need Photo-Derived Figma Palettes

Brand mood boards, product photography, and client references arrive as images—not spreadsheets of hex codes. Manually sampling pixels in Figma's eyedropper tool introduces inconsistency: slightly different zoom levels, compression artifacts, and anti-aliased edges produce different values across designers on the same team.

Extracting a palette algorithmically with Vibrant.js and ColorThief yields deterministic swatches every time. Those values flow into Figma variables, then into CSS custom properties and Tailwind tokens via PhotoTones Pro exports—one source of truth from photo to production.

Step 1 — Extract the Palette in PhotoTones

Open PhotoTones and upload your reference image. Processing completes in under 1 second with no server upload—all analysis runs locally via JavaScript and Canvas. The free tier returns six prioritized swatches; PhotoTones Pro extends to 8, 10, or 12 colors for design systems requiring extended ramps.

For logo and brand work, crop the image to the relevant mark before extraction. See brand colors from a logo for cropping and role-assignment guidance.

Step 2 — Export Figma-Compatible Formats

PhotoTones Pro provides three Figma-oriented export paths from the Export Palette menu:

• Figma Variables JSON — structured color variables ready for import into Figma's native Variables panel
• Tokens Studio JSON — compatible with the Tokens Studio for Figma plugin for teams using token-driven workflows
• Hex list clipboard — formatted hex values for quick paste into Figma color styles or local swatch libraries

Each format derives from the same extraction pipeline, so values stay consistent regardless of import method.

Step 3 — Import Into Figma

For Figma Variables: Open your Figma file, navigate to Local Variables, and import or paste the JSON structure. Map each variable to a color collection (e.g., "Brand / Primary", "Brand / Surface"). Apply variables to components instead of hardcoded fills.

For Tokens Studio: Install the Tokens Studio plugin, create or open a token set, and import the JSON export. Sync tokens to Figma variables for live preview on components.

For manual paste: Copy the hex list, create color styles in Figma's sidebar, and paste each value. This free-tier path works for solo designers on small projects but lacks the automation Pro exports provide.

Building a Complete Brand Kit

Individual color variables are the foundation; a client-ready deliverable includes more. PhotoTones Pro's brand kit ZIP bundles a PDF brand guide, W3C design tokens, Figma JSON, light/dark theme CSS, and swatch composites—everything a stakeholder or developer needs from one photo upload.

Pair Figma imports with the design tokens workflow so engineering receives the same hex values designers see in Figma variables—eliminating the classic "the button is a different blue in staging" handoff failure.

PhotoTones vs Manual Figma Eyedropper

Figma's built-in color picker samples a single pixel at a time. Building a six-color palette requires six separate samples, manual naming, and no deduplication of visually similar hues. PhotoTones clusters dominant colors perceptually, names swatches consistently (Vibrant, Muted, etc.), and exports all formats in one action. For teams iterating on brand direction from photography, the time savings compound across every revision cycle.

Privacy for Client and Pre-Launch Work

Agency workflows often involve unreleased product photography or confidential brand explorations. Because PhotoTones processes images entirely in the browser—never uploading to a server—designers can extract palettes from sensitive references without NDAs blocking cloud-based color tools. This privacy model is a core differentiator versus Adobe Color and Canva, which require image uploads.

FAQ