> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Paleta de colores

> Paleta de colores

# Paleta de colores

Una colección de colores reutilizables a los que se puede hacer referencia en los diseños.

## Propiedades

`default` - *object*, *opcional*. Una colección de definiciones de [color hexadecimal](/es/reference/system/touchadaptationkit/types/game-streaming-touch-hexcolor) a las que se puede hacer referencia mediante una [referencia de color](/es/reference/system/touchadaptationkit/types/game-streaming-touch-colorreference).

`highContrast` - *object*, *opcional*. Una colección de definiciones de [color hexadecimal](/es/reference/system/touchadaptationkit/types/game-streaming-touch-hexcolor) a las que se puede hacer referencia mediante una [referencia de color](/es/reference/system/touchadaptationkit/types/game-streaming-touch-colorreference). Invalida las definiciones de `default` cuando está habilitado el [modo de contraste alto](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode).

## Ejemplo

```JSON theme={null}
{
  "$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"
          }
      ]
    }
  }
}
```

El diseño anterior con el modo de contraste alto **deshabilitado**:

![Diseño táctil con paleta de colores y modo de contraste alto deshabilitado](https://mintcdn.com/microsoft-4404708b/-_0FrcE2bDxzGxv-/images/gdk/reference/game-streaming-tak-color-palette-reference-hc-disabled.png?fit=max\&auto=format\&n=-_0FrcE2bDxzGxv-\&q=85\&s=dba732004eecd1db8fc9a608c31248cd)

Y con el modo de contraste alto **habilitado**:

![Diseño táctil con paleta de colores y modo de contraste alto habilitado](https://mintcdn.com/microsoft-4404708b/-_0FrcE2bDxzGxv-/images/gdk/reference/game-streaming-tak-color-palette-reference-hc-enabled.png?fit=max\&auto=format\&n=-_0FrcE2bDxzGxv-\&q=85\&s=fff468e0eba734e9edec6527e7584262)

## Comentarios

El [ejemplo](#sample) anterior incluye definiciones de color que invalidan [colores del sistema](#system-colors) (por ejemplo, `system_contentPrimary`, `system_accentPrimary`, etc.), así como definiciones de color personalizadas (`myColor1`, `myColor2`). Los controles toman muestras de los colores del sistema de forma **implícita** al aplicar estilos, lo que significa que cualquier invalidación afectará a los estilos globales de todos los controles (a menos que un control tenga su propia invalidación dentro de un bloque `styles` personalizado). Los colores personalizados deben referenciarse de forma **explícita** mediante una [referencia de color](/es/reference/system/touchadaptationkit/types/game-streaming-touch-colorreference) (por ejemplo, `colors/myColor1`). Además, las definiciones de color personalizadas **no pueden** usar el prefijo reservado `system_`, ya que está reservado para los colores del sistema.

Las definiciones de color se declaran en los objetos `default` y `highContrast`, y se activan cuando el [modo de contraste alto](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode) está deshabilitado o habilitado, respectivamente. Cuando el modo de contraste alto está deshabilitado, los colores se toman de `default`. Cuando está habilitado, los colores se toman primero de `highContrast` y, si no existe ninguna definición, se recurre a `default`. Si una invalidación de color del sistema no está presente en `default`, se usa un valor predeterminado del sistema, mientras que los colores personalizados **deben** definirse en `default`. En la tabla siguiente se describe cómo se resolverán las definiciones de color anteriores en función de si el modo de contraste alto (HC) está habilitado o no:

| Definición de color | Modo HC deshabilitado | Modo HC habilitado |
| :- | - | - |
| myColor1 | `#ff0000ff` | `#00ff00ff` |
| myColor2 | `#00ff00ff` | `#00ff00ff` |
| system\_contentPrimary | `#0000ffff` | `#0000ffff` |
| system\_contrastPrimary | valor predeterminado del sistema | `#0000ffaa` |

## Colores del sistema

En la tabla siguiente se resume la lista de colores del sistema del Touch Adaptation Kit, una descripción de cómo se usan para aplicar estilos a los controles, así como sus valores predeterminados del sistema cuando el modo de contraste alto (HC) está deshabilitado o habilitado.

| Color del sistema | Descripción | Modo HC deshabilitado | Modo HC habilitado |
| :- | :- | :- | :- |
| system\_contentPrimary | Color usado para aplicar estilos a componentes como trazos intermedios, tintes de iconos y degradados de la cruceta. | `#ffffffff` | `#ffffffff` |
| system\_contentSecondary | Color usado para aplicar estilos a componentes como fondos y rellenos. | `#ffffff1a` | `#ffffffff` |
| system\_contrastPrimary | Color usado para aplicar estilos a componentes de contraste como trazos internos y externos y placas de fondo de la imagen frontal. | `#00000000` | `#000000bf` |
| system\_contrastSecondary | Color usado para aplicar estilos a componentes de contraste como los trazos del panel táctil. | `#00000000` | `#ffffffff` |
| system\_actionColorDefault | Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en una acción que no es de mando. | `#ffffffff` | `#ffffffe6` |
| system\_actionColorA | Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadA`. | `#7eb902ff` | `#ffffffe6` |
| system\_actionColorB | Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadB`. | `#f25127ff` | `#ffffffe6` |
| system\_actionColorX | Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadX`. | `#00a2eeff` | `#ffffffe6` |
| system\_actionColorY | Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadY`. | `#ffb807ff` | `#ffffffe6` |
| system\_accentPrimary | Color usado para aplicar estilos a componentes como la rueda interna de edición ergonómica. | `#8cc08cff` | `#8cc08cff` |
| system\_accentSecondary | Color usado para aplicar estilos a componentes como la rueda externa de edición ergonómica. | `#61ab61ff` | `#61ab61ff` |

Para obtener una lista actualizada, consulte las definiciones con el prefijo `_SystemColor` en el [esquema más reciente](https://github.com/microsoft/xbox-game-streaming-tools/blob/main/touch-adaptation-kit/schemas/layout/v4.0/layout.json).

## Consulte también

[Referencia del Touch Adaptation Kit](/es/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview)\
[Modo de contraste alto para diseños de adaptación táctil](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode)


## Related topics

- [Touch Adaptation Kit](/es/reference/system/touchadaptationkit/touchadaptationkit-reference.md)
- [Modo de contraste alto para los diseños de adaptación táctil](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode.md)
- [Establecimiento de colores en un LampArray](/es/build/core-features/common/lighting/lighting-colors.md)
- [Directriz de accesibilidad de Xbox 103](/es/build/game-principles/accessibility/xag-deep-dives/xag-103-additional-cues.md)
- [Touch Adaptation Kit Editor: personalización de la vista previa](/es/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-customize-preview.md)