Generate a Solid-Colour PNG
Pick a colour and dimensions; download a flat-colour PNG. No file input — three fields and a button. Useful as a placeholder image, a mock-up background, a CSS test fixture, or the base layer for a hand-built OG card.
Common sizes
- 1200×630 — Open Graph / Facebook / LinkedIn share card.
- 1200×675 — Twitter/X large card.
- 1080×1080 — Instagram square.
- 1080×1920 — Instagram story / Reels.
- 1280×720 — YouTube thumbnail.
- 1920×1080 — full-HD video backdrop / slide background.
- 2048×2048 — design canvas placeholder.
- 1×1 — tracking-pixel substitute (use a transparent PNG instead for that — this tool only does opaque colours).
Use cases
- OG card base. 1200×630 brand colour, then overlay text in a design tool — or use OG image for the full thing.
- Video editor backdrop. 1920×1080 solid colour for compositing or green-screen tests.
- Slide background. Plain-colour PNG dropped into Keynote / PowerPoint when the built-in colour fill is wrong.
- "Loading" placeholder. Solid neutral colour while real images load.
- CSS test fixture. Plain image for testing
object-fit/ responsive image behaviour.
FAQ
Can I download as JPG or SVG?
Yes — pick PNG, JPG, or SVG in the Format dropdown. SVG comes out as a tiny one-line <rect> file (a few bytes, scales to any size); JPG is handy when a system rejects PNG. PNG is the default and keeps things simple.
Why is the file bigger than a few bytes?
The browser's PNG encoder writes a baseline PNG. A 1200×630 flat colour comes out around 1–3 KB. Tiny for a website, fine for one-off uses. For absolute minimum size, encode by hand (a 1×1 transparent PNG is 67 bytes).
Can I add a gradient or pattern?
Not in this tool. For gradients use OG image (gradient background option) or a desktop editor.
Transparent PNG instead?
This tool generates opaque solid colours only. For a fully-transparent canvas (e.g. as a layer base), the simplest path is a 1×1 solid PNG with alpha — easiest done in a desktop editor.
Part of: Ship loading and placeholder art
A BlurHash is ~30 characters of text, so it ships in the HTML and shows before any image request starts.
- 1 PNG to BlurHash The 30-character blur that loads with the page
- 2 Placeholder A labelled grey box at any size
- 3 Solid color One flat colour, exact hex
- 4 Gradient A gradient background at any size
Part of: Build a starter brand kit from one logo
Everything downstream wants a different shape of the same mark. Make the square master once and derive the rest from it.
- 1 Initials avatar A fallback mark if there is no logo yet
- 2 Solid color Flat brand-colour plates at any size
- 3 OG image The 1200×630 social card
- 4 Watermark The mark, applied over photography
- 5 Favicon kit Every icon size a browser and an OS ask for