---
title: "Tokens de color"
description: "Todos los roles de color de sistema, con su valor resuelto en claro y en oscuro para cada nivel de contraste."
url: "https://tanrei.chnotchy.com/es/tokens/color/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Tokens de color

> Todos los roles de color de sistema, con su valor resuelto en claro y en oscuro para cada nivel de contraste.

Todos los roles de color de sistema bajo `tanrei.sys.color`, resueltos para claro y oscuro. Las muestras enseñan los valores resueltos literales, así que los dos temas se ven sea cual sea el tema en el que estés leyendo; los roles translúcidos se dibujan sobre el lienzo para el que están pensados. Para saber qué significan los roles y cómo usarlos, lee [Color](https://tanrei.chnotchy.com/es/foundations/color/).

**Estándar**

### Primario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-primary` | #ffffff | #111111 | `--tanrei-sys-color-on-primary` |
| `on-primary-container` | #1b1b1b | #ebebeb | `--tanrei-sys-color-on-primary-container` |
| `primary` | #1b1b1b | #ebebeb | `--tanrei-sys-color-primary` |
| `primary-container` | #eeeeee | #262626 | `--tanrei-sys-color-primary-container` |

### Secundario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-secondary` | #ffffff | #1b1b1b | `--tanrei-sys-color-on-secondary` |
| `on-secondary-container` | #262626 | #e2e2e2 | `--tanrei-sys-color-on-secondary-container` |
| `secondary` | #525252 | #b9b9b9 | `--tanrei-sys-color-secondary` |
| `secondary-container` | #eeeeee | #242424 | `--tanrei-sys-color-secondary-container` |

### Estado: error, success, warning, info

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `error` | #cd262f | #ff928c | `--tanrei-sys-color-error` |
| `error-container` | #ffedeb | #361d1b | `--tanrei-sys-color-error-container` |
| `info` | #3066cb | #8eafff | `--tanrei-sys-color-info` |
| `info-container` | #edf0ff | #1c2334 | `--tanrei-sys-color-info-container` |
| `on-error` | #ffffff | #410004 | `--tanrei-sys-color-on-error` |
| `on-error-container` | #3a211f | #ffe1df | `--tanrei-sys-color-on-error-container` |
| `on-info` | #ffffff | #001944 | `--tanrei-sys-color-on-info` |
| `on-info-container` | #212839 | #e1e8ff | `--tanrei-sys-color-on-info-container` |
| `on-success` | #ffffff | #002108 | `--tanrei-sys-color-on-success` |
| `on-success-container` | #1b2c1c | #daeed6 | `--tanrei-sys-color-on-success-container` |
| `on-warning` | #ffffff | #2c1600 | `--tanrei-sys-color-on-warning` |
| `on-warning-container` | #362410 | #ffe3cb | `--tanrei-sys-color-on-warning-container` |
| `success` | #077b32 | #62c572 | `--tanrei-sys-color-success` |
| `success-container` | #e2f6df | #172718 | `--tanrei-sys-color-success-container` |
| `warning` | #9b5c00 | #f39e3a | `--tanrei-sys-color-warning` |
| `warning-container` | #ffeee0 | #32200c | `--tanrei-sys-color-warning-container` |

### Superficie

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-surface` | #1b1b1b | #ebebeb | `--tanrei-sys-color-on-surface` |
| `on-surface-variant` | #4b4b4b | #a0a0a0 | `--tanrei-sys-color-on-surface-variant` |
| `surface` | #ffffff | #0b0b0b | `--tanrei-sys-color-surface` |
| `surface-bright` | #ffffff | #1f1f1f | `--tanrei-sys-color-surface-bright` |
| `surface-container` | #f6f6f6 | #151515 | `--tanrei-sys-color-surface-container` |
| `surface-container-high` | #f3f3f3 | #1b1b1b | `--tanrei-sys-color-surface-container-high` |
| `surface-container-highest` | #eeeeee | #222222 | `--tanrei-sys-color-surface-container-highest` |
| `surface-container-low` | #f9f9f9 | #111111 | `--tanrei-sys-color-surface-container-low` |
| `surface-container-lowest` | #ffffff | #040404 | `--tanrei-sys-color-surface-container-lowest` |
| `surface-dim` | #f1f1f1 | #000000 | `--tanrei-sys-color-surface-dim` |
| `surface-variant` | #eeeeee | #222222 | `--tanrei-sys-color-surface-variant` |

### Contorno

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `outline` | #848484 | #7c7c7c | `--tanrei-sys-color-outline` |
| `outline-variant` | #000000 · 8% | #ffffff · 14% | `--tanrei-sys-color-outline-variant` |

### Inverso

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `inverse-link` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-link` |
| `inverse-on-surface` | #f1f1f1 | #1f1f1f | `--tanrei-sys-color-inverse-on-surface` |
| `inverse-primary` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-primary` |
| `inverse-surface` | #1f1f1f | #ebebeb | `--tanrei-sys-color-inverse-surface` |

### Utilidad

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `elevation-ring` | #000000 · 8% | #ffffff · 14% | `--tanrei-sys-color-elevation-ring` |
| `elevation-shadow-1` | #000000 · 4% | #000000 · 10% | `--tanrei-sys-color-elevation-shadow-1` |
| `elevation-shadow-2` | #000000 · 6% | #000000 · 16% | `--tanrei-sys-color-elevation-shadow-2` |
| `elevation-shadow-3` | #000000 · 12% | #000000 · 30% | `--tanrei-sys-color-elevation-shadow-3` |
| `focus-ring` | #0070ac | #5db8ff | `--tanrei-sys-color-focus-ring` |
| `focus-ring-inner` | #000000 · 0% | #000000 · 0% | `--tanrei-sys-color-focus-ring-inner` |
| `link` | #1b1b1b | #ebebeb | `--tanrei-sys-color-link` |
| `scrim` | #000000 · 40% | #000000 · 40% | `--tanrei-sys-color-scrim` |
| `shadow` | #000000 | #000000 | `--tanrei-sys-color-shadow` |

### Acento: una paleta declarada por el sistema Tanrei, no vocabulario del núcleo

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `accent` | #0070ac | #5db8ff | `--tanrei-sys-color-accent` |
| `accent-container` | #ddedff | #003859 | `--tanrei-sys-color-accent-container` |
| `on-accent` | #ffffff | #001d32 | `--tanrei-sys-color-on-accent` |
| `on-accent-container` | #003352 | #c2e0ff | `--tanrei-sys-color-on-accent-container` |

Generado a partir de `design/tokens/tanrei.light.tokens.json`, `design/tokens/tanrei.dark.tokens.json`

**Medio**

### Primario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-primary` | #ffffff | #111111 | `--tanrei-sys-color-on-primary` |
| `on-primary-container` | #131313 | #f3f3f3 | `--tanrei-sys-color-on-primary-container` |
| `primary` | #131313 | #f3f3f3 | `--tanrei-sys-color-primary` |
| `primary-container` | #e8e8e8 | #2a2a2a | `--tanrei-sys-color-primary-container` |

### Secundario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-secondary` | #ffffff | #1b1b1b | `--tanrei-sys-color-on-secondary` |
| `on-secondary-container` | #1b1b1b | #f1f1f1 | `--tanrei-sys-color-on-secondary-container` |
| `secondary` | #424242 | #cccccc | `--tanrei-sys-color-secondary` |
| `secondary-container` | #e8e8e8 | #282828 | `--tanrei-sys-color-secondary-container` |

### Estado: error, success, warning, info

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `error` | #b40e20 | #ffb3ae | `--tanrei-sys-color-error` |
| `error-container` | #ffedeb | #361d1b | `--tanrei-sys-color-error-container` |
| `info` | #1655b9 | #b0c6ff | `--tanrei-sys-color-info` |
| `info-container` | #edf0ff | #1c2334 | `--tanrei-sys-color-info-container` |
| `on-error` | #ffffff | #410004 | `--tanrei-sys-color-on-error` |
| `on-error-container` | #311917 | #ffe9e7 | `--tanrei-sys-color-on-error-container` |
| `on-info` | #ffffff | #001944 | `--tanrei-sys-color-on-info` |
| `on-info-container` | #181f30 | #e9edff | `--tanrei-sys-color-on-info-container` |
| `on-success` | #ffffff | #002108 | `--tanrei-sys-color-on-success` |
| `on-success-container` | #132315 | #dff3dc | `--tanrei-sys-color-on-success-container` |
| `on-warning` | #ffffff | #2c1600 | `--tanrei-sys-color-on-warning` |
| `on-warning-container` | #2d1c08 | #ffead9 | `--tanrei-sys-color-on-warning-container` |
| `success` | #006828 | #78dc86 | `--tanrei-sys-color-success` |
| `success-container` | #e2f6df | #172718 | `--tanrei-sys-color-success-container` |
| `warning` | #834d00 | #ffb86d | `--tanrei-sys-color-warning` |
| `warning-container` | #ffeee0 | #32200c | `--tanrei-sys-color-warning-container` |

### Superficie

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-surface` | #131313 | #f3f3f3 | `--tanrei-sys-color-on-surface` |
| `on-surface-variant` | #3b3b3b | #b9b9b9 | `--tanrei-sys-color-on-surface-variant` |
| `surface` | #ffffff | #0b0b0b | `--tanrei-sys-color-surface` |
| `surface-bright` | #ffffff | #1f1f1f | `--tanrei-sys-color-surface-bright` |
| `surface-container` | #f6f6f6 | #151515 | `--tanrei-sys-color-surface-container` |
| `surface-container-high` | #f3f3f3 | #1b1b1b | `--tanrei-sys-color-surface-container-high` |
| `surface-container-highest` | #eeeeee | #222222 | `--tanrei-sys-color-surface-container-highest` |
| `surface-container-low` | #f9f9f9 | #111111 | `--tanrei-sys-color-surface-container-low` |
| `surface-container-lowest` | #ffffff | #040404 | `--tanrei-sys-color-surface-container-lowest` |
| `surface-dim` | #f1f1f1 | #000000 | `--tanrei-sys-color-surface-dim` |
| `surface-variant` | #eeeeee | #222222 | `--tanrei-sys-color-surface-variant` |

### Contorno

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `outline` | #6d6d6d | #9b9b9b | `--tanrei-sys-color-outline` |
| `outline-variant` | #000000 · 44% | #ffffff · 36% | `--tanrei-sys-color-outline-variant` |

### Inverso

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `inverse-link` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-link` |
| `inverse-on-surface` | #f1f1f1 | #1f1f1f | `--tanrei-sys-color-inverse-on-surface` |
| `inverse-primary` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-primary` |
| `inverse-surface` | #1f1f1f | #ebebeb | `--tanrei-sys-color-inverse-surface` |

### Utilidad

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `elevation-ring` | #000000 · 14% | #ffffff · 22% | `--tanrei-sys-color-elevation-ring` |
| `elevation-shadow-1` | #000000 · 4% | #000000 · 10% | `--tanrei-sys-color-elevation-shadow-1` |
| `elevation-shadow-2` | #000000 · 6% | #000000 · 16% | `--tanrei-sys-color-elevation-shadow-2` |
| `elevation-shadow-3` | #000000 · 12% | #000000 · 30% | `--tanrei-sys-color-elevation-shadow-3` |
| `focus-ring` | #005e91 | #94ccff | `--tanrei-sys-color-focus-ring` |
| `focus-ring-inner` | #000000 · 0% | #000000 · 0% | `--tanrei-sys-color-focus-ring-inner` |
| `link` | #131313 | #f3f3f3 | `--tanrei-sys-color-link` |
| `scrim` | #000000 · 40% | #000000 · 40% | `--tanrei-sys-color-scrim` |
| `shadow` | #000000 | #000000 | `--tanrei-sys-color-shadow` |

### Acento: una paleta declarada por el sistema Tanrei, no vocabulario del núcleo

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `accent` | #005e91 | #94ccff | `--tanrei-sys-color-accent` |
| `accent-container` | #d2e8ff | #003859 | `--tanrei-sys-color-accent-container` |
| `on-accent` | #ffffff | #001d32 | `--tanrei-sys-color-on-accent` |
| `on-accent-container` | #002842 | #d8eaff | `--tanrei-sys-color-on-accent-container` |

Generado a partir de `design/tokens/tanrei.light-medium.tokens.json`, `design/tokens/tanrei.dark-medium.tokens.json`

**Alto**

### Primario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-primary` | #ffffff | #111111 | `--tanrei-sys-color-on-primary` |
| `on-primary-container` | #000000 | #ffffff | `--tanrei-sys-color-on-primary-container` |
| `primary` | #000000 | #ffffff | `--tanrei-sys-color-primary` |
| `primary-container` | #e2e2e2 | #2e2e2e | `--tanrei-sys-color-primary-container` |

### Secundario

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-secondary` | #ffffff | #1b1b1b | `--tanrei-sys-color-on-secondary` |
| `on-secondary-container` | #000000 | #ffffff | `--tanrei-sys-color-on-secondary-container` |
| `secondary` | #303030 | #e2e2e2 | `--tanrei-sys-color-secondary` |
| `secondary-container` | #e2e2e2 | #2c2c2c | `--tanrei-sys-color-secondary-container` |

### Estado: error, success, warning, info

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `error` | #930015 | #ffcfcb | `--tanrei-sys-color-error` |
| `error-container` | #ffedeb | #361d1b | `--tanrei-sys-color-error-container` |
| `info` | #00429b | #cdd9ff | `--tanrei-sys-color-info` |
| `info-container` | #edf0ff | #1c2334 | `--tanrei-sys-color-info-container` |
| `on-error` | #ffffff | #410004 | `--tanrei-sys-color-on-error` |
| `on-error-container` | #281110 | #fff0ef | `--tanrei-sys-color-on-error-container` |
| `on-info` | #ffffff | #001944 | `--tanrei-sys-color-on-info` |
| `on-info-container` | #101728 | #f1f3ff | `--tanrei-sys-color-on-info-container` |
| `on-success` | #ffffff | #002108 | `--tanrei-sys-color-on-success` |
| `on-success-container` | #0b1b0d | #e5f9e1 | `--tanrei-sys-color-on-success-container` |
| `on-warning` | #ffffff | #2c1600 | `--tanrei-sys-color-on-warning` |
| `on-warning-container` | #241403 | #fff1e7 | `--tanrei-sys-color-on-warning-container` |
| `success` | #00531e | #8bf097 | `--tanrei-sys-color-success` |
| `success-container` | #e2f6df | #172718 | `--tanrei-sys-color-success-container` |
| `warning` | #683c00 | #ffd2a6 | `--tanrei-sys-color-warning` |
| `warning-container` | #ffeee0 | #32200c | `--tanrei-sys-color-warning-container` |

### Superficie

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `on-surface` | #000000 | #ffffff | `--tanrei-sys-color-on-surface` |
| `on-surface-variant` | #262626 | #d4d4d4 | `--tanrei-sys-color-on-surface-variant` |
| `surface` | #ffffff | #0b0b0b | `--tanrei-sys-color-surface` |
| `surface-bright` | #ffffff | #1f1f1f | `--tanrei-sys-color-surface-bright` |
| `surface-container` | #f6f6f6 | #151515 | `--tanrei-sys-color-surface-container` |
| `surface-container-high` | #f3f3f3 | #1b1b1b | `--tanrei-sys-color-surface-container-high` |
| `surface-container-highest` | #eeeeee | #222222 | `--tanrei-sys-color-surface-container-highest` |
| `surface-container-low` | #f9f9f9 | #111111 | `--tanrei-sys-color-surface-container-low` |
| `surface-container-lowest` | #ffffff | #040404 | `--tanrei-sys-color-surface-container-lowest` |
| `surface-dim` | #f1f1f1 | #000000 | `--tanrei-sys-color-surface-dim` |
| `surface-variant` | #eeeeee | #222222 | `--tanrei-sys-color-surface-variant` |

### Contorno

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `outline` | #4b4b4b | #c6c6c6 | `--tanrei-sys-color-outline` |
| `outline-variant` | #000000 · 56% | #ffffff · 48% | `--tanrei-sys-color-outline-variant` |

### Inverso

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `inverse-link` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-link` |
| `inverse-on-surface` | #f1f1f1 | #1f1f1f | `--tanrei-sys-color-inverse-on-surface` |
| `inverse-primary` | #e2e2e2 | #1b1b1b | `--tanrei-sys-color-inverse-primary` |
| `inverse-surface` | #1f1f1f | #ebebeb | `--tanrei-sys-color-inverse-surface` |

### Utilidad

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `elevation-ring` | #000000 · 30% | #ffffff · 40% | `--tanrei-sys-color-elevation-ring` |
| `elevation-shadow-1` | #000000 · 4% | #000000 · 10% | `--tanrei-sys-color-elevation-shadow-1` |
| `elevation-shadow-2` | #000000 · 6% | #000000 · 16% | `--tanrei-sys-color-elevation-shadow-2` |
| `elevation-shadow-3` | #000000 · 12% | #000000 · 30% | `--tanrei-sys-color-elevation-shadow-3` |
| `focus-ring` | #004a74 | #bddeff | `--tanrei-sys-color-focus-ring` |
| `focus-ring-inner` | #000000 · 0% | #000000 · 0% | `--tanrei-sys-color-focus-ring-inner` |
| `link` | #000000 | #ffffff | `--tanrei-sys-color-link` |
| `scrim` | #000000 · 40% | #000000 · 40% | `--tanrei-sys-color-scrim` |
| `shadow` | #000000 | #000000 | `--tanrei-sys-color-shadow` |

### Acento: una paleta declarada por el sistema Tanrei, no vocabulario del núcleo

| Rol | Claro | Oscuro | Propiedad personalizada de CSS |
| --- | --- | --- | --- |
| `accent` | #004a74 | #bddeff | `--tanrei-sys-color-accent` |
| `accent-container` | #c8e3ff | #003859 | `--tanrei-sys-color-accent-container` |
| `on-accent` | #ffffff | #001d32 | `--tanrei-sys-color-on-accent` |
| `on-accent-container` | #001d32 | #edf4ff | `--tanrei-sys-color-on-accent-container` |

Generado a partir de `design/tokens/tanrei.light-high.tokens.json`, `design/tokens/tanrei.dark-high.tokens.json`