# Colores

**Última actualización:** 14 de noviembre de 2026.

## 1. Paleta oficial

La paleta de identidad de Salud365 utiliza los siguientes valores sRGB, expresados con códigos hexadecimales de seis posiciones.

| Muestra | Color | HEX | Uso |
| --- | --- | --- | --- |
| <span class="ds-swatch" style="background:#012051" aria-hidden="true"></span> | Azul oscuro | `#012051` | Identidad, texto y acción principal. |
| <span class="ds-swatch" style="background:#2A62F7" aria-hidden="true"></span> | Azul | `#2A62F7` | Acentos, foco y enlaces. |
| <span class="ds-swatch" style="background:#FC5624" aria-hidden="true"></span> | Naranja | `#FC5624` | Isotipo y acentos de marca. |
| <span class="ds-swatch" style="background:#E24A27" aria-hidden="true"></span> | Naranja intenso | `#E24A27` | Intensidad complementaria del naranja. |
| <span class="ds-swatch" style="background:#B8D2E9" aria-hidden="true"></span> | Celeste 1 | `#B8D2E9` | Tono claro de marca. |
| <span class="ds-swatch" style="background:#93B3D1" aria-hidden="true"></span> | Celeste 2 | `#93B3D1` | Tono intermedio. |
| <span class="ds-swatch" style="background:#799BB7" aria-hidden="true"></span> | Celeste 3 | `#799BB7` | Tono oscuro de la familia celeste. |
| <span class="ds-swatch" style="background:#C8AFF0" aria-hidden="true"></span> | Lila 1 | `#C8AFF0` | Tono claro de marca. |
| <span class="ds-swatch" style="background:#B69BEA" aria-hidden="true"></span> | Lila 2 | `#B69BEA` | Tono intermedio. |
| <span class="ds-swatch" style="background:#A472F3" aria-hidden="true"></span> | Lila 3 | `#A472F3` | Tono intenso de la familia lila. |

Utilizar los tonos claros para fondos y los oscuros para resaltar. La elección de un color de marca debe comprobarse sobre su fondo real.

## 2. Colores semánticos de interfaz

Estos tokens definen la función de cada color en la interfaz; incluyen superficies y estados adicionales a la paleta de marca. Los nombres son identificadores de diseño compartidos entre plataformas.

| Token | Valor | Función |
| --- | --- | --- |
| `background` | `#F4F7FB` | Fondo general. |
| `foreground` | `#012051` | Texto principal. |
| `card`, `popover` | `#FFFFFF` | Tarjetas y superficies superpuestas. |
| `primary`, `accion` | `#012051` | Acción principal. |
| `primary-foreground`, `accion-foreground` | `#FFFFFF` | Texto sobre la acción principal. |
| `secondary` | `#E6EEF7` | Relleno secundario. |
| `secondary-foreground` | `#012051` | Texto secundario sobre relleno. |
| `muted` | `#EDF2F8` | Fondo atenuado. |
| `muted-foreground` | `#4A5B79` | Ayuda y texto secundario. |
| `accent` | `#DCE8F4` | Selección y énfasis suave. |
| `accent-foreground` | `#012051` | Texto sobre selección. |
| `border` | `#DDE6F0` | Bordes y divisores. |
| `input` | `#B4C3D6` | Bordes de campos. |
| `ring` | `#2A62F7` | Foco de teclado. |
| `success` | `#1E7A4C` | Confirmación o éxito. |
| `success-foreground` | `#FFFFFF` | Texto sobre éxito sólido. |
| `destructive` | `#C42B2B` | Error y acción destructiva. |

## 3. Significado de los estados

| Estado | Tratamiento |
| --- | --- |
| Éxito | Verde acompañado de confirmación textual e icono cuando corresponda. |
| Error | Rojo, descripción concreta y acción de recuperación. |
| Advertencia | Ámbar con texto que explique qué debe revisar el usuario. |
| Información | Azul y texto explicativo. |
| Pendiente o en proceso | Etiqueta explícita y señal de actividad cuando exista una operación en curso. |
| Deshabilitado | Atenuación visual, semántica deshabilitada y ausencia de activación. |

El color por sí solo no comunica el estado. Un pago, una cita y una solicitud pueden tener estados diferentes; sus etiquetas deben corresponder al dato real.

## 4. Contraste

Criterio de revisión: al menos 4,5:1 para texto normal y 3:1 para texto grande. Los iconos y contornos necesarios para identificar un control requieren comprobación de contraste sobre la superficie donde se presentan.

Relaciones calculadas con colores sRGB sólidos y fondo blanco; no incluyen transparencias, hover ni mezclas:

| Color sobre blanco | Contraste aproximado | Texto normal |
| --- | --- | --- |
| Azul oscuro `#012051` | 15,83:1 | Cumple. |
| Azul `#2A62F7` | 5,01:1 | Cumple. |
| Texto secundario `#4A5B79` | 6,85:1 | Cumple. |
| Éxito `#1E7A4C` | 5,33:1 | Cumple. |
| Error `#C42B2B` | 5,63:1 | Cumple. |
| Naranja `#FC5624` | 3,23:1 | No cumple para texto normal. |
| Naranja intenso `#E24A27` | 4,01:1 | No cumple para texto normal. |
| Lila 3 `#A472F3` | 3,34:1 | No cumple para texto normal. |
| Celeste 3 `#799BB7` | 2,92:1 | No cumple para texto normal. |

Conservar los colores oficiales y seleccionar combinaciones legibles. No asumir que todo tono de marca puede usarse como texto pequeño o como fondo de un botón con texto blanco.

## 5. Aplicación

- Usar tokens semánticos para que un mismo tipo de componente conserve su significado.
- Revisar estados normal, seleccionado, hover, foco, error y deshabilitado.
- Mantener los colores funcionales separados de los acentos decorativos.
- Esta paleta define el tema claro de la aplicación. Las preferencias de lectura del portal de documentación se gestionan de forma independiente.