--- title: "Colores de los mosaicos en Smart Tiles: énfasis del tema y colores predefinidos" description: "Colores de fondo y de fuente para los mosaicos de Vitextra Smart Tiles: seis colores de énfasis que siguen el tema del sitio, 31 colores predefinidos de Fluent UI, negro y blanco, con valores exactos, comportamiento cuando el tema no define los énfasis y consejos para combinar colores." url: https://vitextra.com/es/support/kb/10043 language: es published: 2026-11-05 modified: 2026-11-07 products: - "Smart Tiles" author: "Līga Ozola" tags: ["colores Smart Tiles", "color de fondo mosaico", "color de fuente mosaico", "colores de énfasis SharePoint", "paleta Fluent UI", "espacios ContentAccent del tema", "colores de mosaicos SharePoint", "mosaicos tema oscuro", "Vitextra Smart Tiles", "colores navegación intranet"] --- # Colores de los mosaicos en Smart Tiles: énfasis del tema y colores predefinidos Colores de fondo y de fuente para los mosaicos de Vitextra Smart Tiles: seis colores de énfasis que siguen el tema del sitio, 31 colores predefinidos de Fluent UI, negro y blanco, con valores exactos, comportamiento cuando el tema no define los énfasis y consejos para combinar colores. ## 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](https://vitextra.com/es/products/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 1. Abra la página en el modo de edición y haga clic en el botón **…** del mosaico. 2. Apunte a **Color de fondo** o **Color de fuente**. 3. 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. ![El menú Color de fuente](https://static.vitextra.com/articles/10043/font-color-menu-es.png) *El menú Color de fuente* 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**. ![Los mosaicos con colores de énfasis siguen el tema del sitio](https://static.vitextra.com/articles/10043/accent-colors-es.png) *Los mosaicos con colores de énfasis siguen el tema del sitio* ❗ **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`). ![Los colores predefinidos](https://static.vitextra.com/articles/10043/predefined-colors-es.png) *Los colores predefinidos* ## 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](https://vitextra.com/es/support/kb/10245). 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](https://vitextra.com/es/support/kb/10243). Más información sobre el producto: