Skip to content
Metadata API · Use case

Extract brand colors from any website’s logo and preview image

Extract brand colors from a website without downloading a single image: the Metadata API returns the dominant palette of the page’s logo and preview image, with a background color and readable text colors already picked. Link cards, bookmark managers, CRMs and directory listings use it to tint each entry to the brand it points at.

Start with the Metadata API
The problem

Picking brand colors by hand does not scale past a few domains

Cards, embeds and link lists look generic in one shade of gray. Tinting each one to the linked brand needs a color you do not have, for thousands of domains you have never seen.

Doing it yourself means finding the logo and the og:image, downloading both, running a color quantizer and then checking contrast, because the most dominant color of an image is often unusable behind text. A hand-curated table of brand colors goes stale at the first rebrand.

With palette enabled, every image field in the metadata gains a palette array ordered from most to least dominant, plus background_color, color and alternative_color chosen for contrast. The colors arrive in the same response as the normalized metadata, so the card and its theme come from one request.

Open the live JSON with palettes
How it works

How to get a color palette from a logo or og:image

palette is a boolean and defaults to false. The computed colors arrive on the image and logo fields as hexadecimal strings, ready to drop into your CSS. The extending results guide lists the other enrichments that ride on the same request.

1 · Palette with the SDK
import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { image, logo } = await microlink.metadata('https://example.com', {
  palette: true
})

console.log(image.palette, image.background_color, image.color)

Each image field now carries palette, an array of hex colors from most to least dominant, next to background_color, color and alternative_color.

2 · Theme a preview card
import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { title, logo } = await microlink.metadata('https://example.com', {
  palette: true,
  meta: { title: true, logo: true }
})

const card = {
  backgroundColor: logo.background_color,
  color: logo.color,
  accent: logo.alternative_color
}

Restricting meta to title and logo skips the detection you do not render. The logo palette is often the truest brand color, because preview images tend to be photographs.

3 · The same request as a URL
curl 'https://api.microlink.io/?url=https%3A%2F%2Fexample.com&palette=true&meta.image=true&meta.logo=true'

palette=true adds the color fields to every image field in the JSON. The request runs on the free endpoint, with no API key.

Parameters used
  • palette Boolean, default false. Adds palette, background_color, color and alternative_color to every detected image field.
  • meta Keep only image and logo when colors are all you need.
  • data Extract a different image with a rule of type image and it gets a palette too.
  • ttl Brand colors change rarely; cache them for up to 31 days. Pro plans.

background_color is the palette color with the best WCAG contrast ratio for use as a background, color is the best color to lay over it, and alternative_color is the second best. When only two colors can be parsed, alternative_color equals color.

Why it works

Why compute dominant colors in the metadata API

The image is already fetched to measure its dimensions and size. Extracting its colors in the same pass saves you a download, a quantizer and a contrast library.

01 · Accessible by default
The pairs are chosen for contrast, not just dominance.
A dominant color is often unusable behind text. Microlink returns a background_color picked for a good WCAG contrast ratio, the color that reads best over it and an alternative, so cards stay legible without a second library.

Use the raw palette array when you want to pick your own accent from the most dominant colors.

02 · From the real assets
Logo and preview image, not a guess.
The palette is computed from the page’s own logo and preview image, which is where brand color lives. There are no lookup tables and no manual curation per domain, so a rebrand shows up when the cache expires.

For a different image, add a custom data rule with type image and it carries the same color fields.

03 · Cached with the preview
Colors ride along with the metadata you already fetch.
Because palette is part of the metadata response, a link preview and its theme share one request and one cache entry. Responses are cached for 24 hours by default, and cache hits do not count against your quota.

When not to: a monochrome logo or a photographic hero image produces a palette that is not the brand color. Fall back to your own accent when the pair looks off.

FAQ

Which fields does palette add to the metadata response?

For each image field, such as image and logo: palette, an array of hex colors from most to least dominant; background_color, the color with the best contrast ratio for a background; and color plus alternative_color, the two best colors to place over it. The rest of the asset object (url, type, width, height, size) is unchanged.

How do I extract brand colors from a website without downloading its images?

Request the page’s metadata with palette: true. Microlink finds the logo and the preview image, computes their palettes server-side and returns the colors as hex strings in the JSON, so your code never touches the image files.

Does palette work with a custom image extracted next to the metadata?

Yes. A data rule with type image resolves to an asset object, and with palette enabled it carries the same color fields as image and logo. The type reference lists every media type a rule can resolve to.

Are the colors from the metadata palette accessible?

background_color is chosen for a good WCAG contrast ratio and color is the best match over it, so regular body text stays readable. Verify against your own contrast target when the card carries small or light text.

Does palette slow down a metadata request?

It adds image processing, which is why the caching and performance guide lists it among the enrichments to skip when you do not need them. Keep meta scoped to image and logo, and cache the result with ttl on Pro plans, since brand colors rarely change.
Related use cases

Solve the next problem with the same API

Custom fields alongside metadata

Get prices, ratings, headings or any CSS selector, typed and returned next to the normalized metadata.
Extract custom fields 

Only the fields you need

Include or exclude normalized fields per request and trim the JSON for faster, lighter metadata calls.
Request only the fields you need 

Fix missing or wrong og:image

Override any normalized field with a rule and chain fallbacks so link previews never render empty.
Fix a broken og:image 

Link previews at scale

Unfurl links at any volume: no throttling, background refresh and cache hits that never count against your quota.
Scale your link previews 

Dynamic Open Graph images

Point og:image at an API URL and every share shows a current, cached screenshot of the page.
Generate Open Graph images 

Screenshots with a browser frame

Wrap the capture in a light or dark browser window over a color, gradient or image background.
Add a browser frame 

Ready to theme with brand colors?

Palettes and accessible pairs from the logo and image of any site. Start on the free tier and tint your first preview card today.

Extract a palette