Placeholder Image Generator

Every placeholder is drawn on an HTML5 canvas (or built as raw SVG markup) entirely in your browser: a solid background fill, two diagonal cross-lines from corner to corner, and a centered label. The cross-lines are stroked in a lightened tint of the background, computed by an adjustBrightness() helper that blends each RGB channel 10% toward white (r + (255-r)*0.1), so the X stays visible on any color without a second picker. The label is set in a 600-weight system-ui / -apple-system sans-serif stack, sized at min(width, height) / 8 so the text scales with the smaller dimension and never overflows a thin banner. By default the label shows the dimensions as '800 × 600' (the starting size), but a 'Show dimensions' checkbox can hide it and a free-text field overrides it with any custom caption.

Three export formats are offered and they behave differently. PNG and JPG are rasterized by redrawing the full-resolution image onto an off-screen canvas at the exact requested pixel dimensions, then calling toDataURL with a 0.9 quality argument that applies to JPG (lossy) while PNG stays lossless; for these the cross-line width scales up to max(1, min(width,height)/400) so the X doesn't disappear on large images. SVG is generated as hand-written markup instead of canvas output, so it is only a few hundred bytes, stays razor-sharp at any zoom, and can be inlined directly into HTML. The 'Copy URL' button copies a data URI you can paste straight into an <img src> or CSS background-image: PNG/JPG copy the canvas data URL, while SVG is base64-encoded into a data:image/svg+xml;base64 URI. Downloads are named placeholder-{width}x{height} with the matching extension. Note there is no @2x / retina rendering option - the bitmap is produced at the literal width and height you enter.

Dimensions are entered through width/height number inputs whose min/max attributes constrain them to 1-4096 pixels per side, and a live readout shows the megapixel count as width×height/1,000,000. Twenty-six named presets are grouped into Social Media (Instagram Post 1080×1080, Instagram Story 1080×1920, Facebook Post 1200×630, Twitter Header 1500×500, YouTube Thumbnail 1280×720, Pinterest Pin 1000×1500, and more), Web (Favicon 32×32, App Icon 512×512, Open Graph 1200×630, Hero 1920×1080, and three avatar sizes), and Standard aspect ratios (Square, 4:3, 16:9, 21:9, 3:2, plus A4 Portrait 595×842 and A4 Landscape 842×595, the 72-PPI point dimensions of A4). Colors come from a 10-swatch background palette and a 4-swatch text palette, each backed by a native color picker for arbitrary hex. A 'Random' button picks a random background swatch and then auto-selects black or white text by computing relative luminance (0.299R + 0.587G + 0.114B)/255 and flipping to black above a 0.5 threshold, white below. The full configuration - width, height, bgColor, textColor, text, showDimensions, format - is encoded in the URL via useUrlStates, so a Share button hands someone a link that reproduces the exact placeholder.