How to Show Colored Text in Terminal?
Published: 2020-03-05 07:32:27

---
title: How to Show Colored Text in Terminal?
published: true
date: 2020-03-03 00:00:00 UTC
tags: 
canonical_url: https://jagascript.com/how-to-show-colored-text-terminal/
---

* * *

 ![](https://jagascript.com/00ca0ef17e3778df5ff28eecec8f619c/chalk.svg)

There are many things that we see and use every day but rarely we stop and think “how does it work?”, other times we ask ourselves that question but dismiss it because we suppose that the answer is probably super complicated.

This was the case for me about wondering how terminals show different colors, in my mind, it has always been something extremely complicated until I realized it’s quite simple and easy.

For years I’ve been using tools that show colored output and from time to time I used them too, always relying on libraries such a [chalk](https://www.npmjs.com/package/chalk) in Node.js

This until one day, I wanted to print some errors messages in red in a simple script and wanted to avoid using a library for such a simple case, that day I understand the basics of colors and another formatting in terminal output

all required is to print some special sequence of characters called _ANSI escape_ and the text after that will have the specific color or background or text style

these are standardized and interpreted by almost any terminal emulator

for example the Espace code `\x1b[32m` will start printing in _green_ while `\x1b[0m` is the reset Espace and will reset the next text to normal

try to print this in you terminal

```
echo "I'm normal \x1b[32m I will be green \x1b[47m I will have white background \x1b[4m I will be underscored \x1b[0m, not I'm back to normal"
```

this will be the result[![echo](https://jagascript.com/static/87b093efde9b37390d450251f1e3a496/fcda8/echo.png "echo")](/static/87b093efde9b37390d450251f1e3a496/d9ed5/echo.png)

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#how-can-i-do-it-in-my-programming-language)How can I do it in my programming language?

as long the output is interpreted by an ANSI compatible terminal you only have to print the escape code, for example, the above command can be used as a string in `console.log`

```
console.log("I'm normal \x1b[32m I will be gre
en \x1b[47m I will have white background \x1b[4m
I will be undescored \x1b[0m not I'm back to norm
al")
```

These are some other cool escape codes you can try

Have fun!

```
Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"
```

* * *

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#some-other-cool-colored-and-formatted-text)Some other cool colored and formatted text

[![man](https://jagascript.com/static/581cac2699ffcf4238315ad752aa7bdf/fcda8/man.png "man")](/static/581cac2699ffcf4238315ad752aa7bdf/07a9c/man.png)output of `man` command

![gatsby](https://jagascript.com/static/e40ffe31c1e4a5ff36c236beb26472b9/fcda8/gatsby.png "gatsby")part of [GatsbyJS](https://www.gatsbyjs.org/) build script