DEV Community

Dev Nestio
Dev Nestio

Posted on

ANSI Color Code Generator: Build Terminal Escape Sequences Visually

#webdev #devtools #terminal #javascript

Stop memorizing ANSI escape sequences. I built a browser tool to generate them visually — pick colors, styles, and get the code ready to paste.

Try it

🔗 ANSI Color Code Generator — DevNestio

Features

  • 3 color modes: 8-color, 256-color palette, RGB truecolor (24-bit)
  • 8 text styles: Bold, Dim, Italic, Underline, Blink, Reverse, Hidden, Strikethrough
  • Separate FG/BG: Set foreground and background colors independently
  • 3 output formats: Shell (echo -e), Python (print), Raw escape sequence
  • Live preview in a simulated terminal box

How ANSI sequences work 

ESC [ <codes> m
Enter fullscreen mode Exit fullscreen mode

Multiple codes are separated by ;. Reset is ESC[0m.

8-color: codes 30-37 (FG), 40-47 (BG), 90-97 (bright FG)

256-color: ESC[38;5;<0-255>m for FG, ESC[48;5;<0-255>m for BG

RGB truecolor: ESC[38;2;<R>;<G>;<B>m

256-color palette calculation 

function get256Color(i) {
  if (i < 16) return standardColors[i].hex;
  if (i < 232) {
    const n = i - 16;
    const r = Math.floor(n / 36) * 51;  // 255/5 = 51
    const g = Math.floor((n % 36) / 6) * 51;
    const b = (n % 6) * 51;
    return `rgb(${r},${g},${b})`;
  }
  const v = (i - 232) * 10 + 8; // 24 grayscale steps
  return `rgb(${v},${v},${v})`;
}
Enter fullscreen mode Exit fullscreen mode

Output examples 

# Bold red text on black
echo -e "\e[1;31mHello, Terminal!\e[0m"

# RGB orange (Python)
print("\033[38;2;255;128;0mOrange text\033[0m")
Enter fullscreen mode Exit fullscreen mode

Tested with 128 assertions covering code generation, color math, and format strings.

Part of DevNestio — 115 free browser-only developer tools.

Top comments (1)

Collapse
 
nazar_boyko profile image
Nazar Boyko •

One thing that'd make the preview line up with real terminals, the 256-color cube doesn't step in even multiples of 51. xterm and most terminals use 0, 95, 135, 175, 215, 255 for the six levels, so the * 51 math lands close but drifts, and it's most visible at the dark end where 51 sits where 95 should be. Dropping in a lookup of those six values would make the swatches match what people actually see when they paste the code. Handy tool though, the live preview box is the part that sells it.