FloatGrids Documentation
Search
⌃K

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.

Using FloatGrids Color Tool to add your own colors in Unity

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. 1.
    Get a 10 color range color palette here.
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
  1. 2.
    Copy and paste all the hexadecimal codes in the FloatGrids Color Palette tool in Unity. Under the Color Palette section.
  2. 3.
    Click Apply changes. You should see the changes in the scene.

Color Palette families

Creating your own color families in Unity

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.

Modifying Base Colors Families

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 baseColorsattribute. 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.

Create a new set of Base Colors and a Base Color Family

  1. 1.
    Find the baseColorFamilies section and locate the closing square bracket ] of the last baseColorFamily object. It should be just before the following comma ,.
  2. 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 new baseColorFamily with the name "MyNewColorFamily" and two baseColors named "MyNewColorBlack" and "MyNewColorWhite". The color values for each baseColor 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. 3.
    Save the file and overwrite the existing one.

Editing the name of a Base Color Family or Base Color

  1. 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. 2.
    Save the file and overwrite the existing one.

Remove a Base Color

  1. 1.
    Locate the baseColorFamilies array within the JSON file and find the object of the base color family you want to modify.
  2. 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. 3.
    Save the modified JSON file, overwriting the original file.

Remove a Base Color Family

  1. 1.
    Locate the baseColorFamilies array within the JSON file and find the object of the base color family you want to modify.
  2. 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. 3.
    Save the modified JSON file, overwriting the original file.

Applying colors with FloatGrids Token Selector

  • 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.

Token families

Modifying Tokens

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.

Create new tokens

  1. 1.
    Find the tokenStyles section and locate the closing square bracket ] of the last tokenStyle object. It should be just before the following comma ,.
  2. 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 new tokenStyle with the name "MyNewTokenStyle" and two tokenStyles named "MyNewBlackToken" and "MyNewWhiteToken". In the first token, parent values refers to the Base Color Family ‘MyNewColorFamily’ and the Base Color ‘MyNewColorBlack’.
  3. 3.
    Save the file and overwrite the existing one.

Edit new tokens

  1. 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. 2.
    Save the file and overwrite the existing one.

Remove Tokens

  1. 1.
    Locate the tokenStyles array within the JSON file and find the object of the token style you want to modify.
  2. 2.
    Remove the token object you no longer want within the tokensarray. Delete the entire object (including the curly braces surrounding it and its contents).
  3. 3.
    Save the modified JSON file, overwriting the original file.
Customization - Previous
Overview
Next - Customization
Typography
Last modified 1mo ago