PhotoTones
Turn Any Image Into a Client-Ready Brand Kit
Stop handing clients a list of hex codes. PhotoTones Pro ships a one-click ZIP — print-ready brand guide, design tokens, Figma JSON, and theme CSS — from any photo, privately in your browser. $7/month, cancel anytime.
- Built for client handoffs
- Images never leave your device
- One kit replaces hours of manual exports
Less than one billable hour of freelance time — a reusable brand kit workflow for $7/month.
Cancel anytime · Instant brand kit access · Privacy-first
Only need hex codes? Use the free palette tool · Already subscribed?
Built for people who ship deliverables
The free tool is for extracting colors. Pro is for packaging them into something a client, teammate, or codebase can use.
- Freelancers & agencies Send a polished brand kit ZIP after a photoshoot or logo extract — not a screenshot of swatches.
- Product & brand designers Move from mood board to Figma Variables and design tokens in one private pass.
- Developers Drop in Tailwind, SCSS, CSS variables, or W3C tokens without retyping hex by hand.
Just browsing for hex codes? Stay on the free generator — no account, no paywall.
The deliverable clients actually want
Every Pro extraction can download a ZIP with a print-ready guide, token files, code exports, and preview images — ready to attach to an invoice or Slack handoff.
- brand-guide.html — print-ready visual guide
- tokens/ — W3C, Tokens Studio, Style Dictionary
- code/ — Tailwind, SCSS, CSS, light/dark themes
- figma/ — Variables + Tokens Studio JSON
- preview/ — composite + swatch PNGs
Pro workflows: Brand kit · Adobe ASE · Figma Variables · Design tokens.
What’s in the handoff
Hero deliverables
-
Brand Kit ZIP
One click downloads a client-ready ZIP: print-ready brand guide, all code exports, Figma JSON, theme CSS, and preview images. See how to create a brand kit from an image.
-
Design Tokens
W3C Design Tokens JSON, Tokens Studio, Style Dictionary, and Tailwind v4
@themeCSS for modern design systems. -
Light & Dark Themes
Accessible semantic UI CSS — primary, surface, text, and border tokens derived from your palette with WCAG-checked pairings.
Professional workflow
-
Extended Palettes (8, 10, 12 colors)
Hybrid Vibrant.js + ColorThief extraction for larger design systems beyond the free 6-color limit.
-
Full Resolution & PNG Download
Photo + swatches composite at full pixel dimensions — JPEG or lossless PNG (free tier is 50% resolution).
-
WCAG Contrast Grid
N×N contrast matrix with AA/AAA badges and suggested accessible text/background pairings.
-
Figma Workflow
Copy Figma Variables JSON or Tokens Studio JSON for fast import via the Tokens Studio plugin. Guide: Figma Variables from image.
Also included
-
Adobe ASE, Tailwind v3, SCSS, CSS, Procreate
Classic export formats for Creative Cloud, web projects, and iPad illustration workflows. ASE guide: Adobe ASE from image.
Free extracts colors. Pro ships the kit.
Use free forever for hex, RGB, and HSL. Upgrade when you need a client-ready package — brand kit ZIP, tokens, Figma JSON, and professional file exports.
Less than one billable hour · $7/month · Cancel anytime
Only need hex codes? Use the free tool →Frequently Asked Questions
What is PhotoTones Pro?
PhotoTones Pro is a $7/month subscription for agencies, freelancers, and design-system teams who need a client-ready brand kit from a photo — not just hex codes. It unlocks brand kit ZIP downloads, W3C and Tokens Studio design tokens, Figma Variables JSON, light and dark theme CSS, extended palettes up to 12 colors, Adobe ASE, Tailwind, SCSS, CSS, and Procreate exports, full-resolution downloads, and a WCAG contrast grid.
Who is PhotoTones Pro for?
PhotoTones Pro is for people who ship color deliverables: freelancers and agencies sending brand kits to clients, product designers handing off Figma variables, and developers who need design tokens or Tailwind/SCSS from a photo. If you only need hex or RGB codes, the free PhotoTones tool is enough.
What is in the PhotoTones Pro brand kit ZIP?
The brand kit ZIP includes brand-guide.html (print-ready visual guide), tokens/ (W3C, Tokens Studio, Style Dictionary JSON), code/ (Tailwind, SCSS, CSS, light/dark themes), figma/ (Variables and Tokens Studio JSON), palette/ (Adobe ASE and Procreate swatches), and preview/ (composite and swatch PNGs). Full walkthrough: brand kit from image.
How much does PhotoTones Pro cost?
PhotoTones Pro costs $7 per month — less than one billable hour of freelance time for a full brand kit ZIP you can reuse all month. Cancel anytime from the Stripe billing portal. The free color palette from image generator stays free with no signup.
What design token formats does PhotoTones Pro export?
PhotoTones Pro exports W3C Design Tokens JSON, Tokens Studio JSON, Style Dictionary JSON, and Tailwind v4 @theme CSS — plus Figma Variables JSON for design handoff. See design tokens from an image.
Can PhotoTones Pro export Figma Variables from a photo?
Yes. PhotoTones Pro copies Figma Variables JSON or Tokens Studio JSON so you can import palette colors into Figma via the Tokens Studio plugin — all generated from your image in the browser.
Does PhotoTones Pro export Adobe ASE swatches?
Yes. PhotoTones Pro exports Adobe ASE swatch files for Creative Cloud apps, plus Tailwind config, SCSS variables, CSS custom properties, and Procreate .swatches.
Does PhotoTones Pro include light and dark theme CSS?
Yes. PhotoTones Pro generates accessible semantic light and dark theme CSS — primary, surface, text, and border tokens derived from your palette with WCAG-checked pairings.
Does PhotoTones Pro include a WCAG contrast grid?
Yes. PhotoTones Pro includes an N×N WCAG contrast matrix with AA/AAA badges and suggested accessible text and background pairings from your extracted palette.
How many colors can PhotoTones Pro extract?
PhotoTones Pro extends palette extraction from 6 colors (free) to 8, 10, or 12 colors using a hybrid Vibrant.js + ColorThief k-means clustering pipeline — ideal for larger design systems.
Is the free PhotoTones tool still available without Pro?
Yes. The core tool is always free — unlimited extractions, 6 colors, hex/RGB/HSL copy, and a low-resolution composite. Stay free if you only need color codes. Subscribe to Pro when you need a brand kit ZIP or professional exports for a client or codebase.
Are Pro exports private?
Yes. Brand kit packaging and all Pro exports run in your browser. PhotoTones never uploads, stores, or transmits your images — the same privacy guarantee as the free tool.