Skip to main content
ASCII Art Generator logoASCII Art Generator

Colored ASCII Art: Keep Colors with HTML

Colored ASCII art uses ordinary characters with a foreground color for each part of the image. To keep those colors, enable color in Standard mode and download HTML. Copying the characters alone does not carry the colors with them.

Try the three-color sample

The sample first generates plain text. Choose Options, turn on Keep source colors, then generate again. No account is required.

A worked example: three colors, two characters

This original 30 x 12 pixel PNG contains three opaque bands. At 30 columns, the converter produces 7 rows. Red and green both become * with the Standard ramp; blue becomes #. The colored version distinguishes all three bands even though two share the same character.

Three equal vertical bands: red on the left, green in the middle and blue on the right.
Source PNG, enlarged without smoothing. Download the original sample. Generated from the RGB values below, not copied from an art collection.
********************##########
********************##########
********************##########
********************##########
********************##########
********************##########
********************##########
Exact Standard output, shown on white like the HTML export. No dithering, no inversion; brightness, contrast and saturation at 100%, hue and sepia at 0.
Source bands and their neutral-setting output
BandColumnsRGBHTML colorCharacter
Red1-10192, 32, 32#c02020*
Green11-2016, 128, 64#108040*
Blue21-3032, 64, 192#2040c0#
Compare the plain-text version
********************##########
********************##########
********************##########
********************##########
********************##########
********************##########
********************##########

The characters and line breaks are identical. Without color, the first two bands merge.

Make and save your own colored ASCII art

  1. Load the sample or your image

    Open the sample in the editor using the button below. It loads the original PNG and the complete settings for this example, then generates a plain-text result. To use your own image instead, select it in Upload.

  2. Enable color in Standard mode

    Select Options, use Standard ASCII Art and turn on Keep source colors. The sample link sets 30 columns, the Standard ramp, no dithering and neutral adjustments, but it does not enable color for you. Changing mode or loading settings turns color off; enable it again when needed.

  3. Generate the full result

    Select Generate ASCII Art. In Result, check the colored preview and expand View plain-text fallback to compare the characters. The small ASCII Preview in Options is plain text, not the full colored result.

  4. Download and open the HTML

    Select Download colored HTML. Open the saved .html file in a browser and check the colors, spaces and line breaks before sharing the file. It is a standalone document, not a colored clipboard format or terminal file.

Color currently supports Standard mode and printable ASCII ramps, not Unicode block ramps, edge detection, character matching or emoji output. For input formats and limits, see the image conversion guide.

HTML, plain text, PNG or ANSI?

Choose the format for the destination, not just the filename. An HTML document preserves this tool's RGB styling; a text file only contains the characters.

What the current exports preserve
FormatColor?Use and limitation
Colored HTMLYesOpen the saved file in a browser. It includes its text and inline color styles, with no scripts or external assets.
Copy or TXTNoEditable plain text. Preserve spaces, use a monospace font and avoid wrapping.
Markdown blockNoA fenced code block preserves text layout in a README, not these RGB colors. Syntax highlighting is not source-image color.
PNGMonochrome hereThe current PNG button renders black text on white, even for a colored result. Colored PNG export is not available.
ANSI terminal artNot exported hereTerminal colors need escape sequences and terminal support. Renaming this HTML file to .ans or .txt does not convert it.

A chat, social post or email signature may discard HTML or refuse the file altogether. Do not expect pasting the code into a GitHub README or Discord message to reproduce the preview. For a colored still image today, take a screenshot of the opened HTML file and inspect it before sharing; the PNG button is not a shortcut for that.

Why might the colors look different?

The sample is opaque and uses neutral adjustments, so its foreground RGB values match the source. Your image can differ: brightness, contrast, saturation, hue, sepia and inversion affect the sampled colors. Transparent pixels are blended onto white before those adjustments. See the worked transparency example for the alpha blend.

Dithering changes which characters represent brightness, not the foreground color palette. The colored preview and saved HTML use a fixed monospace font and white background, even when the site uses dark mode. Pale colors can be hard to read on white. Compare the full result at a comfortable size; increasing width alone does not fix low contrast.

The saved HTML contains the character art, not your original image or filename. It still contains the image's visual content as art: treat it as a file you intend to share. Read the data-handling explanation for the site's separate analytics, storage and hosting behavior.