Console log with styles

Console messages in the browser console can be stylised to better indicate their context and meaning of the message.

console.log('%c Test message', 'background: #222; color: #bada55');

Test message



console.log('%c Test message', 'background: #222; color: #FDD179; padding: 6px');
console.log('%c Test message', 'background: #222; color: #F6CFD7; padding: 6px');
console.log('%c Test message', 'background: #222; color: #FAF6EC; padding: 6px');
console.log('%c Test message', 'background: #222; color: #B9D9EB; padding: 6px');

Test message Test message Test message Test message



These will not work in a terminal, but escape sequences can be used:

  • Text color
    • black: \033[30m “example”
    • red: \033[31m “example”
    • green: \033[32m “example”
    • yellow: \033[33m “example”
    • blue: \033[34m “example”
    • magenta: \033[35m “example”
    • cyan: \033[36m “example”
    • white: \033[37m “example”
  • Background color:
    • blackBg: \033[40m “example”
    • redBg: \033[41m “example”
    • greenBg: \033[42m “example”
    • yellowBg: \033[43m “example”
    • blueBg: \033[44m “example”
    • magentaBg: \033[45m “example”
    • cyanBg: \033[46m “example”
    • whiteBg: \033[47m “example”
  • reset: \033[0m
console.log('\033[31m Red');
console.log('\033[0m Reset');
console.log('\033[41m Black text with red background');



One can also use emojis to give context for the message:

console.log('📕: example');
console.log('📙: example');
console.log('📗: example');
console.log('📘: example');
console.log('📓: example');
console.log('📔: example');



Reference: