Your Name Color in Chat — History and How It Works

On the left is the old legacy chat, and on the right is TextChatService.

image

Roblox has introduced the new TextChatService as the default chat interface in new experiences, gradually phasing out the legacy chat version (formerly known as the “Lua Chat System”).

One minor change with the new chat is that for the default name colors every player has, the “Bright violet” BrickColor was changed to “Alder” as you can see above with the Player2 name.

Chat name colors are a curiously unexamined remnant of classic Roblox which remains in almost every experience on the platform today.

I’ve noticed many people are under the impression that these name colors are picked randomly when you change your username. My friend told me he had spent over 10,000 Robux changing his name because he wanted the right color.

The color is not decided randomly, and it is also not selected & stored on Roblox servers when you change your name. It’s easiest to think about it like a Minecraft world seed. It seems random, and that’s because it’s designed to feel that way. However, the world you spawn in will always be the same when you give it the same seed. It’s an algorithm.

The same is true of your Roblox chat name color. Your username is the input (the ‘seed’), and the color is the output. This name color algorithm is run every time you enter a chat message, not when you change your name. As long as the username is the same, the name color will not change.

You can check the color of any username, even before someone has taken it. Here’s an example experience for just that:

Someone should create browsing this thread made a web app to do this.


If you try looking up how Roblox decides your name color, you will always stumble upon this excerpt of code:

The nitpicker inside of me always deletes the color_offset variable and its reference, because it’s zero and so it does nothing.

The important part of this code is the function GetNameValue. This is where it picks the ‘random’ number associated with the name, taking into account the internally assigned values associated with the individual characters used (whether there’s a letter P or a letter R, for example). It also considers the number of characters in the name. GetNameValue does some math using these two types of measurements on the name, and then spits out a new number. The function ComputeNameColor then uses that ‘random’ number to pick from a list of eight colors.


That code has never changed since Roblox started using it in 2006, but some of the colors themselves have changed:

As a side note, I put Player7 and Player8 at the start because that shows the colors in the same order as they appear in the list from the code above

The RGB color is the only type of color you ever see in the chat, but the BrickColor value seems relevant enough to include in the graphic because that’s how they were decided originally and also how Alder was decided on recently.

You can see evidence of those darker red and blue name colors in this very old video @ 2:05:

image

There’s the dark green name color in this even older video @ 6:19:

image

These colors were used as late as 2014 (6:53):

image

but sometime in 2015 the dark green, blue and red were changed (9:52):

image


I modified the code excerpt from above so it has these different iterations of colors. You can use it here:

How to use:

  1. Require the module. It will return a function.
  2. Call the function with a name (string) input argument to get that name’s color.
    • You can add a second argument to specify the version or era that you want for the chat name colors
      • As of 2023, there are three total versions: 1, 2, and 3; from earliest to latest (2006, 2015, 2023)
      • If no second argument is provided, the latest version is used

Here’s a barebones example usage:

local getNameColor = require(game.ReplicatedStorage:WaitForChild("GetNameColor"))
workspace.Baseplate.Color = getNameColor("GFink")
workspace.Baseplate.Color = getNameColor("GFink", 1)

Here are the different versions in action (in order 1 → 2 → 3), tested on a bunch of bricks with the input usernames labeled:


Hope this bit of trivia was interesting! Reply to this post if you notice mistakes, have suggestions, or want to provide additional information.
96 Likes

A few weeks ago I browsed through Roblox’s chat scripts to see what the code for color generating is and I was surprised to find it. Even more surprised to see a resource on this very topic posted a few years ago (?) but this is even more interesting to read. What’s left is to tell us how Roblox syncs the chat color to your naked avatar pants and shirt color. Those surely are existing clothing IDs, but how do they sync?

8 Likes

Hmm, I didn’t think the avatar clothing was something that always stays the same. I suppose I have always seen mine as orange though:

image

My name color is blue, however. If it’s permanent, then it’s not tied to your name color. Sounds like something worth making a thread about, though!

14 Likes

Really? Because when I changed my name a couple times over the past few years, I’ve had tan, blue, and orange colours.

3 Likes

While it’s true on a technical level, I can understand how the way I put it is confusing.

That is to say, the change in color is not something Roblox stores on their servers. It’s just an emergent effect of having a different name. I’ve edited the OP to clarify that.

