Brand Color Palette to OG Image

Three ways to use the palette

A designed file is the right call when one card represents the whole site and you already have the artwork. A template you render is the right call when you want to own every pixel. The API is the right call when each page needs its own title on a shared layout, and the brand colors are a background and a text color.

Start from the color palette extractor when the artwork is a file on your machine. The extraction runs in the browser. The file is not uploaded to produce the swatches. Drop, paste, or browse an image. The page names PNG, JPG, WebP, and AVIF. It condenses the image to five colors, shows a contrast ratio for each, and copies the hex. Click a pixel when you need that pixel's color rather than a dominant one.

Approach	What you do	Where the hex goes	A card per page
A file per page	Design the PNG, upload it, and point og:image at that file.	You apply the hex in the design tool. Nothing in OG Pilot reads it.	You make another file when the title or the palette changes.
Your template, plus the hex	Your HTML or image library draws the card. You operate the renderer.	You pass the hex into your own template. OG Pilot is not in that step.	Yes, when your job runs per URL. You own fonts, layout, and the job.
OG Pilot API	Sign one request per page. The claims include template, title, bg_color, and text_color.	bg_color is the canvas. text_color is the type. The github template also takes accent_color for the contribution graph.	Yes. Change the title and path for the next URL. OG Pilot renders the named template. This page does not publish a render time.

Which palette role maps to which field

The API templates read two colors. bg_color is the canvas background. text_color is the type. Both accept a 3-digit or 6-digit hex, with or without a leading #. The server stores a lowercase 6-digit form. A value that is not hex is ignored.

If you omit a color, or the value is invalid, the API uses the color saved on the verified domain, then #ffffff for the background and #1a1a1a for the text. Saving a domain color is separate from the free extractor. The extractor does not write the domain.

accent_color is accepted on the github template only. It tints the contribution graph. The default is #e6a91a. A page, blog_post, product, or other template does not take that claim. There is no parameter for the rest of the palette.

Contrast is your check, not an API error. WCAG 2.1 AA for normal text is 4.5:1. The browser tool prefers a text color from the palette that reaches that ratio. If none does, it still shows the highest pair it found and the ratio. The MCP tool is stricter about the fallback: if no extracted color reaches 4.5:1, text_color becomes #FFFFFF or #111111, whichever contrasts more. meets_wcag_aa is true when the returned ratio is at least 4.5. The image API will still paint a pair under that ratio if you send it.

Role	Where you get it	Request field	What it changes
Background	A swatch you pick. On MCP, background_color is the most frequent color in the extract.	bg_color	Canvas background on the API templates. Default #ffffff when the claim and the domain color are both missing.
Text	A swatch that clears 4.5:1 against that background, or the MCP text_color.	text_color	Type color on the API templates. Default #1a1a1a when the claim and the domain color are both missing.
Accent	A third swatch, and only on the github template.	accent_color	Contribution intensity on the github template. Default #e6a91a. Other templates do not accept this claim.
Other swatches	The rest of the extract.	None	There is no palette array. Those colors are not painted.
Agent card	generate_og_image, after you have read the palette.	style	A catalog style key. The tool has no hex input, so it does not paint bg_color or text_color.

Pass the colors to the API

The request body is a signed JWT in the token field. The colors are claims inside that token, next to template, title, description, logo_url, image_url, and path. Required claims are iss (the verified domain) and sub (the API key prefix). The API allows an active subscription, a past-due subscription, or a trial, and the domain must be verified. Field names and SDK install steps are on /docs.

A completed JSON body includes status, url, width 1200, and height 630. Put url in og:image. A render that is still running returns HTTP 202 with status processing or failed, url null, and Retry-After: 30. bg_color and text_color are part of the cache key, so a new hex is a different image. A present iat keeps the hosted cache for 24 hours from that timestamp. Omit iat and the hosted cache does not expire on its own.

The longer comparison of a hosted API, @vercel/og, and a DIY pipeline is the OG image API page. This page does not publish a price. Plan defaults are on the pricing section.

Signed image request

POST https://ogpilot.com/api/v1/images
Content-Type: application/json
Accept: application/json

{"token":"YOUR_JWT_TOKEN"}

# JWT payload. Sign it with HS256. The API key is the secret and is not sent.
# iss is the verified domain. sub is the API key prefix (first 8 characters).
# The SDK samples on /docs build this token. This page does not show a signer.

