Sign inStart building
Workflows
Use cases Create & edit screens Icons for your brand Live shaders Rebrand a page Prebuilt workflows Campaign Studio UI Component Extractor App Screens Wireframe Flow Animation Capture Typography Matcher Design System Starter Logo Icon Generator Brand Kit Press Kit Site Redesign Brand Explorer Mood Board Design Critique Retexture Router SVG Generator Video Generator View all 19 workflows
MCPModelsPricingDocsSign inStart building
Prebuilt workflow · Design systems & tokens

Color Palette

Extract a full color scale from any image as oklch CSS variables and Figma-ready design tokens.

· You bring Image· variables.css· tokens.json

Build with it Open the canvas
CSS Variables
Claude Opus 5.5High

Analyze this image and extract a comprehensive color palette as CSS custom properties: Extract the dominant colors and generate: :root { /* Primary palette - extracted from image */ --color-primary: oklch(...); --color-primary-50: oklch(...); /* lightest */ --color-primary-100 through --color-primary-900; --color-primary-950: oklch(...); /* darkest */ /* Secondary & Accent - complementary colors */ --color-secondary: oklch(...); --color-accent: oklch(...…

33 lines · 928 charsEditorExpand
AttachmentsResponse
CODE$0.10Run
COMPOSEcss
:root {
  /* Primary palette - trail orange extracted from image */
  --color-primary: oklch(0.66 0.18 40);
  --color-primary-50: oklch(0.97 0.02 50);
  --color-primary-100: oklch(0.94 0.04 48);
  --color-primary-200: oklch(0.88 0.08 46);
  --color-primary-300: oklch(0.81 0.12 44);
  --color-primary-400: oklch(0.73 0.16 42);
  --color-primary-500: oklch(0.66 0.18 40);
  --color-primary-600: oklch(0.59 0.18 38);
  --color-primary-700: oklch(0.51 0.16 36);
  --color-primary-800: oklch(0.43 0.13 35);
  --color-primary-900: oklch(0.35 0.10 34);
  --color-primary-950: oklch(0.25 0.07 33);

  /* Secondary - fern / forest green */
  --color-secondary: oklch(0.30 0.04 175);
  --color-secondary-50: oklch(0.96 0.02 150);
  --color-secondary-100: oklch(0.92 0.04 148);
  --color-secondary-300: oklch(0.78 0.07 148);
  --color-secondary-500: oklch(0.62 0.08 150);
  --color-secondary-700: oklch(0.42 0.06 165);
  --color-secondary-900: oklch(0.25 0.03 180);

  /* Accent - lake blue & dirt tan */
  --color-accent: oklch(0.72 0.07 230);
  --color-accent-sand: oklch(0.85 0.04 65);
  --color-accent-sand-foreground: oklch(0.35 0.04 55);

  /* Semantic colors */
  --color-background: oklch(0.975 0.006 85);
  --color-surface: oklch(0.99 0.004 85);
  --color-surface-sunken: oklch(0.955 0.008 85);
  --color-foreground: oklch(0.24 0.025 185);
  --color-foreground-soft: oklch(0.42 0.015 180);
  --color-muted: oklch(0.55 0.01 90);
  --color-muted-background: oklch(0.93 0.006 90);
  --color-border: oklch(0.90 0.008 85);
  --color-border-strong: oklch(0.84 0.01 85);
  --color-ring: oklch(0.66 0.18 40 / 0.4);

  /* Chips */
  --color-chip-dirt: var(--color-accent-sand);
  --color-chip-loop: oklch(0.92 0.005 90);
  --color-chip-traffic: oklch(0.93 0.04 148);
  --color-chip-traffic-foreground: oklch(0.45 0.09 150);

  /* Charts */
  --color-chart-line: var(--color-primary-500);
  --color-chart-fill: oklch(0.88 0.06 45 / 0.6);
  --color-chart-bar: oklch(0.64 0.08 150);
  --color-chart-bar-inactive: oklch(0.90 0.005 90);

  /* Status colors - harmonized */
  --color-success: oklch(0.58 0.11 150);
  --color-warning: oklch(0.78 0.14 75);
  --color-error: oklch(0.56 0.19 28);
  --color-info: oklch(0.60 0.09 230);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: oklch(0.70 0.17 42);
    --color-primary-50: oklch(0.25 0.07 33);
    --color-primary-100: oklch(…
CSS Variables113 lines · 4.3k chars
CODE
IMAGE
Upload Image
Upload Image16:9
IMAGE
Design Tokens
Claude Opus 5.5High

Analyze this image and extract colors as Design Tokens in Figma Variables format (JSON): { "colors": { "primary": { "$type": "color", "$value": "#hexvalue", "$description": "Primary brand color" }, "primary-50": { "$type": "color", "$value": "#..." }, "primary-100": { "$type": "color", "$value": "#..." }, ... "primary-900": { "$type": "color", "$value": "#..." }, "secondary": { "$type": "color", "$value": "#..." }, "accent"…

27 lines · 1.1k charsEditorExpand
AttachmentsResponse
CODE$0.08Run
COMPOSEjson
{
  "colors": {
    "primary": {
      "$type": "color",
      "$value": "#E8643C",
      "$description": "Primary brand orange used for CTAs like Send to watch, active nav item, and selected filter chip"
    },
    "primary-50": {
      "$type": "color",
      "$value": "#FDF1EB",
      "$description": "Lightest orange tint for active navigation background"
    },
    "primary-100": {
      "$type": "color",
      "$value": "#FBE0D4",
      "$description": "Light orange tint for selected chip backgrounds"
    },
    "primary-200": {
      "$type": "color",
      "$value": "#F7C4AE",
      "$description": "Soft orange for elevation chart fill"
    },
    "primary-300": {
      "$type": "color",
      "$value": "#F2A283",
      "$description": "Muted orange for hover tints"
    },
    "primary-400": {
      "$type": "color",
      "$value": "#ED825D",
      "$description": "Medium orange for route lines on maps"
    },
    "primary-500": {
      "$type": "color",
      "$value": "#E8643C",
      "$description": "Base primary orange"
    },
    "primary-600": {
      "$type": "color",
      "$value": "#D35430",
      "$description": "Pressed/hover state for primary buttons"
    },
    "primary-700": {
      "$type": "color",
      "$value": "#B04326",
      "$description": "Dark orange for text on light orange backgrounds"
    },
    "primary-800": {
      "$type": "color",
      "$value": "#8A351F",
      "$description": "Deep orange for high-contrast accents"
    },
    "primary-900": {
      "$type": "color",
      "$value": "#5E2516",
      "$description": "Darkest orange shade"
    },
    "secondary": {
      "$type": "color",
      "$value": "#1F3A34",
      "$description": "Deep forest green used for logo, headings, and primary text emphasis"
    },
    "accent": {
      "$type": "color",
      "$value": "#7FA884",
      "$description": "Sage green used for weekly mileage bars and Low traffic tags"
    },
    "background": {
      "$type": "color",
      "$value": "#F7F4EE",
      "$description": "Warm off-white app background"
    },
    "surface": {
      "$type": "color",
      "$value": "#FBF9F5",
      "$description": "Card and panel surface color"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1E2A26",
      "$description": "Primary text color"
    },
    "muted": {
      "$type": "color",
      "$value": "#6B6F6A",
      "$d…
Design Tokens134 lines · 3.8k chars
CODE
Run all

A real run, unedited2 generations · $0.18 of walletBrand and inputs are fictional, made in Vmotif · 2026-09-24

What came back

Straight off the canvas.

Everything below is what this run returned, untouched.

  • CSS Variablescss
    :root {
  /* Primary palette - trail orange extracted from image */
  --color-primary: oklch(0.66 0.18 40);
  --color-primary-50: oklch(0.97 0.02 50);
  --color-primary-100: oklch(0.94 0.04 48);
  --color-primary-200: oklch(0.88 0.08 46);
  --color-primary-300: oklch(0.81 0.12 44);
  --color-primary-400: oklch(0.73 0.16 42);
  --color-primary-500: oklch(0.66 0.18 40);
  --color-primary-600: oklch(0.59 0.18 38);
  --color-primary-700: oklch(0.51 0.16 36);
  --color-primary-800: oklch(0.43 0.13 35);
  --color-primary-900: oklch(0.35 0.10 34);
  --color-primary-950: oklch(0.25 0.07 33);
  • Design Tokensjson
    {
  "colors": {
    "primary": {
      "$type": "color",
      "$value": "#E8643C",
      "$description": "Primary brand orange used for CTAs like Send to watch, active nav item, and selected filter chip"
    },
    "primary-50": {
      "$type": "color",
      "$value": "#FDF1EB",
      "$description": "Lightest orange tint for active navigation background"
    },
    "primary-100": {
      "$type": "color",
How it runs

One stage, all at once.

What each stage reads, what it makes and what it cost on this run. Steps inside a stage don’t wait on each other, so they run side by side.

  1. 01

    CSS Variables & Design Tokens

    Reads your inputsMakes 2 files

    2 steps, side by sideClaude Opus 5.5$0.18

From your agent

Or let your agent run it.

This run went through the Vmotif MCP server, the way Claude Code, Cursor or any MCP client drives it: seed the canvas, fill the inputs, run the graph.

create_canvas({ premade_workflow_id: "color-palette" })
update_canvas({ canvas_id, updates: [/* your inputs */] })
run_workflow({ workflow_id: canvas_id })
MCP docs
More in Design systems & tokens

Extract a coherent, on-brand system — colors, type, tokens, and theme files ready to drop into a codebase.

Typography MatcherIdentify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.In — DesignOut — analysis.md · type-system.cssDesign System StarterBuild a starter system from a brand reference: tokens, globals.css, a Tailwind config, base components, and a preview board.In — Brand assetsOut — tokens.json · globals.css · tailwind.config.ts · components.tsx · previewLogo Icon GeneratorTurn a brand name and brief into three deliberately different logo icon concepts — a monogram, an abstracted category metaphor, and a personality mark — each as a production-ready SVG.In — Brand name + briefOut — 3 concept SVGs · lockup.svgBrand KitFeed in a logo and a short brief and get a written style guide, an OG image drawn from it, and a Tailwind v4 theme, all on-brand.In — Logo + brand briefOut — style-guide.md · og-image · theme.cssPress KitTurn a logo and a short brief into an on-brand press kit — cover, story, logo usage, colors, and type — as landscape pages you export to one PDF.In — Logo + briefOut — 6 landscape pages · DESIGN.md · press-kit.pdf

What will you create?

Start building
Workflow reference →