Color Palette
Color is all over your app, FloatGrids give you a tool that gives you control over the color throughout all the UI components, even your existing ones.
FloatGrids Color logic
FloatGrids Color Palette tool uses a token-based color palette. Every token has a base color as a parent. Tokens are applied in the UI components via the FG Color Token Selector component. You'll only need the FG Color Token Selector component when creating new components from scratch.
Go to Window/FloatGrids Color Palette to open it.
Let's see how you can add your own color palette to FloatGrids and use it across all the components at once.
- 1.
Reduce saturation for good contrast
Colors tend to be brigther in VR than they are in desktop or mobile devices. If your Primary color (500) looks too bright in Unity, in the link provided above, go to Edit/Saturation/All Shades and reduce the saturation. Make some tests in Unity to see the actual result

Generated color palette

In the Edit page, reduce the saturation if the Primary was too shine
- 2.Copy and paste all the hexadecimal codes in the FloatGrids Color Palette tool in Unity. Under the Color Palette section.
- 3.Click Apply changes. You should see the changes in the scene.

If you need to modify a single color value, it is recommended that you use the dedicated tool for this purpose.
If you wish to make more extensive changes to the color palette, such as adding new color families and tokens, you can do so within the JSON file. It is important to note that a solid understanding of the JSON format is required to carry out any modifications, as any formatting errors can result in Unity being unable to read the color palette and potentially causing fatal errors.
For any major change in the color palette such adding, removing or editing names find the FloatGridsPalette.json document located at Floatgrids/Design System/Editor and open it with a text editor with autoformatting capabilities, such as Visual Studio Code, Sublime Text, or Atom. Make sure you properly format your document before adding any modifications.
The
baseColorFamilies
section contains an array of objects, each of which describes a color family. Each color family object has a name
attribute and a baseColors
attribute. The name
attribute specifies the name of the color family, while the baseColors
attribute contains an array of objects that describe individual colors within that family. Each color object has a name
attribute and a color
attribute. The name
attribute specifies the name of the color, while the color
attribute is an array of four values representing the color in RGBA format.- 1.Find the
baseColorFamilies
section and locate the closing square bracket]
of the lastbaseColorFamily
object. It should be just before the following comma,
. - 2.Add a new
baseColorFamily
object by copying the following code format and place it after the closing square bracket]
:{"name": "MyNewColorFamily","baseColors": [{"name": "MyNewColorBlack","color": [ 0.0, 0.0, 0.0, 1.0 ]},{"name": "MyNewColorWhite","color": [ 1.0, 1.0, 1.0, 1.0 ]}]}This code creates a newbaseColorFamily
with the name "MyNewColorFamily" and twobaseColors
named "MyNewColorBlack" and "MyNewColorWhite". Thecolor
values for eachbaseColor
are specified as an array of four decimal values between 0 and 1, representing the red, green, blue, and alpha (transparency) components of the color. - 3.Save the file and overwrite the existing one.
- 1.Locate the names you would like to change and changed them with your preferred values. Beware of changing names of existing colors since this could cause tokens to lose their color reference.
- 2.Save the file and overwrite the existing one.
- 1.Locate the
baseColorFamilies
array within the JSON file and find the object of the base color family you want to modify. - 2.Remove the base color object you no longer want within the
baseColors
array. Beware of deleting a base color that is referenced by a token. - 3.Save the modified JSON file, overwriting the original file.
- 1.Locate the
baseColorFamilies
array within the JSON file and find the object of the base color family you want to modify. - 2.Find the object representing the base color family you want to remove. Delete the entire object (including the curly braces surrounding it and its contents). Beware of deleting a set of base colors that are referenced by a token.
- 3.Save the modified JSON file, overwriting the original file.
- Tokens are auto generated in Unity. Every token has a solid color from the Color Palette as a parent.
- All FloatGrids UI Components already use FG Token Selector. Use it to apply color tokens to images and TMP texts so you can create brand new UI components.


The
tokenStyles
section also contains an array of objects, each of which describes a token style. Each token style object has a name
attribute and a tokens
attribute. The name
attribute specifies the name of the token style, while the tokens
attribute contains an array of objects that describe individual tokens within that style. Each token object has a name
attribute, a parent
attribute, an alpha
attribute, and an editable
attribute. The name
attribute specifies the name of the token, while the parent
attribute specifies the name of the base color for the token. The alpha
attribute specifies the alpha value for the token, and the editable
attribute specifies whether or not the token is editable.- 1.Find the
tokenStyles
section and locate the closing square bracket]
of the lasttokenStyle
object. It should be just before the following comma,
. - 2.Add a new
tokenStyle
object by copying the following code format and place it after the closing square bracket]
:{"name": "MyNewTokenStyle","tokens": [{"name": "MyNewBlackToken","parent": "MyNewColorFamily_MyNewColorBlack","alpha": 1.0,"editable": true},{"name": "MyNewWhiteToken","parent": "MyNewColorFamily_MyNewColorWhite","alpha": 1.0,"editable": true}]}This code creates a newtokenStyle
with the name "MyNewTokenStyle" and twotokenStyles
named "MyNewBlackToken" and "MyNewWhiteToken". In the first token,parent
values refers to the Base Color Family ‘MyNewColorFamily’ and the Base Color ‘MyNewColorBlack’. - 3.Save the file and overwrite the existing one.
- 1.Locate the names you would like to change and changed them with your preferred values. Beware of changing the parent field since it could break the reference to the Base Color.
- 2.Save the file and overwrite the existing one.
- 1.Locate the
tokenStyles
array within the JSON file and find the object of the token style you want to modify. - 2.Remove the token object you no longer want within the
tokens
array. Delete the entire object (including the curly braces surrounding it and its contents). - 3.Save the modified JSON file, overwriting the original file.
Last modified 1mo ago