8 Likes

ahem You’re welcome :stuck_out_tongue:

(This is my GitHub account for those wondering)

14 Likes

EPIC

I have no web dev experience but that looks like it was fun :)

edit: minor nitpick, the mobile layout could be improved since the sides are cut off

3 Likes

Ahw was a few minutes too late then haha

Just hacked together this little tool, nothing too crazy but it works:
https://bloxtech.tech/tools

4 Likes

Love this writeup :smiley: Hopping in here with some lore - the color change from dark to light purple was to help get better color contrast and match the “brightness” of the other colors while still keeping the color someone might have become attached to about the same. Here’s an excerpt from a doc i wrote about this, maybe it can help inform good color choices if you’re using TextChatMessageProperties to change the colors of messages or senders.

The pre defined colors are as follows

local NAME_COLORS =
{
    Color3.new(253/255, 41/255, 67/255), -- BrickColor.new("Bright red").Color,
    Color3.new(1/255, 162/255, 255/255), -- BrickColor.new("Bright blue").Color,
    Color3.new(2/255, 184/255, 87/255), -- BrickColor.new("Earth green").Color,
    BrickColor.new("Bright violet").Color,
    BrickColor.new("Bright orange").Color,
    BrickColor.new("Bright yellow").Color,
    BrickColor.new("Light reddish violet").Color,
    BrickColor.new("Brick yellow").Color,
}

Below we list the RGB colors, along with their hex values and the color contrast on different background colors.

The background of the chat elements is a fully black (RGB 0, 0, 0) frame with a 0.6 transparency (0.4 opacity) on hover.

To get the equivalent RGB color for a partially opaque frame on top of another opaque frame, we use the following formula

  • Y = 255 - P * (255 - X)
    • Y is the new RGB value
    • P is the opacity (0…1)
    • X is the original RGB value

So for a white world background (i.e. snow), the rgb value would be

  • (255 - 0.4 * (255 - 0)) → 153, 153, 153
    • #999999

For a black world background (i.e. nighttime), the rgb value would be

  • (255 - 0.4 * (255 - 255)) → 255, 255, 255
    • #000000

Considering there are a wide variety of colors a user could be viewing text against, for the case of accessibility we want to consider an active chat window on a variety of backgrounds.

Another thing to consider is that all of the text in in-game chat has a 0.75 transparency black text stroke. This can helpful when viewing light text against a light background (entirely necessary in the case of white on white), but sometimes it can be a bit overwhelming to look at on small text. It is not beneficial at all with a dark text color (it leads to something looking blurry, instead of outlined. This is most easily visible with the darkest text color, Bright Violet. Note that the text kerning doesn’t change with the addition of a text stroke.

Here is an example of different ways you could see these colors, with both active and inactive windows shown on different backgrounds


With a brighter color, this becomes more readable


17 Likes

Thank you for some additional background on this change! The equation is an interesting idea to introduce some balancing to the color.

So if the opacity is 0.4, and we run this formula on the bright violet RGB values, we go from 107, 50, 124 to 196, 173, 203:

image

The closest BrickColor to that is “Light purple”:

image

image

The BrickColor looks way pinker and would be too close to the “Light reddish violet” color that’s already in use for the chat name colors.

As a side note, this particular BrickColor is not displayed on the color wheel when I open up that menu:

image

There are 208 BrickColors which exist in total, but only about 135 visible on the color wheel:

You can see that if the current BrickColor is on the color wheel, it has a selection indicator:

image

The only reason BrickColors are important here is because the “Alder” BrickColor was the one finally decided upon, and we know this because the RGB value is an exact match to that BrickColor. There’s ~16.8 million possible RGB color combinations, and just over 130 selectable BrickColors, so it would be an astounding coincidence if it wasn’t picked from that color wheel.

Interesting stuff! I suppose the reason that color was picked is because the brightened versions of the “Bright violet” BrickColor were too close to the existing “Light reddish violet” which is already used as a name color.

Edit: appears Alder was right:

Can be found in AppData\Local\Roblox\Versions\[version]\ExtraContent\LuaPackages\Packages\_Index\ExperienceChat-573fffbe-e673569d\ExperienceChat\GetNameColor.lua

4 Likes