Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to print colored text in the console using JavaScript?
In this article, we will learn how to add colors to the text and print them in the console window of JavaScript. In the original, all the data printed in the console is of black color no other color is reflected in the console but here we are going to add some special characters with text to make our console window look more colorful.
There are some special codes that help change in color of the output in the console window and these codes are known as ANSI escape codes. By adding these codes in the console.log() method we can see multiple colors in our output.
ANSI Color Codes
The special codes for all the colors are given as:
black = "\x1b[30m" red = "\x1b[31m" green = "\x1b[32m" yellow = "\x1b[33m" blue = "\x1b[34m" magenta = "\x1b[35m" cyan = "\x1b[36m" white = "\x1b[37m"
Syntax
To achieve the task of adding colorful texts into the console window we need to make an object first then add the key-value pairs in the object with the colors name and their code:
const color = {};
color.black = "\x1b[30m";
color.red = "\x1b[31m";
color.green = "\x1b[32m";
color.yellow = "\x1b[33m";
color.blue = "\x1b[34m";
color.magenta = "\x1b[35m";
color.cyan = "\x1b[36m";
color.white = "\x1b[37m";
for (var key in color){
console.log(color[key] + key);
}
Example: Print Color Text in the Console
In the below example we print the color text in the console. Please open the Console before clicking on the button "Colored Text".
<!DOCTYPE html>
<html>
<body>
<center>
<h1> JavaScript console colored text </h1>
<p> Please open the <b>Console</b> to see the colored text. </p>
<p> Click "Colored Text" to display colored text in the Console.</p>
<button onclick="colorFunc()">Colored Text</button>
</center>
<script>
function colorFunc() {
const color = {};
// Assigning the key: value pair to an object
color.black = "\x1b[30m";
color.red = "\x1b[31m";
color.green = "\x1b[32m";
color.yellow = "\x1b[33m";
color.blue = "\x1b[34m";
color.magenta = "\x1b[35m";
color.cyan = "\x1b[36m";
color.white = "\x1b[37m";
// To print the key-value pairs of the object
for (var key in color) {
console.log(color[key] + key);
}
}
</script>
</body>
</html>
Here you can see in the for loop we have printed the values first and then the key after that because to print the colored text you have to put the color code before the actual text.
Background Color Codes
Note: We have color codes for the text similarly we have color codes for the background text we can use them if we want the colorful background in the console window. The color codes for the background colors are given below:
bgBlack = "\x1b[40m" bgRed = "\x1b[41m" bgGreen = "\x1b[42m" bgYellow = "\x1b[43m" bgBlue = "\x1b[44m" bgMagenta = "\x1b[45m" bgCyan = "\x1b[46m" bgWhite = "\x1b[47m"
Example: Make Text Background Colored in the Console
In the below example we make the text background colored in the console. Please ensure you have opened the Console before executing the program.
<!DOCTYPE html>
<html>
<body>
<center>
<h2> JavaScript console colored text background </h2>
<p> Please open the <b>"Console"</b> to see the colored text background. </p>
<p> Click "Colored Text" to display colored text background in the Console.</p>
<button onclick="colorFunc()">Colored Text</button>
</center>
<script>
function colorFunc() {
const color = {};
// Assigning the key: value pair to an object
color.bgBlack = "\x1b[40m";
color.bgRed = "\x1b[41m";
color.bgGreen = "\x1b[42m";
color.bgYellow = "\x1b[43m";
color.bgBlue = "\x1b[44m";
color.bgMagenta = "\x1b[45m";
color.bgCyan = "\x1b[46m";
color.bgWhite = "\x1b[47m";
// To print the key-value pairs of the object
for (var key in color) {
console.log(color[key] + key);
}
}
colorFunc()
</script>
</body>
</html>
Using Reset Code
To return to default console text color after using ANSI codes, add the reset code \x1b[0m at the end:
<!DOCTYPE html>
<html>
<body>
<script>
console.log("\x1b[31m" + "This is red text" + "\x1b[0m");
console.log("This is normal text again");
</script>
</body>
</html>
Conclusion
ANSI escape codes allow you to add colored output to JavaScript console logs using special character sequences. Use text color codes (\x1b[3Xm) for colored text and background codes (\x1b[4Xm) for colored backgrounds, with \x1b[0m to reset formatting.
3K+ Views
