Sifency Tools
Let’s Talk

Colour placeholder image generator

Pick a size and a colour and download a placeholder image with a proper file name. Everything is made in your browser.

Live preview

1920 × 1080 px · 16:9 · 2.1 MP · preview scaled, the download is full size

Saves as placeholder-1920x1080-3b82f6.png

Size

Up to 8192 px on a side and 16.8 megapixels in total.

Style

Fill

Pattern

Label

Colour

rgb(59, 130, 246) · hsl(217, 91%, 60%)

Suggested colours

Shades of this colour

File

Tokens: {width} {height} {size} {color}

Copy as code

Paste the placeholder straight into HTML or CSS. It uses the format chosen above (PNG); SVG gives the shortest text.

Batch download

Collect several sizes, then save them all as one PNG ZIP. Up to 60 images.

The queue is empty. Add the image you see above, or a whole set of ready-made sizes in the current colour and style.

Placeholder sizes

Every size has its own page with the right shape already set up, and notes on where the image is used.

Web and layout

Social media

Marketplace

Ad sizes

How it works

  1. Choose a size

    Pick a ready-made size from the list, such as a hero, an Open Graph image or an ad slot, or type your own width and height. Lock the ratio to keep the shape while you resize.

  2. Pick a colour

    Use a suggested colour, a shade of your current colour, the colour picker, or type any hex, rgb or hsl value. The preview updates as you type.

  3. Add a style if you want one

    Keep it flat, add a soft gradient or a subtle pattern, and turn on a label that shows the size. The label is always black or white, whichever is easier to read.

  4. Download

    Choose PNG, WebP, JPG or SVG and press Download. The file is made on your device and named from the size and colour, so it is easy to find and replace later.

Questions about placeholder images

Is my placeholder uploaded anywhere?

No. The image is drawn and saved by your own browser. Nothing you type or download is sent to a server, and the page works without an account.

What is the biggest placeholder I can make?

Up to 8192 pixels on each side and 16.8 megapixels in total, for example 4096 by 4096. Larger canvases fail silently in some browsers, especially on phones, so the limit keeps every export reliable.

Which format should I choose?

PNG is exact and tiny for flat colour. WebP and JPG let you trade quality for size, which helps with gradients and patterns. SVG is a vector file of a few hundred bytes that stays sharp at any size, so it suits layouts that scale.

How are the files named?

By default as placeholder, the size and the colour, for example placeholder-1920x1080-3b82f6.png. You can change the pattern with the tokens {width}, {height}, {size} and {color}. Names are kept to plain letters, numbers, dots and dashes so they work on every system.

Will the label always be readable?

Yes. The label is black or white, whichever has more contrast with your colour, and it always reaches at least 4.5 to 1. Patterns are drawn against the label colour, so they never make the text harder to read.

Next step

Take the colours from a real image

Instead of guessing a placeholder colour, drop in a photo or a logo and pull its main colours out, ready to paste as CSS variables or a Tailwind theme.

Get a palette from an image
View all tools
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open toolDevice Mockup GeneratorPut a screenshot in a clean device frame in seconds.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.