--- title: "Цвета плиток в Smart Tiles: акцентные цвета темы и предопределённые цвета" description: "Цвета фона и шрифта, доступные для плиток в веб-части Vitextra Smart Tiles: шесть акцентных цветов, следующих теме сайта, палитра из 31 предопределённого цвета Fluent UI, чёрный и белый — с точными значениями, поведением акцентных цветов на сайтах, тема которых их не определяет, и рекомендациями по сочетанию цветов." url: https://vitextra.com/ru/support/kb/10043 language: ru published: 2021-11-01 modified: 2026-10-10 products: - "Smart Tiles" author: "Lidija Reising" tags: ["цвета Smart Tiles", "цвет фона плитки", "цвет шрифта плитки", "акцентные цвета темы SharePoint", "палитра цветов Fluent UI", "слоты темы ContentAccent", "цвета плиток SharePoint", "плитки в тёмной теме", "Vitextra Smart Tiles", "цвета навигации интранета"] --- # Цвета плиток в Smart Tiles: акцентные цвета темы и предопределённые цвета Цвета фона и шрифта, доступные для плиток в веб-части Vitextra Smart Tiles: шесть акцентных цветов, следующих теме сайта, палитра из 31 предопределённого цвета Fluent UI, чёрный и белый — с точными значениями, поведением акцентных цветов на сайтах, тема которых их не определяет, и рекомендациями по сочетанию цветов. ## Введение Цвет — самый быстрый способ сгруппировать плитки и сделать панель частью сайта, а не дополнением к нему. У каждой плитки в [Smart Tiles](https://vitextra.com/ru/products/smart-tiles) есть **Цвет фона** и **Цвет шрифта**, и оба выбираются из одной палитры: шесть акцентных цветов, следующих теме сайта, тридцать один предопределённый цвет, чёрный и белый. В этой статье перечислены цвета, объяснено поведение акцентных цветов и предложены способы их сочетания. ## Выбор цвета 1. Откройте страницу в режиме редактирования и нажмите кнопку **…** плитки. 2. Наведите указатель на **Цвет фона** или **Цвет шрифта**. 3. Нажмите на цвет в подменю. Рядом с каждым пунктом показан кружок его цвета; текущий цвет отмечен заполненным флажком. Изменение применяется сразу. Оба меню содержат одни и те же цвета, поэтому любой цвет можно использовать для фона одной плитки и для текста другой. ![Меню «Цвет шрифта»](https://static.vitextra.com/articles/10043/font-color-menu-ru.png) *Меню «Цвет шрифта»* Новая плитка начинает с цвета фона **Акцент 1** и цвета шрифта **Белый**. ## Акцентные цвета **Акцент 1** – **Акцент 6** — не фиксированные цвета. Они ссылаются на шесть акцентных цветов содержимого темы, применённой к сайту, поэтому плитка с акцентным цветом меняется вместе с темой: переключите сайт с синей темы на зелёную — и каждая плитка с цветом «Акцент 1» станет зелёной. Панели, построенные на акцентных цветах, поэтому выглядят уместно на любом сайте, куда их копируют, и переживают ребрендинг без редактирования. Откуда берутся шесть акцентных цветов: - **Современные темы**, созданные в Центре администрирования SharePoint или с помощью генератора тем, определяют все шесть акцентов содержимого; у каждой темы свой набор. - **Пользовательские темы** могут оставлять часть или все акценты содержимого неопределёнными. Акцент, который тема не определяет, заменяется основным акцентным цветом темы — на таких сайтах **Акцент 2** – **Акцент 6**, как правило, дают тот же цвет, что и **Акцент 1**. ![Плитки с акцентными цветами следуют теме сайта](https://static.vitextra.com/articles/10043/accent-colors-ru.png) *Плитки с акцентными цветами следуют теме сайта* ❗ **Важно** Поскольку акцентные цвета зависят от темы, панель, экспортированная с одного сайта, на другом может выглядеть иначе. Если важны точные цвета — например, фирменные, — используйте вместо них предопределённые цвета. ## Предопределённые цвета Предопределённые цвета — это общая цветовая палитра Fluent UI, дизайн-системы Microsoft 365. Они не меняются вместе с темой. Число после названия — оттенок из палитры Fluent UI: 10 — базовый оттенок, 20 и 30 — всё более тёмные, 40 — ещё темнее. |::Название::|::Значение::|::Название::|::Значение::| |:---|:---|:---|:---| |Розово-красный|`#750b1c`|Голубой 10|`#00b7c3`| |Красный 20|`#a4262c`|Голубовато-синий 20|`#004e8c`| |Красный 10|`#d13438`|Голубовато-синий 10|`#0078d4`| |Красно-оранжевый|`#da3b01`|Синий 10|`#4f6bed`| |Оранжевый 30|`#8e562e`|Сине-пурпурный 30|`#5c2e91`| |Оранжевый 20|`#ca5010`|Сине-пурпурный 20|`#8764b8`| |Оранжевый 10|`#ffaa44`|Сине-пурпурный 10|`#8378de`| |Желтый 10|`#fce100`|Фиолетовый 20|`#881798`| |Оранжево-жёлтый 20|`#986f0b`|Фиолетовый 10|`#c239b3`| |Оранжево-жёлтый 10|`#c19c00`|Пурпурно-розовый 20|`#9b0062`| |Желто-зеленый|`#8cbd18`|Пурпурно-розовый 10|`#e3008c`| |Зеленый 20|`#0b6a0b`|Серый 40|`#393939`| |Зеленый 10|`#498205`|Серый 30|`#7a7574`| |Зелёно-голубой|`#00ad56`|Серый 20|`#69797e`| |Голубой 30|`#005b70`|Серый 10|`#a0aeb2`| |Голубой 20|`#038387`||| Список дополняют ещё два пункта: **Черный** (`#000000`) и **Белый** (`#ffffff`). ![Предопределённые цвета](https://static.vitextra.com/articles/10043/predefined-colors-ru.png) *Предопределённые цвета* ## На что влияет цвет шрифта **Цвет шрифта** используется для заголовка, описания и значка плитки, если значок взят из набора **Стандартный значок**, — такие значки рисуются как текст и принимают цвет текста. Значки типов файлов, приложений, Azure и Vitextra, а также собственные изображения сохраняют свои цвета. Описание рисуется слегка прозрачным, поэтому в том же цвете оно выглядит немного светлее заголовка. ## Сочетание цветов - **Контраст прежде всего.** Белый текст на «Красный 10», «Зеленый 20», «Голубовато-синий 10» или любом сером читается легко; на «Желтый 10», «Оранжевый 10» или «Серый 10» используйте «Черный». Более светлые базовые оттенки — «Оранжевый 10», «Желтый 10» — лучше подходят для чёрного текста; оттенки 20, 30 и 40 — для белого. - **Одно семейство на панель.** Плитки в нескольких оттенках одного семейства — например, «Голубой 10», 20 и 30 — выглядят продуманно; шесть не связанных друг с другом ярких цветов выглядят как тестовая таблица. - **Группируйте по цвету.** Дайте всем ссылкам HR один цвет, а всем ссылкам ИТ — другой, и панель объяснит себя без заголовков. - **Акцентные цвета для сайта, предопределённые для бренда.** Используйте акцентные цвета для панелей, которые должны сливаться с любой темой сайта, и предопределённые цвета, когда плитки несут фиксированные фирменные цвета. 📝 **Заметка** Плитки сами по себе не меняются в тёмной теме: плитка цвета «Белый» остаётся белой на тёмной странице. Акцентные цвета — простой путь к панели, которая работает и в светлой, и в тёмной теме, поскольку тема в каждом случае подставляет подходящий акцент. 💡 **Совет** Фотография может заменить цвет фона плитки; см. статью [KB10245. Настройка фонового изображения плитки](https://vitextra.com/ru/support/kb/10245). Наборы значков и их реакция на цвет шрифта описаны в статье [KB10243. Выбор значков для плиток](https://vitextra.com/ru/support/kb/10243). Подробнее о продукте: