Make Console.log() output colorful and stylish in browser & node

Paul Shan Sun Sep 03 2017

While writing a code once i felt the need of console.log( ) outputs with color variations. I wanted the errors to come up in red and warnings in Yellow. Is it possible?
Well definitely it is. And not only colors, you can also specify text size, background color etc.
Styling can be done in both node and browser with a little bit of code modification. In this article i will discuss about both of them in details. But if you aren’t looking to dive that deep i am also providing an cheat sheet.

Changing Font Color In Node:

console.log('\x1b[36m%s\x1b[34m%s\x1b[0m', 'I am cyan','i am blue');
i  am cyan

Changing Font Color In Browser:

 console.log("%cI am red %cI am green", "color: red", "color: green");
first brorser example

Colorful & stylish console.log() in Node.js

You can customize the node’s console.log() output in two different ways. One option is, using the native code, which can be a bit less readable; another is simply using an npm package which can reduce your pain a bit.

The native way

console.log("\x1b[33m%s\x1b[0m" ,"I Am Using Yellow");
console.log("\x1b[44m%s\x1b[0m" ,"Background Color Is Blue");

Simple use an escape sequence \x1b followed by a style code [33m and then your string argument.
It is recommended to use \x1b[0m to reset the terminal color else the terminal will take the last given color value. Below are the list of codes you can use to style your node console.

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"
without npm package

Using an npm package

By using colors package one can easily customize the styles in node console. Unlike the native way, using colors is pretty simple and all you need to do is to write some human readable code. Below are the examples.

Text Colors
You can use 10 different text colors mentioned below.


var colors = require('colors');

console.log('i am black'.black);
console.log('i am red'.red);
console.log('i am green'.green);
console.log('i am black'.yellow);
console.log('i am blue'.blue);
console.log('i am magenta'.magenta);
console.log('i am cyan'.cyan);
console.log('i am white'.white);
console.log('i am gray'.gray);
console.log('i am grey'.grey);
text color in library

Background Color
There are 8 background color available in this library.


var colors = require('colors');

console.log('i am black'.bgBlack);
console.log('i am red'.bgRed);
console.log('i am green'.bgGreen);
console.log('i am black'.bgYellow);
console.log('i am blue'.bgBlue);
console.log('i am magenta'.bgMagenta);
console.log('i am cyan'.bgCyan);
console.log('i am white'.bgWhite);
npm package bg color

You can choose different text writing styles too like,


var colors = require('colors');

console.log('This is bold'.bold);
console.log('This is dim'.dim);
console.log('This is italic'.italic);
console.log('This is underline'.underline);
console.log('This is inverse'.inverse);
console.log('This is hidden'.hidden);
style in npm pcg

Some other keywords you can use while customizing.


var colors = require('colors');

console.log('This is rainbow'.rainbow);
console.log('This is zebra'.zebra);
console.log('This is america'.america);
console.log('This is trap'.trap);
console.log('This is random'.random);
console.log('This is random2'.random);
console.log('This is random3'.random);
extra npm pcg style

Remember the output style of random can’t be assumed.

Style & Color in browser’s Console.log output

You can use more variations in console.log() if you are in the browser. You can simply use CSS properties and modify accordingly.

 console.log("%cString1 %cString2","CSS For String1", "CSS For String2");

For every different string (separated by %c), there will be some CSS property quoted & defined sequentially.

Hope a simple example will clear all your doubt,

 console.log("%cThis is a %cConsole.log", "background:black ; color: white", "color: red; font-size:25px");
consol.log in browser

You can use various CSS properties to customize your console output. Some of them mentioned below:

* font-family*

Syntax: font-family: arial

 console.log("%c This Is Line One ", "font-family: Times New Roman,Times, serif");

You should provide more than one font-family, if the browser doesn’t support the first font it will try the next one.

font family


Syntax font-size: 10px

 console.log("%cThis Is Line One ", "font-size:30px");o

You can use em unit too. For an example, 40px= (40/16)= 2.5em. Or even percentage (%) is fine. Just like normal css.

font size


Syntax font-style: italic

 console.log("%cThis Is Line One ", "font-style: italic");


Syntax font-weight: bold

 console.log("%cThis Is Line One ", "font-weight: bold");
font weight


Syntax font-varitan: small-caps

 console.log("%cThis Is Line One ", "font-variant: small-caps");
font variant


Syntax text-decoration: overline

console.log("%cThis is Overline %cThis is line through %c This is underline", "color: red; text-decoration: overline", "color: blue; text-decoration: line-through", "color:green; text-decoration: underline");


Syntax text-transform: uppercase

 console.log("%cuppercase %cLOWERCASE %cThis is capitalized", "color: red; text-transform: uppercase", "color: green; text-transform: lowercase", "color: blue; text-transform: capitalize");
text transform


Syntax line-height: 3

 console.log("%cThis Is Line One \n %c This Is Line Two \n %c This Is Line Three", "line-height: 0.8;", "line-height: 1.7;", "line-height: 3;")
line height


 console.log("%cThis Is Line One ", "text-shadow: 3px 2px red;");

Here 3px is the position of the horizontal shadow and 2px is the position of the vertical shadow.

text shadow

Written By

Paul Shan


  • E


  • R

    React JS

  • C


    Cascading style sheets only

  • S


    Search engine optimization

  • E


  • C


    wordpress, drupal, jumla, magento and more

Show All


advanced js
Web development
vue css
social share buttons
react datetime picker
jquery chart library
instant search using vue
event loop
best practices

Show All