What this ASCII art generator does
ASCII art draws a picture with letters, digits and symbols. Dense characters like @ and # stand for dark areas, light ones like . and : for bright areas, and a space for white. This tool turns any image into such a picture. You set how many characters wide it should be, pick a set of characters, and copy the result as text for a chat, a code comment, a README file or an email signature. With Color on, every character takes the color of its part of the image, which you can save as a PNG.
How an image becomes text
The image is cut into a grid of cells, one cell per character. With a width of 100 characters, each row of text covers one hundredth of the image's width. For each cell the tool averages the red, green and blue values of all its pixels and turns them into one brightness value with the weights of ITU-R BT.709:
brightness = 0.2126 × R + 0.7152 × G + 0.0722 × B
Brightness and contrast are applied next, with the same formulas as the CSS brightness() and contrast() filters. Then the brightness picks a character from the ramp: the brightest cells get the first character, a space, and the darkest get the last and densest one. With Dark (invert) the ramp runs the other way, so bright parts of the image get dense characters, which is what you want for light text on a dark background like a terminal. Transparent pixels count as the background.
Characters are taller than they are wide, so a grid of square cells would stretch the picture. The tool makes each cell taller by the Character shape value, 2.0 by default, and uses fewer rows to match. A 1,200 × 800 pixel image at 100 characters wide gives 33 rows.
Options explained
| Option | What it does |
|---|---|
| Width in characters | 20 to 240 columns. More columns show more detail. |
| Standard | The 10 characters .:-=+*#%@, a short sequence from Paul Bourke's page on character images |
| Detailed | Bourke's ramp of 70 characters for finer shading |
| Blocks | Space, light shade ░, medium shade ▒, dark shade ▓ and full block █ from the Unicode Block Elements |
| Custom | Your own characters, from lightest to darkest |
| Dark (invert) | Bright areas get dense characters, for light text on a dark background |
| Color | Each character in the average color of its cell, in the preview and the PNG |
| Character shape | Cell height divided by width; change it if the art looks stretched where you paste it |
| Fit to width | Shrinks the font of the preview so the whole picture fits your screen. Actual size shows it at a fixed size that you scroll. |
A worked example
Take a cell that is pure orange, red 255, green 128 and blue 0. Its brightness is 0.2126 × 255 + 0.7152 × 128 + 0.0722 × 0 = 145.76, or 57.2 percent of white. The standard ramp has 10 characters, numbered 0 to 9 from light to dark. On a light background the tool picks number round((1 − 0.572) × 9) = 4, which is =. With invert on it picks round(0.572 × 9) = 5, the character +. Raising the contrast pushes such middle tones toward the ends of the ramp, which gives bolder, simpler art.
Limits and tips
ASCII art lines up only in a monospace font. Paste it into a code block, a plain text editor or a terminal; in a normal font it falls apart. Fonts and line spacing differ, so the same text can look a little taller or wider in another app; adjust Character shape to match. Color exists only in the preview and in the PNG; plain text cannot carry it. The block characters are not part of ASCII, and some apps draw them wider than letters.
Pictures with clear shapes and strong contrast, like logos, portraits against a plain background and silhouettes, work best. Busy photos turn into noise at small widths; raise the contrast or crop the image first with the image cropper. To clean up a photo before converting it, try black and white image or sharpen image. Large images are first scaled down to at most 1,600 pixels on the long side. That hardly changes the result, because even 240 characters are far fewer than the pixels of such an image.
How to turn an image into ASCII art
- 1Drop an image on the box, choose one, paste one, or try the sample picture.
- 2Set the width in characters and pick Standard, Detailed, Blocks or your own characters.
- 3Choose a light or dark background, turn on Color if you like, and adjust brightness and contrast.
- 4Copy the text, or download it as a .txt file or a .png image.
Sources
- Paul Bourke, Character representation of grey scale images (1997): the 70-character ramp and the 10-level sequence used for Detailed and Standard
- Recommendation ITU-R BT.709-6: luminance weights 0.2126, 0.7152 and 0.0722
- W3C Filter Effects Module Level 1: section 13.1, the brightness() and contrast() formulas
- Unicode code chart Block Elements, U+2580 to U+259F: full block U+2588 and the shade characters U+2591 to U+2593
Related guides
- Passport Photo Size by Country: US, UK, Canada and More
- How to Type °, ©, €, ñ and Other Special Characters
- NATO Phonetic Alphabet: Alfa to Zulu, With Numbers
Frequently asked questions
Is my image uploaded?
No. Your browser opens the image and turns it into text on your own device. Nothing is sent to a server.
Why does my ASCII art look squashed or stretched?
A character is about twice as tall as it is wide in most monospace fonts, so the tool uses fewer rows than columns. If the art looks stretched where you paste it, change Character shape: a lower value gives more rows, a higher value fewer. The font and line spacing of the place you paste into decide the right value.
Why is the art misaligned when I paste it?
ASCII art only lines up in a monospace font, where every character has the same width. Paste it into a code block, a plain text editor or a chat that supports code formatting. In a normal font a space is narrower than an @, so the picture falls apart.
Which character set should I use?
Standard uses 10 characters and gives clean, readable art. Detailed uses 70 characters and shows finer shading at larger widths. Blocks uses the shade characters ░ ▒ ▓ █ and looks smooth, but they are not plain ASCII, so some places show them with a different width. Custom lets you type your own characters, from the lightest to the darkest.
Can I keep the colors?
Yes. Turn on Color to see each character in the color of its part of the image, and download the PNG to keep it. Plain text has no colors, so the copied text and the .txt file are always black and white.
What width should I choose?
For a chat message or a code comment, 40 to 80 characters fit most windows. For a detailed picture to save as PNG, 150 to 240 characters work better. More characters show more detail but need a smaller font to fit on the screen.