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

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:

i  am cyan

Changing Font Color In Browser:

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

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.

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.


text color in library

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


npm package bg color

You can choose different text writing styles too like,


style in npm pcg

Some other keywords you can use while customizing.


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.

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,

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

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

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



Syntax font-weight: bold

font weight


Syntax font-varitan: small-caps

font variant


Syntax text-decoration: overline



Syntax text-transform: uppercase

text transform


Syntax line-height: 3

line height


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

text shadow

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorofobic.