Convert Hex Codes to Image

Four formats, all with an optional leading # and in any case. #RGB (3-digit) expands each nibble (#f00 → #ff0000). #RGBA (4-digit) adds an alpha nibble. #RRGGBB (6-digit) is the standard CSS form. #RRGGBBAA (8-digit) includes a full alpha byte, where 00 is fully transparent and FF is fully opaque.

Single fills the whole canvas with the first color. Swatches divides the canvas into equal-width vertical stripes, one per color, left-to-right. Gradient linearly interpolates RGB (and alpha) between successive colors across the chosen direction. Pixel art sets exactly one pixel per hex code, scanning left-to-right then top-to-bottom – useful for encoding tiny sprites.

PNG supports a true alpha channel, but many image viewers composite transparent pixels onto white or black by default, which can make semi-transparent colors look different from what you see in the in-page preview (which is composited over the page background). If you need exact RGBA for web use, the Copy data URL button gives you the base64 string to embed directly.

Up to 4096 × 4096 pixels. Beyond that, browsers start throttling canvas allocations, and the PNG encode time rises nonlinearly. On a modern laptop, even a 4K gradient renders in under 300 ms. If you need larger output (for print), render several tiles and stitch them externally.

Only that line fails. The tool flags it in the error list below the canvas with the exact reason (“invalid length”, “non-hex characters”, etc.) and the line number, but still renders the image using every valid color. You don’t lose work on a typo.

Yes. The images are your output – no watermarks, no license restrictions imposed by this tool. Use them in client work, commercial web design, print, social media, NFTs, anywhere. Note that if you paste in copyrighted color palettes (e.g., brand colors owned by a corporation), standard intellectual-property rules around color usage still apply to you.

No. Everything runs client-side using the Canvas 2D API – the hex codes never leave your device, and no server stores or logs your input. You can open the browser’s Network tab to confirm: no requests fire during generation. The tool works offline after the initial page load.

Compactly encoding a tiny image as a list of hex codes. Set width and height to match the number of codes (e.g., 8×8 canvas with 64 hex codes gives you a full 8×8 sprite, one pixel per code). Each hex code becomes exactly one pixel in row-major order. Downloading the PNG and scaling it up in an image editor with nearest-neighbor gives crisp pixel art.

Colors are placed at equally-spaced stops along t=0→1. With 3 colors, stop 0 is at t=0, stop 1 at t=0.5, stop 2 at t=1. Between stops, each RGBA channel linearly interpolates, so a gradient #ff0000 → #00ff00 → #0000ff smoothly shifts red→green at the first half and green→blue at the second.

Yes – the Copy button puts the full data:image/png;base64,… URL on your clipboard, which any tool that accepts an <img src> will consume directly. Or download the PNG file and upload it elsewhere. The generated images are standard PNG with embedded color and alpha – no proprietary chunks.