Introduction

JavaScript console coloring is useful when you want certain logs to stand out during debugging. In browsers, the common technique is to use %c in console.log and pass CSS as the next argument, while in Node.js the usual approach is ANSI escape codes or a helper library.

Browser Console Styling with %c

Most modern browser developer consoles support a %c token that applies CSS styles to the following part of the log message.

console.log("%cSuccess", "color: green; font-weight: bold;");

This prints the word Success with the supplied CSS style. The %c token does not color the whole console session. It styles only the matching segment of that log call.

Styling Multiple Parts of One Message

You can use more than one %c marker in the same log call:

1console.log(
2  "%cINFO%c Request completed in %c120ms",
3  "color: white; background: #1976d2; padding: 2px 4px;",
4  "",
5  "color: purple; font-weight: bold;"
6);

Each %c consumes one style argument. That makes it easy to emphasize labels, timings, or warnings inside a longer message.

A Small Helper Function

If you color logs often, wrap the pattern in a helper:

1function logStatus(label, color, message) {
2  console.log(
3    `%c${label}%c ${message}`,
4    `color: white; background: ${color}; padding: 2px 4px; border-radius: 2px;`,
5    ""
6  );
7}
8
9logStatus("API", "#2e7d32", "Fetched 42 records");
10logStatus("WARN", "#ed6c02", "Retry scheduled");

This keeps debugging output consistent and easier to scan.

Useful Browser Styles

Because the browser console uses CSS, you can do more than text color:

• 'font-weight'
• 'background'
• 'padding'
• 'border-radius'
• 'font-size'

Example:

1console.log(
2  "%cBuild Complete",
3  "color: #111; background: #ffd54f; font-size: 14px; padding: 4px 8px;"
4);

The styles should still be used sparingly. Good logs become easier to scan, while overstyled logs become noisy.

Node.js Is Different

The browser %c technique does not work the same way in a plain Node.js terminal. For Node, use ANSI escape codes directly:

console.log("\x1b[32mSuccess\x1b[0m");
console.log("\x1b[31mError\x1b[0m");

Or use a library such as chalk:

1import chalk from "chalk";
2
3console.log(chalk.green("Success"));
4console.log(chalk.red.bold("Error"));

So when someone says “colors in JavaScript console,” the correct answer depends on whether they mean a browser console or a terminal.

Good Uses for Colored Logs

Color is most helpful when it encodes a small number of stable categories:

• success
• warning
• error
• debug module labels

If every log line uses five colors, the benefit disappears quickly. Use color as a visual cue, not as decoration.

That is especially true in large front-end applications where console output is already dense. A few predictable styles usually beat a highly customized rainbow of ad hoc log formatting during real debugging sessions for most teams in practice every day.

Common Pitfalls

One common mistake is trying browser %c styling in Node.js and expecting CSS support. That is a browser console feature, not a general JavaScript language feature.

Another issue is depending on color alone for meaning. Log text should still be understandable without the styling, especially for accessibility and copied output.

A third pitfall is overusing complex styling in high-volume logs. That makes debugging harder rather than easier.

Summary

• In browser consoles, use %c plus CSS styles to color log output.
• Multiple %c tokens let you style different parts of one message.
• In Node.js, use ANSI escape codes or a library such as chalk.
• Color works best for a few consistent log categories.
• Keep the text meaningful even without styling.