How to Add Colors to JavaScript Console Outputs ?

To Add Colors to JavaScript Console Outputs, we have multiple approaches In this article, we will learn to Add colors to Javascript console outputs.

Below are the approaches used to add Colors to JavaScript Console Outputs:

Approach 1: Using %C

The %c placeholder is a special syntax that enables the application of CSS styling to specified sections of the console output. It allows programmers to format console messages according to CSS principles,

Syntax:

console.log("%c GeeksforGeeks", "color:green;");

Example: In this example, we are using the above-explained approach.

Javascript

let outputColor = "color:green; font-size:20px;"
console.log("%c GeeksforGeeks", outputColor);
console.log("%c A computer Science Portal", outputColor);

Output:

Approach 2: Using ANSI escape code

The output color of the console can be modified via JavaScript using ANSI escape codes. Console messages can have their appearance changed to improve readability and visual distinctiveness by inserting escape sequences, such as ‘\x1b[36m%s\x1b[0m’ for Green color.

Syntax:

console.log('\x1b[36m%s\x1b[0m', 'GeeksforGeeks');

Example: In this example, we are using the above-explained approach to change our output color in the console.

Javascript

console.log('\x1b[36m%s\x1b[0m', 'GeeksforGeeks');
console.log('\x1b[36m%s\x1b[0m', 'A computer science portal')

Output: