What color names are supported in BabylonJS and does casing matter?

Questions
, ,
1

Could someone shed some light on how BabylonJS handles color values when passed in as a string? Specifically, I’m wondering about when a color name is provided, such as “antiquewhite”. Does Babylon have its own definition of these X11 color names or does it utilize the values defined in the CSS Color Module Level 4 specification like the browser does?

From testing GUI controls, I’ve found that as long as space isn’t used, the color name seems to be case-insensitive. “AntiqueWhite”, “antiqueWhite”, “antiquewhite”, “ANTIQUEWHITE”, etc all produce the same valid color. Therefore it appears to be working the same as the CSS color names.

While I essentially have my answer, I would still appreciate getting a better understanding the methodology chosen here by Babylon to avoid false assumptions as we code. Thank you in advance!

2

By default all CSS syntax is case-insensitive. But there are exceptions :slight_smile:
More info here - html - Are property values in CSS case-sensitive? - Stack Overflow

3

I understand that the color names in CSS are indeed case-insensitive, but does BabylonJS literally use CSS when dealing with color?

4

Having a look at source code, what I could find is that the BABYLON.Color3 default colors are hardcoded HERE from line 913 to 993 but I don’t know if it’s the same which is used in the GUI (string based colors)

5

I believe for the GUI it is here - Babylon.js/packages/dev/gui/src/2D/controls/control.ts at master · BabylonJS/Babylon.js · GitHub

 this._color = value;
6

Hum yes I had seen this but it’s just the color variable assignement such as “red”, I was looking for the place actual RGB values are extracted from there

7

Thank’s for helping @labris and @Tricotou. I’m still stumped at the moment. I thought I was going to find the answer in the script math.color.ts which contains the color3 and color4 classes. I saw methods in the class to go from specific formats, such as FromHSV and FromHexString, but I didn’t find one that handles color names. Maybe its got a name I’m not familiar with and missed it.

So the question remains, how does Babylon resolve a color name string into a Color3 or Color4 type. For example, the color name aquamarine will resolve to a HEX value of #7fffd4.

@carolhmj, might you be able to help us understand how this works under the hood?

8

I believe it is done with getComputedStyle() method. Here is the small PG example - https://playground.babylonjs.com/#XCPP9Y#21908

window.getComputedStyle(element).color property returns the RGB value of the color from ANY color notation.