Color Palette

A collection of reusable colors that can be referenced in layouts.

Properties

default - object, optional. A collection of Hexadecimal color definitions that can be referenced using a color reference. highContrast - object, optional. A collection of Hexadecimal color definitions that can be referenced using a color reference. Overrides definitions in default when High contrast mode is enabled.

Sample

{
  "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/4.0/layout.json",
  "styles": {
    "colors": {
      "default": {
        "myColor1": "#ff0000ff",
        "myColor2": "#00ff00ff",
        "system_contentPrimary": "#0000ffff"
      },
      "highContrast": {
        "myColor1": "#00ff00ff",
        "system_contrastPrimary": "#0000ffaa"
      }
    }
  },
  "content": {
    "left": {
      "inner": [
        {
          "type": "directionalPad",
          "styles": {
            "idle": {
              "background": {
                "type": "color",
                "value": "colors/myColor1"
              }
            }
          }
        }
      ]
    },
    "right": {
      "inner": [
          {
              "type": "button",
              "action": "gamepadY"
          },
          {
              "type": "button",
              "action": "gamepadB"
          },
          {
              "type": "button",
              "action": "gamepadA",
              "styles": {
                "idle": {
                  "background": {
                    "type": "color",
                    "value": "colors/myColor2"
                  }
                }
              }
          },
          {
              "type": "button",
              "action": "gamepadX"
          }
      ]
    }
  }
}

The above layout with high contrast mode disabled: And with high contrast mode enabled:

Remarks

The above sample includes color definitions that override system colors (e.g., system_contentPrimary, system_accentPrimary etc.) as well as custom color definitions (myColor1, myColor2). Controls implicitly sample system colors when styling, meaning any overrides will effect the global styling of all controls (unless a control has it’s own override within a custom styles block). Custom colors must be explicitly referenced using a color reference (e.g., colors/myColor1). Additionally, custom color definitions cannot use the reserved system_ prefix as it’s reserved for system colors. Color definitions are declared in default and highContrast objects, and are activated when high contrast mode is disabled or enabled, respectively. When high contrast mode is disabled, colors are sampled from default. When enabled, colors are first sampled from highContrast, falling back on default if no definition exists. If a system color override is not present in default, a system default is used, while custom colors must be defined in default. The following table outlines how the above color definitions will resolve dependent on if high contrast (HC) mode is enabled or not:

Color definition	HC mode disabled	HC mode enabled
myColor1	`#ff0000ff`	`#00ff00ff`
myColor2	`#00ff00ff`	`#00ff00ff`
system_contentPrimary	`#0000ffff`	`#0000ffff`
system_contrastPrimary	system default	`#0000ffaa`

System colors

The following table summarizes the list of system colors in the touch adaptation kit, a description of how they are used to style controls, as well as their system default values when high contrast (HC) mode is disabled/enabled.

System Color	Description	HC mode disabled	HC mode enabled
system_contentPrimary	Color used for styling components such as middle strokes, icon tints, and dpad gradients.	`#ffffffff`	`#ffffffff`
system_contentSecondary	Color used for styling components such as backgrounds and fills.	`#ffffff1a`	`#ffffffff`
system_contrastPrimary	Color used for styling contrast components such as inner/outer strokes and face image backplates.	`#00000000`	`#000000bf`
system_contrastSecondary	Color used for styling contrast components such as touchpad strokes.	`#00000000`	`#ffffffff`
system_actionColorDefault	Color used for styling components on controls where the `action` field is set to a non-gamepad action.	`#ffffffff`	`#ffffffe6`
system_actionColorA	Color used for styling components on controls where the `action` field is set to `gamepadA`.	`#7eb902ff`	`#ffffffe6`
system_actionColorB	Color used for styling components on controls where the `action` field is set to `gamepadB`.	`#f25127ff`	`#ffffffe6`
system_actionColorX	Color used for styling components on controls where the `action` field is set to `gamepadX`.	`#00a2eeff`	`#ffffffe6`
system_actionColorY	Color used for styling components on controls where the `action` field is set to `gamepadY`.	`#ffb807ff`	`#ffffffe6`
system_accentPrimary	Color used for styling components such as the ergo-edit inner wheel.	`#8cc08cff`	`#8cc08cff`
system_accentSecondary	Color used for styling components such as the ergo-edit outer wheel.	`#61ab61ff`	`#61ab61ff`

For an up to date listing, refer to the definitions prefixed with _SystemColor in the latest schema.

(all) API references

Error codes

Audio API reference

Chat API reference

Developer kit only API reference

Graphics API reference

Input API reference

Lighting API reference

Networking API reference

XBOX PC remote iteration API reference

System API reference

Tools API reference

Windows device portal REST API reference

XBOX services API reference

MicrosoftGame.config reference

Color Palette

Color Palette

Properties

Sample

Remarks

System colors

See Also

​Color Palette

​Properties

​Sample

​Remarks

​System colors

​See Also

Color Palette

Properties

Sample

Remarks

System colors

See Also