Smart Tiles Introducción
El color es la forma más rápida de agrupar mosaicos y de integrar visualmente un panel en el sitio. Cada mosaico de Smart Tiles tiene un Color de fondo y un Color de fuente, elegidos de la misma paleta: seis colores de énfasis que siguen el tema del sitio, treinta y un colores predefinidos, negro y blanco. Este artículo enumera los colores, explica cómo se comportan los colores de énfasis y ofrece sugerencias para combinarlos.
Elegir un color
- Abra la página en el modo de edición y haga clic en el botón … del mosaico.
- Apunte a Color de fondo o Color de fuente.
- Haga clic en un color del submenú. Cada opción muestra un círculo de su color; el color actual se indica mediante una casilla rellena.
El cambio se aplica de inmediato. Los dos menús contienen los mismos colores, por lo que cualquier color puede utilizarse para el fondo de un mosaico y para el texto de otro.
Un mosaico nuevo utiliza Énfasis 1 como color de fondo y Blanco como color de fuente.
Colores de énfasis
Énfasis 1 a Énfasis 6 no son colores fijos. Hacen referencia a los seis colores de énfasis del contenido del tema aplicado al sitio. Por tanto, un mosaico con un color de énfasis cambia junto con el tema: si cambia el tema azul del sitio por uno verde, todos los mosaicos con Énfasis 1 también se vuelven verdes. Los paneles creados con colores de énfasis se integran así en cualquier sitio al que se copien y no requieren modificaciones cuando cambia la identidad visual.
Los seis colores de énfasis se determinan de la siguiente manera:
- Los temas modernos creados en el centro de administración de SharePoint o con el generador de temas definen los seis énfasis del contenido; cada tema tiene su propio conjunto.
- Los temas personalizados pueden dejar sin definir algunos o todos los énfasis del contenido. Si el tema no define un énfasis, se utiliza su color de énfasis principal. En estos sitios, Énfasis 2 a Énfasis 6 suelen producir el mismo color que Énfasis 1.
❗ Importante
Como los colores de énfasis dependen del tema, un panel exportado de un sitio puede tener un aspecto diferente en otro. Si necesita colores exactos, por ejemplo, colores corporativos, utilice los colores predefinidos.
Colores predefinidos
Los colores predefinidos forman la paleta compartida de Fluent UI, el sistema de diseño de Microsoft 365. No cambian con el tema. El número que sigue al nombre indica el tono de la paleta de Fluent UI: 10 es el tono base, 20 y 30 son progresivamente más oscuros y 40 es aún más oscuro.
| Nombre | Valor | Nombre | Valor |
|---|---|---|---|
| Rosa rojo | #750b1c | Cian 10 | #00b7c3 |
| Rojo 20 | #a4262c | Cian azul 20 | #004e8c |
| Rojo 10 | #d13438 | Cian azul 10 | #0078d4 |
| Rojo naranja | #da3b01 | Azul 10 | #4f6bed |
| Naranja 30 | #8e562e | Azul magenta 30 | #5c2e91 |
| Naranja 20 | #ca5010 | Azul magenta 20 | #8764b8 |
| Naranja 10 | #ffaa44 | Azul magenta 10 | #8378de |
| Amarillo 10 | #fce100 | Magenta 20 | #881798 |
| Naranja amarillo 20 | #986f0b | Magenta 10 | #c239b3 |
| Naranja amarillo 10 | #c19c00 | Magenta rosa 20 | #9b0062 |
| Verde amarillento | #8cbd18 | Magenta rosa 10 | #e3008c |
| Verde 20 | #0b6a0b | Gris 40 | #393939 |
| Verde 10 | #498205 | Gris 30 | #7a7574 |
| Verde cian | #00ad56 | Gris 20 | #69797e |
| Cian 30 | #005b70 | Gris 10 | #a0aeb2 |
| Cian 20 | #038387 |
La lista se completa con dos opciones más: Negro (#000000) y Blanco (#ffffff).
A qué elementos se aplica el color de fuente
El Color de fuente se utiliza para el título, la descripción y el icono del mosaico cuando este pertenece al conjunto Icono estándar: estos iconos se representan como texto y adoptan su color. Los iconos de tipo de archivo, aplicación, Azure y Vitextra, así como las imágenes personalizadas, conservan sus propios colores.
La descripción se muestra con una ligera transparencia, por lo que parece algo más clara que el título del mismo color.
Combinar colores
- El contraste es lo primero. El texto blanco sobre Rojo 10, Verde 20, Cian azul 10 o Gris 40 resulta fácil de leer; sobre Amarillo 10, Naranja 10 o Gris 10, utilice Negro. Los tonos base más claros -Naranja 10 y Amarillo 10- son más adecuados para texto negro; los tonos 20, 30 y 40, para texto blanco.
- Una familia de colores por panel. Los mosaicos con varios tonos de una misma familia, por ejemplo, Cian 10, 20 y 30, forman un conjunto coherente; seis colores vivos sin relación entre sí recuerdan a una carta de ajuste.
- Agrupe por color. Asigne un color a todos los vínculos de RR. HH. y otro a los de TI. Así, el panel se entiende sin encabezados.
- Énfasis para el sitio, colores predefinidos para la marca. Utilice colores de énfasis en paneles que deban integrarse en cualquier tema del sitio y colores predefinidos cuando los mosaicos deban mantener colores corporativos fijos.
📝 Nota
Los mosaicos no se adaptan automáticamente a un tema oscuro: un mosaico blanco sigue siendo blanco en una página oscura. Los colores de énfasis permiten crear fácilmente un panel que funcione con temas claros y oscuros, ya que el tema proporciona un énfasis adecuado en cada caso.
💡 Sugerencia
Una fotografía puede sustituir el color de fondo de un mosaico; consulte KB10245. Establecer una imagen de fondo para un mosaico. Los conjuntos de iconos y su comportamiento con el color de fuente se describen en KB10243. Elegir iconos para los mosaicos: conjuntos estándar, de tipos de archivo, aplicaciones, Azure y Vitextra.
Más información sobre el producto: https://vitextra.com/es/products/smart-tiles