{
  "iss": "example.com",
  "sub": "abcd1234",
  "template": "page",
  "title": "Pricing",
  "description": "Plans for teams that ship a card per page.",
  "bg_color": "#112233",
  "text_color": "#F7F4EF",
  "logo_url": "https://example.com/logo.png",
  "path": "/pricing"
}

Extract with MCP, then generate

extract_color_palette takes a public image URL and an optional limit from 1 to 8. The default is 5. It returns colors, swatches (each hex with contrast on white and on black), background_color, text_color, contrast_ratio, and meets_wcag_aa. Downloads stop at 8 MB, 8000 px on a side, and 24 million pixels. The tool finishes within about 12 seconds. It allows 30 calls an hour, inside a shared free-tool bucket. Base64 is not accepted. A guest connector session can call it. It does not spend a credit.

generate_og_image takes url and an optional style. It returns image_url. It does not accept the palette. Use the hex you just read to choose a style, or copy it into the API claims above. Allowed style keys are default, minimalistic, modern, vintage, colorful, abstract, geometric, kawaii, flat, comic, anime, van_gogh, watercolor, ballpoint, pencil, pixel_art, retro_game, halloween, thanksgiving, xmas. An omitted or unknown key uses default, which auto-detects. The tool needs a signed-in account with an active plan and a credit. A trial can call the API. A trial cannot call generate_og_image.

Auth is OAuth 2.1 with PKCE. The config file has no API key. Install steps are on /docs/mcp.

MCP install, palette, then a card

{
  "mcpServers": {
    "og-pilot": {
      "type": "streamable-http",
      "url": "https://ogpilot.com/mcp"
    }
  }
}

# Auth: OAuth 2.1 with PKCE. No API key in this file.
# Docs: https://ogpilot.com/docs/mcp

extract_color_palette
{ "image_url": "https://example.com/logo.png", "limit": 5 }

# Returns status, colors, swatches, background_color, text_color,
# contrast_ratio, and meets_wcag_aa.
# image_url is a public PNG, JPEG, GIF, WebP, or AVIF. No base64.
# limit is an integer from 1 to 8. The default is 5.

generate_og_image
{ "url": "https://example.com/pricing", "style": "modern" }

# url is required. style is optional. There is no bg_color, text_color, or palette field.
# An omitted or unknown style uses auto-detect (default).
# Returns status, image_url, page_url, title, and style.

Get an API key

Create an account, verify the domain, and pass bg_color and text_color from the palette. To let an agent read a public logo and generate a card, install the MCP server.

Get an API key Install the MCP server

How to turn a brand color palette into an OG image

Extract colors in the browser palette tool, or call extract_color_palette on a public image URL.
Choose a background and a text color. Keep the pair at or above the WCAG 2.1 AA contrast ratio of 4.5:1 for normal text.
Create an API key and pass bg_color and text_color in the signed image request. For an agent, install MCP: extract_color_palette reads the hex, and generate_og_image takes a page URL and a style, not the hex.
Put the image URL in og:image.
Check the public page in the Open Graph debugger.

Questions

How do I turn a brand color palette into an OG image?

Extract the colors, then pass bg_color and text_color on POST https://ogpilot.com/api/v1/images. Those claims paint the template background and the type. The browser extractor at /image-color-palette-extractor does not call the API. You copy the hex into the signed request.

Which hex values does the OG image API accept?

bg_color and text_color accept a 3-digit or 6-digit hex, with or without a leading #. Anything else is ignored. If the claim is missing or invalid, the API uses the color saved on the verified domain, then #ffffff for the background and #1a1a1a for the text. The github template also accepts accent_color, default #e6a91a, for the contribution graph. Other templates do not take accent_color. There is no palette array claim.

Can MCP paint those hex colors onto the card?

No. extract_color_palette returns colors, a text and background pair, a contrast ratio, and meets_wcag_aa. generate_og_image does not accept those values. It accepts a public page url and an optional style from the catalog. An omitted or unknown style uses auto-detect. extract_color_palette works on a guest connector session. generate_og_image needs an active plan and a credit. A trial is not enough. Install steps are at /docs/mcp.

What contrast ratio should the text and background meet?

WCAG 2.1 AA for normal text is 4.5:1. The palette tools in this app use that threshold. The API does not reject a low-contrast pair. It paints the hex you send. The criterion is documented at https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html.

Will this page publish prices or latency?

No. This page does not publish a price or a render time. Plan defaults are listed on /#pricing.

Brand color palette to an on-brand OG image