If you’ve ever done any programming in JavaScript, or other command line type interfaces, you’ve likely printed text to a console at some point. By default, the output you see is just plain old black text on a white background, appearing all at once.

Thankfully there is another way! With something known as ANSI escape sequences (or codes), we have more control on what the output looks like. ANSI escape sequences are a set of standardized codes that allow a programmer to style the output in console and text based applications. Whether providing needed functionality, like differentiating the categories of output with color, or just adding some flair, ANSI sequences are easy and fun to include in your programs.

ANSI Escape Code

All ANSI sequences must start with an escape code in order for the computer to know that the code that follows is an ANSI code. There are a few different escape codes, but we’ll be using one throughout this tutorial that is compatible in all of the popular languages like JavaScript, Python, and Java – \u001b.

For example, here is a simple program that prints text in a few different colors. We’ll learn more about the color codes in the next section, but notice that each of the stylized lines start with the escape code.

See what we’re talking about? We just added basic colors, and the output is so much more fun! If you take a look at the above example, you’ll notice that the structure for the ANSI escape sequence is: "escape code + style code + output text".

Let’s explore this structure with more colors!

ANSI Colors

There are many different colors that you can use with the ANSI styling. The original 8 colors have the codes 30 - 37 for the text and 40 - 47 for the background.

Text Color

Here is the code from the above example that styled the text as red with the default white background:

console.log("\u001b[31mI'm red!");

You’ll notice that the ANSI color sequence, following the escape code, is a square bracket, the color code, and an “m”. We could also store this in a variable for easier readability:

const RED = "\u001b[31m";
const BLUE = "\u001b[34m";
console.log(RED + "I'm red!");
console.log(BLUE + "Or am I blue?");

The original 8 text colors codes are:

• Black: 30
• Red: 31
• Green: 32
• Yellow: 33
• Blue: 34
• Magenta: 35
• Cyan: 36
• White: 37

Background Color

You can add a background color by sandwiching a ;<background code> in between the text color and the “m”. The code below would print text that is white on a cyan background:

const WHITE_CYAN = "\u001b[37;46m";
console.log(WHITE_CYAN + "Hi there!");

The original 8 background color codes are:

• Background Black: 40
• Background Red: 41
• Background Green: 42
• Background Yellow: 43
• Background Blue: 44
• Background Magenta: 45
• Background Cyan: 46
• Background White: 47

Additional Colors

Lastly, some applications will support an additional 256 color codes and/or RGB codes as well. To use the 256 color codes, your sequence will look like: "\u001b[38;5;<color code>m + output text" for text color and "\u001b[48;5;<color code>m + output text" for background color. Wikipedia has a nice chart of the 256 color codes (open the image in a new tab to see the larger codes):

To use RGB codes, it follows a similar format as above: "\u001b[38;2;<R code>;<G code>;<B code>m + output text" for text color and "\u001b[48;2;<R code>;<G code>;<B code> + output text" for background color.

Whew! So many colors! Check out the below example to see these in action. Try changing up the color codes to see a variety of outputs.

Reseting Your Color

Depending on your interface, you will likely need to reset the color of your text so that all remaining text is colored as well. To do this, you use the same structure, using an ANSI code of [0m, as in the following:

const WHITE_CYAN = "\u001b[37;46m";
const RESET = "\u001b[0m";
console.log(WHITE_CYAN + "I'm am colorful, " + RESET + " but I am back to normal");

NOTE: In the CodeHS JavaScript editor, you do not need to reset the style between multiple printed lines (it resets automatically), but in the Python editor, for example, you would need to do so.

JavaScript:

const WHITE_CYAN = "\u001b[37;46m";
console.log(WHITE_CYAN + "I am colorful");

// Does not have the same color as above, even with no manual reset
console.log("But I am not");  

Python:

WHITE_CYAN = "\u001b[37;46m"
print(WHITE_CYAN + "I am colorful")

# Has the same color as above, since it was not manually reset
print("And so am I") 

Other ANSI Decorations

You can also style text by making it bold, italicized, or underlined. Here are the ANSI sequences, with the same escape code:

• Bold: \u001b[1m
• Italicized: \u001b[3m
• Underline: \u001b[4m

NOTE: These will not show up in the CodeHS JavaScript editor (they will in the Python editor), but if you open your browser’s console, you will see the styling there.

With this code:

const BOLD = "\u001b[1m";
const ITALICIZE = "\u001b[3m";
const UNDERLINE = "\u001b[4m";

console.log(BOLD + "I'm bold.");
console.log(ITALICIZE + "I'm slanty.");
console.log(UNDERLINE + "I have a line under me.");

You’ll see this in your browser’s console: