Build a placeholder image specification with dimensions and colors
Ask for a 640 × 360 placeholder and get the canvas size, colors written one consistent way such as #1A2B3C, and a «640 × 360» label centered at 320, 180. Reserve image slots in a layout before the final pictures arrive. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
A placeholder image specification is useful when a layout needs predictable image geometry before the final artwork exists. Supply a positive pixel width and height, then optionally choose hexadecimal background and text colors. The result describes the canvas, normalized colors, and a dimension label positioned at the exact center.
Define the canvas before building the interface
Start with the exact width and height that the eventual image must occupy. The returned dimensions object preserves those values without scaling or guessing an aspect ratio. This makes the result useful as a stable boundary between a content system that knows the required image slot and a renderer that will later turn the specification into SVG, canvas commands, CSS, or another format.
Because this capability returns a description rather than binary image data, callers retain control over file type, compression, typography, and rendering environment. A card component can request a landscape specification, while an avatar component can request a square one, and both receive the same predictable structure. Invalid zero, negative, fractional, missing, or nonnumeric dimensions are rejected instead of being silently corrected, preventing malformed layout data from moving farther through a pipeline.
Choose colors with canonical hexadecimal values
Background and text colors are optional. When they are omitted, the specification uses a neutral light gray background and dark gray label color that work as practical placeholder defaults. When supplied, each color must use hexadecimal CSS notation with three, four, six, or eight digits; the leading hash is optional.
Short forms are expanded and letters are converted to uppercase, so equivalent inputs produce one canonical value. For example, a short color and its six-digit form will not create needlessly different cache keys or snapshots. Four- and eight-digit forms preserve alpha information for renderers that support transparency.
The capability deliberately does not accept named colors, gradients, functions, or design tokens because those values depend on a particular styling environment and would weaken the portability of the result. It also does not claim that a chosen pair meets a contrast standard. If readability is important, validate the normalized colors with a contrast-checking step before rendering.
Render the centered label consistently
The label text is generated directly from the validated dimensions in the familiar width-by-height form. Its horizontal coordinate is half the width, and its vertical coordinate is half the height, so odd dimensions can legitimately produce half-pixel coordinates. Explicit horizontal and vertical alignment values tell a downstream renderer to anchor the label at its center rather than treating the coordinates as a top-left origin.
This avoids embedding assumptions about font family, font size, line height, or text measurement, all of which belong to the rendering layer. A browser implementation might map the fields to SVG text attributes, while a server-side graphics library could use the same coordinates with its own centering options. The specification remains deterministic across those uses because it performs only validation, normalization, and arithmetic.
No network request, clock, random source, or stored state influences the output.
What you can do with it
Feed an internal image renderer
Normalize dimensions and colors before converting the result into SVG, canvas operations, or server-side drawing commands.
Stabilize visual test data
Use deterministic label coordinates and canonical colors in snapshots without depending on an external placeholder service.
FAQ
What happens when colors are omitted?
The background defaults to #CCCCCC and the label defaults to #333333. Both appear in normalized six-digit form in the result.
Which color formats are accepted?
Hexadecimal CSS colors with three, four, six, or eight digits are accepted, with or without a leading hash.
Why can a center coordinate contain a decimal?
An odd pixel dimension has its mathematical center between pixels, so dividing it by two correctly produces a half-pixel coordinate.
Does it create the placeholder image file itself?
No. It describes the canvas, the colors and the centered label without drawing, downloading or storing any picture. Whoever turns it into an image keeps full control over file type, compression and fonts.
Does it check that the text is readable on the background?
No, it does not claim that a color pair meets any contrast standard. If readability matters, run the two cleaned-up colors through a contrast checker before you draw the placeholder.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/image/placeholder-image-spec \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":640,"height":360}'const res = await fetch("https://api.kit.forhosting.com/image/placeholder-image-spec", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 640,
"height": 360
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/placeholder-image-spec",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 640,
"height": 360
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/placeholder-image-spec", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":640,"height":360}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":640,"height":360}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/placeholder-image-spec", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"width": 640,
"height": 360
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.placeholder_image_spec",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_mb | 15 |
max_megapixels | 12 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
It does not download, render, or store an image, so the same input always produces the same compact JSON result without relying on a remote placeholder service.
Choose colors with canonical hexadecimal values
Clear validation errors identify which color field has an unsupported format, allowing a form or API client to correct the input immediately.
Integration use cases
Prepare responsive layout fixtures
Create consistent specifications for image slots used by cards, galleries, and banners before production assets are available.
Technical questions
Does this capability create an image file?
No. It returns a renderer-neutral JSON specification describing the canvas, colors, label text, and centered label position.
What does an API request cost?
Each API request costs $0.002. The calculation itself uses no external network service.