colors in the javascript debugger console (Chrome)

Question

I noticed the output generated by this site. I don't know how they do it, but it looks nice. I was wondering how this works. How can you generate these shapes and colors. There is some kind of gradient too.

Here is a copy-past from the console output (without the colors):

◢◤◢◥◢◤◤◢◥◣◤◥◢◣◢◤◣◢◤◥◢◢◢◤◢◢◤◢◥◤◢◣◣◥◤◥◤◢◣◥◣◢◢◤◣◤◣◤◢◣◢◢◤◢◣◤◥◤◣◥◤◥◢◣◤◣◤◥◣◤◣◢◣◥◢◥◤◥◤◣ 
|▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▇█▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▃▇███▆▕▁▁▃▇████▍▕▁██▍▕▁▃▇█████████▇▃▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂██▕▁▁██▍▕██▍▕▁▁▁▁▁▁██▍▄██▕▁▁▅▃▕▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▄██▕▁▁▁██▍▕██▂▕▁▁▁▁▁▂██▕▁██▍▕▁██▂▕▁▁▂██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂▄▆██▕▁▁▁▁▁██▍▕▁██████████▕▁▁▁██▍▕▁███████▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁unconed▕▁▁▁▁▁▁ 
◥◣◤◣◥◣◢◣◤◥◤◢◤◣◥◥◢◥◢◢◤◢◣◤◤◢◤◢◣◤◢◥◢◤◥◣◥◣◥◢◥◢◥◢◣◤◥◣◢◢◥◢◤◥◢◥◤◥◤◥◤◣◢◤◢◣◤◢◣◤◥◣◢◤◤◥◤◥◣◢ 

Answer 1

I wrote Console.js https://github.com/icodeforlove/Console.js to allow us to do this a bit easier

Console.styles.register({
  brshadow: 'box-sizing: border-box; background-image: -webkit-linear-gradient(top, rgb(81, 162, 189), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0px; background-position: initial initial; background-repeat: initial initial;',
  shadow: 'box-sizing: border-box; color: rgb(68, 105, 133); background-image: -webkit-linear-gradient(top, rgb(99, 199, 231), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 3px 3px 0px, rgb(128, 190, 220) 0px 0px 20px; background-position: initial initial; background-repeat: initial initial;',
  white: 'color: white'
});

then you can just do this

console.log('◢◥◤◥◤◢◤◥◢◥◢◤◢◣◥◤◢◥◢◢◣◤◥◣◥◤◢◤◣◥◤◥◤◢◣◥◣◥◢◥◤◥◣◢◤◢◥◢◣◤◢◣◢◥◢◥◣◤◢◣◥◤◢◢◥◢◥◢◥◢◣◥◢◣◥◣◢◥◣◤'.brshadow);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▇█▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▃▇███▆'.shadow + '▕▁▁'.white + '▃▇████▍'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '▃▇█████████▇▃'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂██'.shadow + '▕▁▁'.white + '██▍▕██▍'.shadow + '▕▁▁▁▁▁▁'.white + '██▍▄██'.shadow + '▕▁▁'.white + '▅▃'.shadow + '▕▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▄██'.shadow + '▕▁▁▁'.white + '██▍▕██▂'.shadow + '▕▁▁▁▁▁'.white + '▂██'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '██▂'.shadow + '▕▁▁'.white + '▂██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂▄▆██'.shadow + '▕▁▁▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '██████████'.shadow + '▕▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '███████'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + 'unconed'.shadow + '▕▁▁▁▁▁▁'.white);
console.log('◢◣◢◢◣◢◤◥◤◥◣◢◣◣◤◢◣◢◣◢◢◥◤◥◢◥◢◥◣◥◢◤◢◥◢◣◤◣◢◤◢◤◣◢◥◢◣◥◣◢◣◥◢◣◣◤◥◢◣◥◢◤◢◣◤◣◤◣◤◢◤◣◢◣◢◣◢◤◥◤'.brshadow);

that wasnt that easy because of the way he formatted it... but any other way would have still be difficult