Coloring

In discord, customization of colors and specific accents is allowed in a limited set of places: Embed accents and ANSI Blocks.

Coloring embeds

Discord requires us to pass a base 10 number when trying to modify any of these, but that’s pretty unintuitive given the RGB standard. The proposal is instead to write the number in base 16 and prepend each number with a simple 0x, as shown below.

const color = "#ad9ee7";
const color = 0xad9ee7; // or just 11378407

Alternatively, you could write it out as a string codifying the RGB value you wish to pass.

1
export function hexColorToNumber(color: string): number {
2
  return parseInt(color.replace("#", ""), 16);
3
}
4

5
const color = hexColorToNumber("#ad9ee7"); // 11378407

Coloring messages

Coloring messages in discord can be achieved by using ANSI Code Blocks, for ease of use we recommend using a coloring library, but, if you want a complete tutorial on using ANSI code we cover this further down.

Using a library (Tasai)

There are multiple libraries to help with this process, the ones we recommend are either Tasai or ansi-colors, we will be using tasai on our examples.

1
import { t } from "tasai";
2

11 collapsed lines
3
import {
4
  createClient,
5
  Intents
6
} from "lilybird";
7

8
await createClient({
9
  token: process.env.TOKEN,
10
  intents: [Intents.GUILDS],
11
  listeners: {
12
    messageCreate: async (client, message) => {
13
      await client.rest.createMessage(message.channel_id, {
14
        content: "Hii~",
15
        content: `\`\`\`ansi\n${t.red.colorize("Hii~")}\n\`\`\``,
5 collapsed lines
16
        message_reference: { message_id: message.id }
17
      });
18
    }
19
  }
20
});

Making your own helper

Writing your own ANSI helper is rather easy, but, for the sake of simplification we are only going to be going over ESC[n m for SGR mode, because its pretty much the only mode discord supports.

We will also be using the following SGR codes:

30 through 37 for foreground colors.
40 through 47 for background colors.
39 and 49 as reset codes for said colors.

function colorizeWith4Bit(string: string, code: number): string {
  // We do this check first to avoid duplication
  const isBackgroundColor = code >= 40 && code <= 47;

  // Is the code a valid 4bit ascii color
  if (!(code >= 30 && code <= 37) || !isBackgroundColor) return;

  /*
    The `ESC` in ANSI represents byte 27,
    there are a few ways to write this like `\e`, `\033`, `\u001b` and `\x1b`
    we chose `x1b` because it is the most portable among them.
  */
  return `\x1B[${code}m${string}\x1B[${isBackgroundColor ? 49 : 39}m`;
}

const redText = colorizeWith4Bit("Hii~", 31);