Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
OG Image Generator
Render a 1200×630 share card locally, preview it on each platform, and copy the meta tags.
Tool Panel
Processed locallyAbout OG Image Generator
Renders a 1200×630 share card locally, previews it inside X, Facebook, LinkedIn and Slack card layouts, and emits the twelve og / twitter tags.
- 1
Renders a **1200×630** share card in the browser (the Open Graph standard size): in text mode the title wraps to at most three lines and **breaks CJK per character**, so a space-less paragraph cannot overflow the canvas; upload mode fits an image and centre-crops it.
- 2
It shows **previews for X, Facebook, LinkedIn and Slack** plus ready-to-use meta tags (one `og:*` set and one `twitter:*` set), so a card that looks fine locally does not get half cropped when shared.
- 3
Everything is rendered locally with canvas — nothing is uploaded — and the download is a 1200×630 PNG. You can also copy just the tags without generating an image.
- 1
Choose text or upload mode
Text mode takes a title, description, site name and URL; upload mode scales the image to fill and centre-crops it.
- 2
Set the theme and accent
Dark and light backgrounds, with the accent colour used for the brand fragment of the title.
- 3
Compare previews, copy tags, download the PNG
Upload the PNG first to get an absolute URL, then point `og:image` at it.
Yes: a crawler has no page context when it fetches the image, so **a relative path cannot resolve**. Use an absolute address such as `https://yourdomain/og.png`. The order is therefore: generate and upload the image, get its URL, then paste it into the tag.
Platforms **cache** what they fetched. Rename the file or add a version parameter (`og.png?v=2`) to force a refetch. Keep the important content centred as well: each platform crops to its own ratio (a Slack unfurl is squarer than 1.91:1), so edges can disappear — which is exactly why four previews are shown here.
The tool does not emit it. It helps screen readers and describes the image when it fails to load, so add a line by hand if you want it: `<meta property="og:image:alt" content="…" />`. Also mind the file size: most platforms stop fetching somewhere around 5–8MB.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools