Convert Hex to Image

All four standard forms, all with an optional leading # and in any case: #RGB (3-digit shorthand, each nibble doubled), #RGBA (4-digit with alpha), #RRGGBB (6-digit standard CSS), and #RRGGBBAA (8-digit with alpha byte, where 00 is fully transparent and FF is fully opaque).

Colors are placed at equally-spaced stops along the gradient. Two colors give a simple fade; three give a midway transition; four or more create multi-band gradients. The direction (horizontal / vertical / diagonal) controls only the visual axis – color distribution is always even along that axis.

Up to 4096 × 4096 pixels. Beyond that, browsers start throttling canvas allocations. On a modern laptop, even a 4K diagonal gradient renders in under 300 ms. If you need larger output (for print), render several tiles and stitch them in an image editor.

For 4-digit (#RGBA) and 8-digit (#RRGGBBAA) hex, the last nibble/byte controls transparency. #FF000080 is red at 50% alpha. The downloaded PNG preserves alpha as a true transparency channel – in gradient mode, alpha interpolates smoothly like RGB channels.

Only that entry is dropped. The image renders with just the valid colors, and the error list below the canvas shows the exact problem (wrong character count, non-hex character, etc.) for each bad entry. You don’t lose your other inputs to a typo.

Yes. The output has no watermarks and no license restrictions imposed by this tool – use it in client work, commercial design, print, social media, or anywhere. Note that standard intellectual-property rules still apply if you’re encoding copyrighted brand color palettes.

No. Everything runs client-side via the Canvas 2D API – hex codes never leave your device, no requests fire during generation. You can confirm this in your browser’s Network tab. The tool keeps working even after you disconnect from the internet.

The preview area uses a transparent-checkerboard background so you can see alpha channels clearly. When you download the PNG, the transparency is preserved as a real alpha channel (not painted against the checkerboard). The downloaded file will composite over whatever background you place it on.

This one focuses on solid fills and smooth gradients – few colors, many pixels each. The “hex codes to image” tool in the Image category focuses on pixel-art and swatches – many colors, few pixels each. Use this one for backgrounds and gradient hero images; use the other for encoding color palettes or sprite data.

Yes. The Copy button puts the full data:image/png;base64,… string on your clipboard, which works as-is in an <img src>, CSS background-image: url(…), or any tool that accepts data URLs. No upload to an image host required.