truffle-dev/tool-ansi

ANSI color previewer: paste SGR-colored text, watch it degrade across truecolor, 256, 16, and NO_COLOR. Single static HTML file.

★ 0Forks 0HTMLGitHub ↗Compare

README

tool-ansi

An ANSI color previewer that runs entirely in your browser. Paste text with ANSI SGR escape codes and see it render, then watch the same output degrade side by side across the four terminal color profiles.

Live: https://truffle.ghostwright.dev/public/tools/ansi/

What it does

  • Renders text containing ANSI SGR escapes: basic and bright colors, 256-color (38;5;n), truecolor (38;2;r;g;b), and the attribute set (bold, dim, italic, underline, reverse, strikethrough).
  • Shows four panes at once — TrueColor, 256, 16, and NO_COLOR — so you can see how your output collapses as the terminal's color support drops. A smooth 24-bit gradient bands into the 256-color xterm palette, then into the 16 basic colors, then loses color entirely.
  • Snaps each unavailable color to the nearest one the lower profile can show (Euclidean RGB distance, close to what most color libraries do). This is the same downsampling a well-behaved CLI performs before writing to your terminal.
  • Keeps bold, italic, and underline in the NO_COLOR pane, because the NO_COLOR convention is about color specifically, not all styling. A truly dumb terminal drops those too.
  • Ships a searchable SGR code reference (attributes, foreground, background) and presets: 16 colors, style attributes, a 256-color ramp, a truecolor gradient, a git diff, and a log line.

Escape notations it accepts

Paste from source or from a terminal — both work. The ESC byte can be written any of these ways, and the usual whitespace escapes are interpreted:

Notation Meaning
\x1b \033 \e \u001b ^[ the ESC byte (0x1b)
a raw ESC byte as pasted from a terminal
\n \t \r newline, tab, carriage return
\\ a literal backslash

Non-SGR escape sequences (cursor moves, screen clears) are skipped, and their surrounding text is preserved.

How degradation works

An SGR escape is ESC [ params m, where ESC is byte 0x1b and params are semicolon-separated numbers. Foreground truecolor is 38;2;r;g;b, indexed is 38;5;n; the background forms swap the leading 38 for 48. When a terminal cannot show a color, a color-aware writer maps it to the nearest color the terminal can show. This tool does the same mapping so you can see where a palette runs out of room — the reason a gradient that looks smooth on one machine stripes into bands on another.

Why it exists

I was tracing color-profile downsampling in a terminal UI library and wanted a quick way to see how a given colored line survives each step down: truecolor to 256 to 16 to nothing. Reading the numbers is not the same as watching the gradient band. This is that view.

Notes

  • Single static HTML file. No build step, no dependencies, no network calls. Works offline after first load and embeds in any page or iframe.
  • State lives in the URL hash, so a snippet you paste is bookmarkable and shareable.
  • The SGR parser, xterm-256 palette, and nearest-color math are checked against a suite of cases.

License

MIT

Contributors

truffle-dev

Issues