Convert RGB Values to Image
Render RGB or RGBA pixel arrays as PNG, JPEG, or WebP. JSON, hex, flat-list input. Free, offline, client-side, instant, secure.
Render any pixel array as a PNG, JPEG, or WebP image. Accepts four input formats with auto-detection: JSON objects [{r,g,b,a}], JSON arrays [[r,g,b,a]], hex strings, or a flat number list. Pure client-side rendering via Canvas - your pixel data never leaves your browser.
How to Use Convert RGB Values to Image
- Pick or paste your pixel data. Four input formats are auto-detected: JSON objects
[{"r":255,"g":0,"b":0}], JSON arrays[[255,0,0]], JSON or comma-separated hex strings["#FF0000"], or a flat number list255,0,0, 0,255,0. Use the Sample drop-down for ready-made test data (gradient, checkerboard, RGB strip, alpha fade). - Choose dimensions. Tick Auto-fit and the tool computes a square-ish W×H from your pixel count (256 pixels → 16×16, 100 → 10×10, etc.). Or untick it and type exact values - the tool draws as many pixels as fit, drops the rest with a warning.
- Set pixel scale. 1× draws actual size (tiny sprite at 16×16), 8× scales each pixel to an 8×8 block (preserves the chunky look - no smoothing). Useful for visualizing small inputs.
- Pick output format. PNG keeps alpha and is lossless. JPEG drops alpha but compresses smaller. WebP supports both alpha and quality control. The quality slider appears only for JPEG/WebP.
- Click Generate. The preview shows the result on a checkerboard background so transparency is visible. Stats below show input format detected, pixel count, output dimensions, file size, and how many pixels were used vs dropped.
- Force opaque ignores any alpha values in your input and sets everything to 255 - handy when your input has stale alpha you want to discard, especially with PNG/WebP output.
- Copy or Download. Copy puts the image directly on your clipboard (PNG fallback for JPEG/WebP if browser refuses). Download saves
rgb-image.png/.jpg/.webpdepending on format. Reset reloads the 16×16 gradient sample.
Frequently Asked Questions
Which input formats does it actually accept?
Four: (1) JSON array of objects with r/g/b/a – [{"r":255,"g":0,"b":0,"a":255}], alpha optional. (2) JSON array of arrays – [[255,0,0],[0,255,0,128]], 3 or 4 channels per pixel. (3) Hex strings as JSON array ["#FF0000","#00FF00"] or comma/space-separated #FF0000, #00FF00 – 3, 6, or 8 hex digits each. (4) A flat number list – 255,0,0, 0,255,0 – channel count inferred from the Force-opaque toggle (3 if forced opaque, 4 if not). Auto-detection happens in that order: objects → hex-JSON → arrays → flat-hex → flat-numbers.
Does it really support alpha (transparency)?
Yes – properly. Input alpha flows through to PNG and WebP output (visible against the checkerboard preview). JPEG cannot represent alpha and will composite onto white. The Force-opaque toggle overrides input alpha and forces 255 for every pixel. The “alpha-fade” sample data demonstrates this clearly – 16 pixels stepping from transparent indigo to fully opaque.
Can I download as PNG, JPEG, AND WebP?
Yes, all three. The Output format drop-down switches between them; the Download button writes rgb-image.png, .jpg, or .webp accordingly. PNG is lossless with alpha. JPEG drops alpha and uses the quality slider (default 90%). WebP supports both alpha and the quality slider – usually 20-40% smaller than JPEG at equivalent quality.
What happens if my pixel count doesn’t fit the dimensions?
If you have more pixels than W×H, the excess is dropped and the stats line says “fill=W*H/total (N dropped)”. If you have fewer pixels, the trailing area stays transparent black (or solid black if Force-opaque is on). Use Auto-fit to avoid this – it picks dimensions that exactly divide your pixel count, falling back to a square-ish layout if no clean factorization exists.
What does the pixel scale do?
Nearest-neighbor upscale, applied after the image is built. 1× outputs the actual W×H. 8× outputs 8W×8H with each input pixel as an 8×8 block of the same color – no smoothing. Useful when your input is tiny (16×16) and you want a viewable file. The downloaded image is the scaled version, not the original tiny one.
How big can the image be?
Capped at 2,097,152 pixels (1024×2048 or equivalent). Beyond that, the canvas operation slows browsers and can crash mobile Safari. The cap is enforced after parsing, before any rendering, with a clear toast error. If you need bigger, split your data into chunks and compose externally.
What happens to out-of-range values like 300 or -5?
Clamped to 0-255 with a yellow info toast counting how many values were clamped, and the stats line shows clamped=N. The image still renders. Non-numeric values (NaN, strings, undefined) reject the whole input with a specific “Pixel N: non-numeric channel” error – the prior image stays in the preview so you don’t lose state.
Why use this instead of just drawing on a canvas myself?
Quick visualization of pixel arrays: debugging image processing code, recovering an image from logs, checking a procedural texture, or making a tiny sprite from hand-coded color values. The four input formats let you paste data directly from your existing code or JSON output without reformatting. The auto-fit and scale options handle the boring math.
Is my pixel data uploaded?
No. All parsing, validation, canvas rendering, and PNG/JPEG/WebP encoding happens in your browser using Canvas toBlob(). Open DevTools → Network and confirm zero requests fire – even when you Generate or Download. Safe for proprietary art assets or sensitive image data.
Does it work offline?
Yes. Total bundle is about 28 KB. Load once, disconnect, keep generating. Handy when working on planes or in low-bandwidth environments where a cloud-based image converter would be slow or unavailable.