# Colores

> La biblioteca de Colores: los diez colores del sistema con nombre, con sus valores y sus direcciones, sus propias muestras, el inspector, crear y editar un color, sustituir un color del sistema, y dónde se usa un color.

**Colors** es la tercera categoría bajo la raíz Assets: la paleta fija que trae el producto y las muestras que usted añade, cada una un nombre con un valor `#RRGGBB`. El panel se encabeza "Colores", con la línea "Colores #RRGGBB con nombre que devuelven las variables de salida de color. Los colores del operador prevalecen sobre un color del sistema en la misma dirección." y la insignia del recuento. Leerla necesita **Ver Logic**; crear, editar y eliminar sus colores necesitan **Configurar Logic**.

## La paleta del sistema {#the-system-palette}

| Nombre | Dirección | Valor |
| --- | --- | --- |
| Brand | `Assets.Colors.Brand` | `#0369A1` |
| Brand light | `Assets.Colors.Brand_light` | `#38BDF8` |
| Brand tint | `Assets.Colors.Brand_tint` | `#E0F2FE` |
| Red | `Assets.Colors.Red` | `#C42B1C` |
| Amber | `Assets.Colors.Amber` | `#C19C00` |
| Green | `Assets.Colors.Green` | `#0F7B0F` |
| Blue | `Assets.Colors.Blue` | `#005FB8` |
| Gray | `Assets.Colors.Gray` | `#8A8A8A` |
| Black | `Assets.Colors.Black` | `#000000` |
| White | `Assets.Colors.White` | `#FFFFFF` |

Un color tiene un solo valor, usado tal cual en el tema claro y en el oscuro; la paleta no cambia con el tema.

## El catálogo y el inspector {#the-catalog-and-the-inspector}

Sus colores se listan primero y después la paleta; filtros: **Origen** y **Por página**. Una tarjeta muestra la muestra, el nombre, el hexadecimal y el origen. El inspector muestra la muestra en grande con su hexadecimal, el nombre, y Dirección, Origen (Paleta del sistema, o Mi biblioteca) y Formato (`#RRGGBB`). Un color de la paleta muestra "Los colores del sistema son de solo lectura."; los suyos ofrecen **Editar** y **Eliminar** a un rol que configura.

## Nuevo color {#new-color}

El verbo sobre la fila Colors abre "Nuevo color" en lugar de la rejilla ("Elija una dirección estable y su valor RGB de seis dígitos.").

| Campo | Qué es | Valores / por defecto | Efecto |
| --- | --- | --- | --- |
| Nombre | El nombre visible; su segmento es la dirección. | Obligatorio. | La dirección que guardan las variables. Editar la renombra después, y toda referencia a la dirección antigua le sigue. Un nombre cuyo segmento es igual al de un color de la paleta sustituye a ese color en la dirección y en la lista. |
| Selector | El selector de color del navegador. | Empieza en `#0369A1`. | Escribe el campo hexadecimal. |
| Hexadecimal | El valor como texto. | Exactamente `#RRGGBB`; `#0369A1` por defecto. | Cualquier otra cosa muestra "Use exactamente #RRGGBB."; el valor se guarda en mayúsculas. |

La vista previa de la derecha muestra la muestra y el hexadecimal normalizado. "Hace falta un nombre." y "Use exactamente #RRGGBB." mantienen **Crear color** en gris; **Cancelar** o **Atrás** sale sin crear nada. Si sale bien, la tarjeta se revela y el registro de acciones dice "Color creado."

## Editar y Eliminar {#edit-and-delete}

**Editar** abre "Editar `<name>`" ("El renombrado se guarda al pulsar Intro o al salir del campo y se lleva consigo las referencias; los cambios de color válidos se guardan automáticamente."): un campo **Nombre** que es un campo de cambio de nombre, con el selector y el hexadecimal debajo. Mientras se escribe un nombre, una línea previsualiza el impacto ("Al renombrar se actualizan los 2 lugares que leen esta dirección.", "Ninguna referencia usa la dirección actual." o "La dirección efectiva no cambia; no hay referencias que actualizar."). Intro, o salir del campo, lo confirma: el color conserva su id y su valor, todas las referencias enraizadas a la dirección antigua se reescriben, y el registro de acciones dice "Color renombrado y N referencias actualizadas." Un nombre ya ocupado se rechaza en el sitio, bajo el campo. Un cambio de valor válido se guarda medio segundo después de la última edición ("Color guardado."). **Eliminar** pregunta "¿Eliminar 'X'? Las referencias a su dirección quedarán sin resolver. Esta acción no se puede deshacer." y, cuando el color sustituía a una entrada de la paleta, vuelve a descubrir esa entrada.

## Dónde se usa un color {#where-a-color-is-used}

Una [variable](logic-variables#output-types) con salida de color devuelve `Assets.Colors.<name>` (`Variables.Level.Value > 50 ? Assets.Colors.Red : Assets.Colors.Green`) y el componente vinculado a ella dibuja ese color; las entradas Color de relleno y Color de trazo de un [símbolo](assets-symbols) aceptan un recurso de color o una variable de color; el [editor de paneles](view-editor) ofrece estas direcciones allí donde una propiedad acepta un color.

## Lo que la biblioteca no hace {#what-the-library-does-not-do}

No acepta canal alfa, ni colores de tres dígitos, ni colores con nombre de CSS, no edita la paleta, y no guarda ninguna variante por tema.