Colors in JavaScript Console

Colors in JavaScript console

In Chrome & Firefox (+31) you can add CSS in console.log messages:

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

How to change node.js's console font color?

Below you can find colors reference of text to command when running node.js application:

console.log('\x1b[36m%s\x1b[0m', 'I am cyan');  //cyan
console.log('\x1b[33m%s\x1b[0m', stringToMakeYellow);  //yellow

Note %s is where in the string (the second argument) gets injected. \x1b[0m resets the terminal color so it doesn't continue to be the chosen color anymore after this point.

Colors reference

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"

EDIT:

For example, \x1b[31m is an escape sequence that will be intercepted by your terminal and instructs it to switch to the red color. In fact, \x1b is the code for the non-printable control character escape. Escape sequences dealing only with colors and styles are also known as ANSI escape code and are standardized, so therefore they (should) work on any platform.

Wikipedia has a nice comparison of how different terminals display colors
https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

How to apply colors to console.log when using multiple arguments?

You add text in first argument after %c using template literals

var text = "Hello World";var style = "background: #222; color: #bada55";console.log(`%c${text}`, style);

How can I get more colors for node.js console

You can use chalk for this:

First, make sure that you enable Truecolor for chalk, so that you can use all the colors you want to use:

const chalk = require("chalk"),
      ctx = new chalk.constructor({level: 3}); // 3 for Truecolor: https://github.com/chalk/chalk#chalklevel

After that you can use the Extended Colors from CSS, like Orange, Purple, Pink and Brown:

console.log(ctx.keyword('orange')('Orange!'))
console.log(ctx.keyword('purple')('Purple!'))
console.log(ctx.keyword('pink')('Pink!'))
console.log(ctx.keyword('brown')('Brown '))

Running that in a console that also supports Truecolor, results in this:

You can also specify an RGB string with the rgb() function:

console.log(ctx.rgb(255, 136, 0)('Orange!'))

Console Log Color Meaning

Black indicates a string, blue indicates a number:

Element attributes are always strings; .attr returns a string. You need to convert it to a number:

currentImageIndex = Number(currentImage.attr('data-index'));

How to console.log a big and colored text in the console

console.log("%c" + "Hold Up!", "color: #7289DA; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;");

Regards

Change text color in console

I suppose you could overwrite those console functions with your own, with your desired color:

// Save a reference to the original functions
const { info, error } = console;
console.info = (arg) => {
  info.call(console, `\x1b[33m${arg}\x1b[0m`);
};
console.error = (arg) => {
  info.call(console, `\x1b[31m${arg}\x1b[0m`);
};

And so on. Use whatever colors you want.

---

Related Topics