Create Image With One Color
Create solid color images at any size with optional alpha transparency. 8 quick presets. PNG/WebP/JPEG. Free, client-side.
Create a solid-color image at any size (up to 8192×8192) with optional alpha transparency. 8 quick presets. Export as PNG, WebP, or JPEG.
Preview
How to Use Create Image With One Color
- Set width and height (1 to 8192 px each). Common: 1920×1080, 1280×720, 16×16 favicons.
- Pick a color via the visual picker or paste a hex code (with or without
#,#rgbshort form also accepted). - Set alpha 0-1 for transparency. 0 = fully transparent, 1 = opaque. Alpha < 1 produces an RGBA PNG/WebP. JPEG has no alpha so it gets flattened over white.
- Pick format. PNG = lossless, supports alpha. WebP = smaller, supports alpha, modern browsers. JPEG = smallest but no alpha and DCT artefacts on solid colors (rare, but visible at low quality).
- Click Generate (or Ctrl+Enter). Preview, copy data URI, or download.
Frequently Asked Questions
Can I create transparent images?
Yes. Lower the alpha slider below 1.0 – your image becomes semi-transparent at that alpha value. Alpha = 0 is fully invisible (still saves correct dimensions).
What’s the difference between PNG, WebP, and JPEG for solid colors?
PNG: lossless, supports alpha, ~30-50 bytes per solid-color image (huge compression on flat colors). WebP: also tiny (~50-100 bytes), supports alpha, smaller for images with detail (irrelevant here since flat). JPEG: ~500-1500 bytes for solid colors (less efficient on flat regions due to DCT block encoding), NO alpha. For solid colors, PNG is usually best.
What hex formats does the typed input accept?
Six-digit hex (#ff5733 or ff5733) and three-digit shorthand (#f53 = #ff5533). Case-insensitive. Invalid input shows a specific error. The visual picker and typed hex stay in sync as you edit either one.
Why is the file so small?
Compression. A solid-color 1920×1080 PNG is typically 100-300 bytes – that’s about a million times smaller than the raw 8.3 MB of uncompressed pixel data. The encoder recognises “every pixel is colour X” and stores just the colour plus the header.
What’s the maximum size?
8192 × 8192 px. The HTML spec doesn’t strictly cap canvas size, but most browsers fail past ~16k × 16k, and mobile Safari often fails earlier. 8192 works everywhere as of 2026.
Why does alpha + JPEG flatten over white?
JPEG has no alpha channel – every pixel is fully opaque. So if you ask for “red at alpha 0.5” as JPEG, the encoder has to drop the alpha. The tool flattens against white (the most common background) and shows a toast so you know. If you need that pink-on-some-other-color look, render twice or use PNG/WebP instead.
Why might WebP / JPEG silently downgrade to PNG?
Old browsers (Safari pre-14, some embedded WebViews) can’t encode WebP or JPEG via canvas. The tool detects this – if toDataURL('image/webp') returns a PNG data URI, the tool keeps the PNG output and tells you in a toast. The filename uses .png in that case.
What’s in the download filename?
Format: solid-{width}x{height}-{hexNoHash}[-a{alpha%}].{ext}. E.g., solid-1920x1080-ff0000.png or with 50% alpha: solid-1920x1080-ff0000-a50.png. The alpha suffix only appears when alpha < 1.
Why use an image file instead of a CSS background?
Image upload form testing, email templates (most clients block CSS backgrounds), print layouts that need raster files, mockup placeholders, and any tooling that requires a file rather than a CSS string.
Is anything uploaded?
No. The Canvas API runs in your browser. Nothing leaves your device.