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.
1export function hexColorToNumber(color: string): number {2 return parseInt(color.replace("#", ""), 16);3}4
5const 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.
1import { t } from "tasai";2
11 collapsed lines
3import {4 createClient,5 Intents6} from "lilybird";7
8await 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
through37
for foreground colors.40
through47
for background colors.39
and49
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);