Skip to content

Instantly share code, notes, and snippets.

@kkrypt0nn
Last active October 31, 2024 21:33
Show Gist options
  • Save kkrypt0nn/a02506f3712ff2d1c8ca7c9e0aed7c06 to your computer and use it in GitHub Desktop.
Save kkrypt0nn/a02506f3712ff2d1c8ca7c9e0aed7c06 to your computer and use it in GitHub Desktop.
A guide to ANSI on Discord

A guide to ANSI on Discord

Discord is now slowly rolling out the ability to send colored messages within code blocks. It uses the ANSI color codes, so if you've tried to print colored text in your terminal or console with Python or other languages then it will be easy for you.

Quick Explanation

To be able to send a colored text, you need to use the ansi language for your code block and provide a prefix of this format before writing your text:

\u001b[{format};{color}m

Important

\u001b is the unicode escape for ESCAPE/ESC, meant to be used in the source of your bot (see http://www.unicode-symbol.com/u/001B.html). If you wish to send colored text without using your bot you need to copy the character from the website.

After you've written this, you can now type the text you wish to color. If you want to reset the color back to normal, then you need to use the \u001b[0m prefix again.

Formats

Here is the list of values you can use to replace {format}

  • 0: Normal
  • 1: Bold
  • 4: Underline

Colors

Here is the list of values you can use to replace {color}:

Text Colors

  • 30: Gray
  • 31: Red
  • 32: Green
  • 33: Yellow
  • 34: Blue
  • 35: Pink
  • 36: Cyan
  • 37: White

Background Colors

  • 40: Firefly dark blue
  • 41: Orange
  • 42: Marble blue
  • 43: Greyish turquoise
  • 44: Gray
  • 45: Indigo
  • 46: Light gray
  • 47: White

Example

Let's take an example, I want a bold green colored text with the firefly dark blue background. I simply use \u001b[0;40m (background color) and \u001b[1;32m (text color) as prefix. Note that the order is important, first you give the background color and then the text color.

Alternatively you can also directly combine them into a single prefix like the following: \u001b[1;40;32m and you can also use multiple values. Something like \u001b[1;40;4;32m would underline the text, make it bold, make it green and have a dark blue background.

Result:

Background and text color

Raw message used:

```ansi
\u001b[0;40m\u001b[1;32mThat's some cool formatted text right?\u001b[0m
or
\u001b[1;40;32mThat's some cool formatted text right?\u001b[0m
```

ANSI Colors Showcase

The way the colors and different formats look like on Discord is shown here

ANSI Colors

Disclaimer

Note: The change has been brought to all stable desktop clients. Since syntax highlighting on mobile is far behind, ANSI is not supported on mobile as well. Refer to this gist for other syntax highlighting methods.

ANSI Colors Showcase

This is a small gist to show how I've made the picture showcasing the different ANSI formats above.

Important

\u001b is the unicode escape for ESCAPE/ESC, meant to be used in the source of your bot (see http://www.unicode-symbol.com/u/001B.html). If you wish to send colored text without using your bot you need to copy the character from the website.


Example

\u001b[1;40;32mThat's some cool formatted text, right?

Color Names

\u001b[0;30mGray\u001b[0;0m
\u001b[0;31mRed\u001b[0;0m
\u001b[0;32mGreen\u001b[0;0m
\u001b[0;33mYellow\u001b[0;0m
\u001b[0;34mBlue\u001b[0;0m
\u001b[0;35mPink\u001b[0;0m
\u001b[0;36mCyan\u001b[0;0m
\u001b[0;37mWhite\u001b[0;0m
\u001b[0;40mFirefly dark blue background\u001b[0;0m
\u001b[0;41mOrange background\u001b[0;0m
\u001b[0;42mMarble blue background\u001b[0;0m
\u001b[0;43mGreyish turquoise background\u001b[0;0m
\u001b[0;44mGray background\u001b[0;0m
\u001b[0;45mIndigo background\u001b[0;0m
\u001b[0;46mLight gray background\u001b[0;0m
\u001b[0;47mWhite background\u001b[0;0m

Colors

\u001b[0;30mExample\u001b[0;0m \u001b[0;31mExample\u001b[0;0m \u001b[0;32mExample\u001b[0;0m \u001b[0;33mExample\u001b[0;0m \u001b[0;34mExample\u001b[0;0m \u001b[0;35mExample\u001b[0;0m \u001b[0;36mExample\u001b[0;0m \u001b[0;37mExample\u001b[0;0m

Backgrounds

\u001b[0;40mExample\u001b[0;0m \u001b[0;41mExample\u001b[0;0m \u001b[0;42mExample\u001b[0;0m \u001b[0;43mExample\u001b[0;0m \u001b[0;44mExample\u001b[0;0m \u001b[0;45mExample\u001b[0;0m \u001b[0;46mExample\u001b[0;0m \u001b[0;47mExample\u001b[0;0m

Backgrounds & Colors

\u001b[0;40;30mExample\u001b[0;0m \u001b[0;40;31mExample\u001b[0;0m \u001b[0;40;32mExample\u001b[0;0m \u001b[0;40;33mExample\u001b[0;0m \u001b[0;40;34mExample\u001b[0;0m \u001b[0;40;35mExample\u001b[0;0m \u001b[0;40;36mExample\u001b[0;0m \u001b[0;40;37mExample\u001b[0;0m
\u001b[0;41;30mExample\u001b[0;0m \u001b[0;41;31mExample\u001b[0;0m \u001b[0;41;32mExample\u001b[0;0m \u001b[0;41;33mExample\u001b[0;0m \u001b[0;41;34mExample\u001b[0;0m \u001b[0;41;35mExample\u001b[0;0m \u001b[0;41;36mExample\u001b[0;0m \u001b[0;41;37mExample\u001b[0;0m
\u001b[0;42;30mExample\u001b[0;0m \u001b[0;42;31mExample\u001b[0;0m \u001b[0;42;32mExample\u001b[0;0m \u001b[0;42;33mExample\u001b[0;0m \u001b[0;42;34mExample\u001b[0;0m \u001b[0;42;35mExample\u001b[0;0m \u001b[0;42;36mExample\u001b[0;0m \u001b[0;42;37mExample\u001b[0;0m
\u001b[0;43;30mExample\u001b[0;0m \u001b[0;43;31mExample\u001b[0;0m \u001b[0;43;32mExample\u001b[0;0m \u001b[0;43;33mExample\u001b[0;0m \u001b[0;43;34mExample\u001b[0;0m \u001b[0;43;35mExample\u001b[0;0m \u001b[0;43;36mExample\u001b[0;0m \u001b[0;43;37mExample\u001b[0;0m
\u001b[0;44;30mExample\u001b[0;0m \u001b[0;44;31mExample\u001b[0;0m \u001b[0;44;32mExample\u001b[0;0m \u001b[0;44;33mExample\u001b[0;0m \u001b[0;44;34mExample\u001b[0;0m \u001b[0;44;35mExample\u001b[0;0m \u001b[0;44;36mExample\u001b[0;0m \u001b[0;44;37mExample\u001b[0;0m
\u001b[0;45;30mExample\u001b[0;0m \u001b[0;45;31mExample\u001b[0;0m \u001b[0;45;32mExample\u001b[0;0m \u001b[0;45;33mExample\u001b[0;0m \u001b[0;45;34mExample\u001b[0;0m \u001b[0;45;35mExample\u001b[0;0m \u001b[0;45;36mExample\u001b[0;0m \u001b[0;45;37mExample\u001b[0;0m
\u001b[0;46;30mExample\u001b[0;0m \u001b[0;46;31mExample\u001b[0;0m \u001b[0;46;32mExample\u001b[0;0m \u001b[0;46;33mExample\u001b[0;0m \u001b[0;46;34mExample\u001b[0;0m \u001b[0;46;35mExample\u001b[0;0m \u001b[0;46;36mExample\u001b[0;0m \u001b[0;46;37mExample\u001b[0;0m
\u001b[0;47;30mExample\u001b[0;0m \u001b[0;47;31mExample\u001b[0;0m \u001b[0;47;32mExample\u001b[0;0m \u001b[0;47;33mExample\u001b[0;0m \u001b[0;47;34mExample\u001b[0;0m \u001b[0;47;35mExample\u001b[0;0m \u001b[0;47;36mExample\u001b[0;0m \u001b[0;47;37mExample\u001b[0;0m

Bold

\u001b[1;30mExample\u001b[0;0m \u001b[1;31mExample\u001b[0;0m \u001b[1;32mExample\u001b[0;0m \u001b[1;33mExample\u001b[0;0m \u001b[1;34mExample\u001b[0;0m \u001b[1;35mExample\u001b[0;0m \u001b[1;36mExample\u001b[0;0m \u001b[1;37mExample\u001b[0;0m

Underlined

\u001b[4;30mExample\u001b[0;0m \u001b[4;31mExample\u001b[0;0m \u001b[4;32mExample\u001b[0;0m \u001b[4;33mExample\u001b[0;0m \u001b[4;34mExample\u001b[0;0m \u001b[4;35mExample\u001b[0;0m \u001b[4;36mExample\u001b[0;0m \u001b[4;37mExample\u001b[0;0m
@asportnoy
Copy link

All of the images in this gist

@Hamsterland
Copy link

I am on Canary and it does not work

@kkrypt0nn
Copy link
Author

kkrypt0nn commented Apr 26, 2022

I am on Canary and it does not work

Make sure you copy paste the character correctly from the website when using it without a bot.

Here is the website again http://www.unicode-symbol.com/u/001B.html

@artshade
Copy link

artshade commented May 2, 2022

I am on Canary and it does not work

As @kkrypt0nn mentioned:

Note the very first character which may not be visible or represent relatively ambiguous visuals in certain circumstances (e.g. unsupported/custom font/charset). It may represent a rectangle:
...
...
Perhaps it's worth to mentioned that some try experimenting with an HTML (&#x1B) or Unicode (\u001b) encoded character reference instead of the actual "raw" character, though so far it's noticed that Discord processes messages with the latter only.

Source: https://stackoverflow.com/a/72087277/5113030

@hdeviscute
Copy link

You can combine bold with underlined too, just put the numbers together
Example : 14 = Underlined Bold

@undefynedd
Copy link

This works nicely with the Block Elements in Unicode!

@koopthekoopa
Copy link

works for me. that's a really nice feature they added :)

@artshade
Copy link

artshade commented May 22, 2022

It's worth to mention that it may not work on certain Discord general mobile clients (e.g. Android), as of today at least (client/app: 126012 (stable)):
20220522_162618_nJNWs

@yoonyeonkeum
Copy link

@MegaCobblepot83
Copy link

Copy here: �[0;0m
image

@C-Ezra-M
Copy link

C-Ezra-M commented Feb 3, 2023

Letting you know that this does not support color codes within the 90..97 and 100..107 ranges.

@WlodekM
Copy link

WlodekM commented Mar 14, 2023

image
It wont work for me!

@Delitel-WEB
Copy link

image It wont work for me!

It doesn't work for me either

@kkrypt0nn
Copy link
Author

kkrypt0nn commented Mar 14, 2023

@WlodekM @Delitel-WEB Read carefully:

\u001b is the unicode escape for ESCAPE/ESC, meant to be used in the source of your bot (see http://www.unicode-symbol.com/u/001B.html). If you wish to send colored text without using your bot you need to copy the character from the website.


Copy here: �[0;0m image

@Delitel-WEB
Copy link

@WlodekM @Delitel-WEB Read carefully:

\u001b is the unicode escape for ESCAPE/ESC, meant to be used in the source of your bot (see http://www.unicode-symbol.com/u/001B.html). If you wish to send colored text without using your bot you need to copy the character from the website.

Copy here: �[0;0m image

Sorry, I didn't notice, thanks.

@Yarlond
Copy link

Yarlond commented Mar 15, 2023

Hi! The color message looks impressive. But his field is too big.
502
Is it possible to use colored text but not enlarge the message field?
501

@revelcw
Copy link

revelcw commented Mar 16, 2023

Hi! The color message looks impressive. But his field is too big. 502 Is it possible to use colored text but not enlarge the message field? 501

It looks like the bottom code block is an inline code block (`like this`), which has no formatting. So no. The only way to do the colored text is with syntax highlighting, which is only possible via the

```ansi
```

multi line code blocks

@aiko-chan-ai
Copy link

https://www.npmjs.com/package/discord-bettermarkdown
i have created a simple library for nodejs to use it :3

@revelcw
Copy link

revelcw commented Mar 27, 2023

https://www.npmjs.com/package/discord-bettermarkdown i have created a simple library for nodejs to use it :3

Not the string proto 😭😭😭

@PauliusV0
Copy link

Completely doesn't work
image
image

@kkrypt0nn
Copy link
Author

kkrypt0nn commented May 6, 2023

Completely doesn't work

Can confirm it completely works - that's what happens when you use BetterDiscord, or similar, with plugins that alter the default behaviour of code blocks or syntax highlighting 🙃
image
image

Copy link

ghost commented Jul 13, 2023

Thanks to Clyde for pointing that out, you can clear any effects (bold/underline, fg color, bg color) by using 0.

@mgundle302
Copy link

The background of "red" is more of an orange color. How do we get an actual "Red" color or a "Bright Green" color in the background?

@n01-op
Copy link

n01-op commented Aug 15, 2023

what are the colours in the #ffffff format?
want to create roles on discord with the same colours

@luigge
Copy link

luigge commented Nov 3, 2023

apparently you can also use the escape code number 5 which is supposed to make the text blink and uncer certain circunstances when you hover the mouse over the text it changes the background, I haven't figured out exactly how it works also you can input multiple codes into one for example

�[0;32;40m where 0 is the code to clear the format, then comes the text color then the background color all separated by semicolons

@imtumbleweed
Copy link

imtumbleweed commented May 25, 2024

i hope discord devs add support for color in regular chat without having to use code blocks. thanks for this page, it was used as a reference in this article about using color in text on discord which also has a link to the youtube tutorial that has 58K views! clearly, there is so much demand for this feature, discord should just add it out of the box.

@GAMINGCHATS
Copy link

GAMINGCHATS commented Jul 21, 2024

I noticed in the 2nd example

\u001b[1;40;32mThat's some cool formatted text right?\u001b[0m

That the order doesn't matter at all.

@prehistoriccraftman
Copy link

what you called "yellow" is called ocher or gold, in a normal world. Yellow is yellow, like a mature lemon.

@kkrypt0nn
Copy link
Author

what you called "yellow" is called ocher or gold, in a normal world. Yellow is yellow, like a mature lemon.

image

https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

The other colors have custom names because they're not really following ANSI.

@NathanSnail
Copy link

In case someone wants the hex codes
foreground 30: #4e5058
foreground 31: #dc322f
foreground 32: #859900
foreground 33: #b58900
foreground 34: #268bd2
foreground 35: #d33682
foreground 36: #2aa198
foreground 37: #ffffff

background 40: #002b36
background 41: #cb4b16
background 42: #586e75
background 43: #657b83
background 44: #839496
background 45: #6c71c4
background 46: #93a1a1
background 47: #fdf6e3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment