Setup an object with the styles you’d like to use. Here’s one using the Ocean Next Colors:

var styles = {
    "gray": "font-weight: bold; color: #1B2B34;",
    "red": "font-weight: bold; color: #D8DEE9;",
    "red": "font-weight: bold; color: #EC5f67;",
    "orange": "font-weight: bold; color: #F99157;",
    "yellow": "font-weight: bold; color: #FAC863;",
    "green": "font-weight: bold; color: #99C794;",
    "teal": "font-weight: bold; color: #5FB3B3;",
    "blue": "font-weight: bold; color: #6699CC;",
    "purple": "font-weight: bold; color: #C594C5;",
    "brown": "font-weight: bold; color: #AB7967;"
}

Then just apply the styling to the console.log() by using the %c flag. Here’s how:

console.log('%cBye Felicia', colors.gray);

And for multiple colors on one line just add more %c flags with a corresponding style like so :

console.log('%cGray %cRed %cOrange %cYellow %cTeal %cBlue %cPurple %cBrown', colors.gray, colors.red, colors.orange, colors.yellow, colors.teal, colors.blue, colors.purple, colors.brown);

Maybe you want to have something partially styled then reset the rest to the default within the same log…

console.log('%cWarning: %cThe cake is a lie', colors.red, '');

Here’s a pen with some console color action:

See the Pen Colorful Console Logs by J Scott Smith (@jscottsmith) on CodePen.