Colores
Última actualización: 14 de noviembre de 2026.
1. Paleta oficial
Sección titulada «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 |
|---|---|---|---|
| Azul oscuro | #012051 |
Identidad, texto y acción principal. | |
| Azul | #2A62F7 |
Acentos, foco y enlaces. | |
| Naranja | #FC5624 |
Isotipo y acentos de marca. | |
| Naranja intenso | #E24A27 |
Intensidad complementaria del naranja. | |
| Celeste 1 | #B8D2E9 |
Tono claro de marca. | |
| Celeste 2 | #93B3D1 |
Tono intermedio. | |
| Celeste 3 | #799BB7 |
Tono oscuro de la familia celeste. | |
| Lila 1 | #C8AFF0 |
Tono claro de marca. | |
| Lila 2 | #B69BEA |
Tono intermedio. | |
| 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
Sección titulada «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
Sección titulada «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
Sección titulada «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
Sección titulada «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.