В этом руководстве разберём полный процесс создания цветовой системы сайта на WordPress с темой Kadence:

• как исследовать и подбирать цвета;
• почему готовых пяти цветов бренда обычно недостаточно;
• как распределить цвета по ролям Kadence;
• как проверить контраст;
• как создать светлую и тёмную палитры;
• как импортировать палитры через JSON;
• почему одного импорта JSON недостаточно;
• как привязать фон, текст, шапку, меню, кнопки и ссылки к глобальным цветам;
• как включить автоматическое переключение светлой и тёмной темы;
• как находить элементы со старыми фиксированными цветами;
• как адаптировать сторонние плагины под тёмный режим.

В качестве примера используется сайт психолога Елены Латышевой, оформленный на основе палитры Autumn Hues.

1. Что такое цветовая система сайта

Цветовая система — это не просто набор красивых HEX-кодов. Полноценная система определяет:

• основной цвет бренда;
• цвет интерактивных элементов;
• цвет при наведении;
• цвета заголовков и текста;
• второстепенные текстовые оттенки;
• цвета границ;
• основные и дополнительные фоны;
• цвета уведомлений;
• соответствующие оттенки для тёмного режима.

Хорошая палитра позволяет один раз настроить роли цветов, после чего все элементы сайта используют глобальные переменные. Например:

• все заголовки используют Strongest Text;
• основной текст использует Strong Text;
• ссылки используют Accent;
• фон сайта использует Lighter Background;
• фон карточек использует White/Offwhite.

Если позднее изменить значение глобального Accent, все связанные с ним кнопки и ссылки обновятся автоматически.

2. Почему нельзя просто загрузить пять цветов клиента

Клиент сайта выбрал палитру Autumn Hues:

#EEE2DF
#EED7C5
#C89F9C
#C97C5D
#B36A5E

Визуально это гармоничная тёплая гамма:

• пудровый;
• песочный;
• приглушённый розовый;
• светлая терракота;
• пыльная терракота.

Но в ней нет полноценной шкалы для интерфейса.

Например, нужны дополнительные цвета:

• очень тёмный для H1–H6;
• чуть более мягкий для длинного текста;
• второстепенный для дат и подписей;
• малоконтрастный для границ;
• почти белый фон карточки;
• нейтральный фон страницы;
• более тёмный hover;
• отдельные цвета уведомлений.

Поэтому исходная клиентская палитра используется как направление и основа, а затем расширяется до полноценной интерфейсной системы. Сразу покажу результат. Потом мы долго и упорно будем разбирать, как такого результата добиться. Ниже, Светлая и Темная темы сайта:

Далее сразу покажу настройки интерфейса:

3. Основные принципы подбора цветов

3.1. Разделяйте фирменные и нейтральные цвета

В подходе Refactoring UI цвета обычно делятся на три большие категории:

Primary

Цвета, формирующие характер бренда:

• кнопки;
• ссылки;
• активные элементы;
• иконки;
• выделения;
• hover-состояния.

Neutrals

Цвета, занимающие большую часть интерфейса:

• основной текст;
• заголовки;
• фоны;
• карточки;
• границы;
• разделители;
• подписи.

Supporting

Семантические и дополнительные цвета:

• успех;
• информация;
• ошибка;
• предупреждение;
• рейтинг.

Главная ошибка — заливать фирменным цветом большую часть страницы. На маленьком образце пудровый или песочный может выглядеть красиво, но на площади всего экрана он часто превращается в грязноватую или слишком насыщенную заливку.

3.2. Большую часть сайта должны занимать нейтральные цвета

На рассматриваемом сайте первоначально общий фон был задан цветом:

#EED7C5

На образце этот цвет выглядел уютным. На полном экране он превратился в большое персиковое поле. Поэтому основной фон был заменён на более нейтральный:

#F2EEEB

А #EED7C5 оставлен для отдельных выделенных блоков.

3.3. Цвета должны иметь определённую роль

Не следует использовать один оттенок случайным образом в разных местах. Пример правильной системы:

Роль	Применение
Accent	Ссылки, кнопки, активные элементы
Accent Alt	Hover и нажатие
Strongest Text	Заголовки
Strong Text	Основной текст
Medium Text	Даты, автор, подписи
Subtle Text	Границы и неактивные элементы
Subtle Background	Выделенные секции
Lighter Background	Фон сайта
White/Offwhite	Карточки и шапка

3.4. Проверяйте контраст

Согласно WCAG 2.2:

• обычный текст должен иметь контраст не менее 4.5:1;
• крупный текст — не менее 3:1;
• для повышенной доступности желательно стремиться к 7:1.

Светлая терракота может хорошо выглядеть как фон или декоративный элемент, но плохо работать как мелкая текстовая ссылка. Например, исходный цвет:

#C97C5D

недостаточно контрастен на очень светлом фоне для обычного текста. Поэтому основным акцентом светлой темы был выбран более тёмный оттенок:

#9A4C2E

Официальный стандарт: WCAG 2.2 — Contrast Minimum

4. Как устроена палитра Kadence

В актуальном интерфейсе Kadence палитра разделена на четыре смысловые группы.

Акценты

• Accent;
• Accent Alt;
• Accent Complement.

Контраст

• Strongest Text;
• Strong Text;
• Medium Text;
• Subtle Text.

Основа

• Subtle Background;
• Lighter Background;
• White/Offwhite.

Уведомления

• Success;
• Info;
• Alert;
• Warning;
• Rating.

Всего получается 15 цветов. При этом в JSON сохраняется историческая нумерация Kadence:

JSON-ключ	Роль
palette1	Accent
palette2	Accent Alt
palette3	Strongest Text
palette4	Strong Text
palette5	Medium Text
palette6	Subtle Text
palette7	Subtle Background
palette8	Lighter Background
palette9	White/Offwhite
palette10	Accent Complement
palette11	Success
palette12	Info
palette13	Alert
palette14	Warning
palette15	Rating

Обратите внимание: Accent Complement находится в palette10, а не в palette3. Официальное описание ролей: Kadence Theme Color Palette

5. Разница между Palette 1, Palette 2 и palette1

В интерфейсе Kadence есть три полных набора:

• Палитра 1;
• Палитра 2;
• Палитра 3.

Каждый такой набор содержит по 15 цветов. Внутри JSON используются ключи:

• palette1;
• palette2;
• palette3;
• и далее до palette15.

Это разные понятия. Например:

• «Палитра 2» — полный набор цветов для тёмного режима;
• palette2 внутри этого набора — только цвет Accent Alt.

В нашем проекте:

• Palette 1 — светлая тема;
• Palette 2 — тёмная тема;
• Palette 3 — резервная и не используется.

6. Светлая палитра сайта

Готовый JSON

{"palette1":{"color":"#9a4c2e"},"palette2":{"color":"#7c3827"},"palette3":{"color":"#2f2523"},"palette4":{"color":"#5e504b"},"palette5":{"color":"#796a65"},"palette6":{"color":"#afa09a"},"palette7":{"color":"#eed7c5"},"palette8":{"color":"#f2eeeb"},"palette9":{"color":"#fffcfa"},"palette10":{"color":"#c89f9c"},"palette11":{"color":"#627b5a"},"palette12":{"color":"#527591"},"palette13":{"color":"#a6432e"},"palette14":{"color":"#a97819"},"palette15":{"color":"#c58d18"}}

Расшифровка

Роль	HEX	Применение
Accent	#9A4C2E	Ссылки, кнопки, рубрики
Accent Alt	#7C3827	Hover и нажатие
Accent Complement	#C89F9C	Дополнительный розовый акцент
Strongest Text	#2F2523	H1–H6
Strong Text	#5E504B	Основной текст
Medium Text	#796A65	Автор, дата, подписи
Subtle Text	#AFA09A	Границы и разделители
Subtle Background	#EED7C5	Выделенные блоки
Lighter Background	#F2EEEB	Общий фон сайта
White/Offwhite	#FFFCFA	Статья, карточки, шапка
Success	#627B5A	Успешное действие
Info	#527591	Информационное сообщение
Alert	#A6432E	Ошибка
Warning	#A97819	Предупреждение
Rating	#C58D18	Рейтинг

7. Тёмная палитра сайта

Тёмная тема — не просто инверсия светлой. Необходимо отдельно определить:

• фон страницы;
• фон карточек;
• заголовки;
• основной текст;
• метаданные;
• границы;
• светлые акценты.

Для психологического сайта использована тёплая кофейная тема, а не холодный сине–чёрный интерфейс.

Готовый JSON

{"palette1":{"color":"#e6a07e"},"palette2":{"color":"#f2b79d"},"palette3":{"color":"#fff4ea"},"palette4":{"color":"#e7dad2"},"palette5":{"color":"#bfafa7"},"palette6":{"color":"#756761"},"palette7":{"color":"#3b302d"},"palette8":{"color":"#2d2422"},"palette9":{"color":"#211a18"},"palette10":{"color":"#d6a7a4"},"palette11":{"color":"#8fae86"},"palette12":{"color":"#8bb2d1"},"palette13":{"color":"#e07b67"},"palette14":{"color":"#d9a94a"},"palette15":{"color":"#e8c97a"}}

Расшифровка

Роль	HEX	Применение
Accent	#E6A07E	Ссылки, кнопки, рубрики
Accent Alt	#F2B79D	Hover
Accent Complement	#D6A7A4	Дополнительный розовый
Strongest Text	#FFF4EA	Заголовки
Strong Text	#E7DAD2	Основной текст
Medium Text	#BFAFA7	Автор, дата, подписи
Subtle Text	#756761	Границы
Subtle Background	#3B302D	Выделенные блоки
Lighter Background	#2D2422	Общий фон
White/Offwhite	#211A18	Статья, карточки, шапка
Success	#8FAE86	Успешное действие
Info	#8BB2D1	Информация
Alert	#E07B67	Ошибка
Warning	#D9A94A	Предупреждение
Rating	#E8C97A	Рейтинг

8. Из чего состоит JSON

Рассмотрим простой фрагмент:

{
  "palette1": {
    "color": "#9a4c2e"
  }
}

Здесь:

• palette1 — внутренний номер глобального цвета;
• color — параметр, содержащий цвет;
• #9a4c2e — значение HEX.

Полная строка содержит 15 подобных объектов:

{
  "palette1": {"color":"#9a4c2e"},
  "palette2": {"color":"#7c3827"},
  "palette3": {"color":"#2f2523"}
}

Порядок и номера имеют значение. Нельзя произвольно перемещать цвета, иначе Kadence назначит заголовкам, фонам и тексту неправильные роли.

9. Как импортировать JSON в Kadence

Откройте: WordPress → Внешний вид → Настроить → Цвета и шрифты → Цвета

Импорт светлой темы

1. Выберите «Палитра 1».
2. Нажмите значок чёрной папки.
3. Откройте вкладку «Экспорт/Импорт».
4. Вставьте JSON светлой палитры в поле импорта.
5. Нажмите кнопку «Импорт».
6. Проверьте цвета в четырёх группах.

Импорт тёмной темы

1. Выберите «Палитра 2».
2. Снова откройте чёрную папку.
3. Перейдите в «Экспорт/Импорт».
4. Вставьте JSON тёмной палитры.
5. Нажмите «Импорт».
6. Нажмите «Опубликовать».

Перед экспериментами рекомендуется экспортировать текущую палитру и сохранить резервную копию JSON.

10. Что делает и чего не делает JSON

Это принципиально важный момент. JSON создаёт набор глобальных цветов. Он не гарантирует, что каждый элемент сайта автоматически получит правильную роль. JSON сообщает Kadence:

• какой цвет является Accent;
• какой — Strongest Text;
• какой — Lighter Background;
• какой — White/Offwhite.

Но отдельная настройка может по‑прежнему использовать:

• фиксированный HEX;
• другой глобальный цвет;
• локальный цвет блока;
• цвет стороннего плагина;
• цвет Elementor;
• встроенный стиль.

Удобная аналогия:

JSON заполняет коробку с красками. После этого необходимо один раз указать, какой краской красить фон, текст, шапку и кнопки.

11. Как назначить глобальные фоны

Путь: Внешний вид → Настроить → Цвета и шрифты → Цвета → Фоны Установите:

Настройка	Глобальная роль
Фон сайта	Lighter Background
Фон содержимого	White/Offwhite
Фон названия над содержимым	Прозрачный
Перекрытие фона заголовка	Прозрачный

Это даст:

Элемент	Светлая тема	Тёмная тема
Фон сайта	#F2EEEB	#2D2422
Фон статьи	#FFFCFA	#211A18

Выбирайте глобальный цветной кружок. Не вводите HEX непосредственно в поле фона.

12. Настройка текста

Рекомендуемые назначения:

Элемент	Глобальная роль
H1–H6	Strongest Text
Основной текст	Strong Text
Автор и дата	Medium Text
Подписи	Medium Text
Плейсхолдеры	Subtle Text
Границы	Subtle Text
Рубрика статьи	Accent

Большинство стандартных элементов Kadence уже используют эту семантику автоматически. Если заголовок или текст корректно меняется при переключении Palette 1/Palette 2, дополнительная настройка не требуется.

13. Настройка ссылок

Путь: Внешний вид → Настроить → Цвета и шрифты → Цвета → Ссылки в содержимом Назначьте:

Поле	Глобальная роль
Цвет ссылки	Accent
Цвет при наведении	Accent Alt

Результат:

Режим	Ссылка	Hover
Светлый	#9A4C2E	#7C3827
Тёмный	#E6A07E	#F2B79D

14. Настройка кнопок

Для стандартных кнопок Kadence:

Настройка	Глобальная роль
Фон	Accent
Фон при наведении	Accent Alt
Текст	White/Offwhite
Текст при наведении	White/Offwhite

Почему White/Offwhite удобно использовать для текста кнопки:

• в светлой палитре это #FFFCFA;
• в тёмной палитре это #211A18.

Поэтому в светлой теме тёмная кнопка получает светлый текст, а в тёмной теме светлая кнопка — тёмный текст.

15. Настройка шапки

Откройте: Внешний вид → Настроить → Шапка

Фон основной строки

Выберите:

White/Offwhite

Результат:

• светлая тема — #FFFCFA;
• тёмная тема — #211A18.

Название сайта

Для названия:

Strongest Text

Для подписи:

Strong Text

или более мягкий:

Medium Text

Нижняя граница

Рекомендуемые параметры:

• толщина — 1 px;
• стиль — Solid;
• цвет — Subtle Text;
• прозрачность — около 25 %.

Если прозрачность недоступна, можно использовать Lighter Background.

16. Настройка меню

Для обычного меню:

Состояние	Глобальная роль
Обычный пункт	Strong Text
Hover	Accent
Активный пункт	Accent

Не следует постоянно окрашивать всё меню акцентным цветом. Акцент нужен для hover и текущей страницы. Пример меню психолога:

• Обо мне
• С чем я работаю
• Блог
• Контакты
• Записаться

Пункт «Записаться» можно оформить отдельной кнопкой:

• фон — Accent;
• hover — Accent Alt;
• текст — White/Offwhite;
• скругление — 8–10 px.

17. Включение тёмного режима

Лёгкий встроенный переключатель тёмного режима относится к Kadence Theme Kit Pro. Сначала откройте: WordPress → Внешний вид → Kadence Включите модуль:

Color Palette Switch / Dark Mode

Затем откройте: Внешний вид → Настроить → Общие → Color Switch (Dark Mode) Установите:

Настройка	Значение
Enable Color Palette Switch	Да
Default Color Palette	Light
Light Palette	Palette 1
Dark Color Palette	Palette 2
OS Aware	По необходимости
Different Logo for Dark Mode	По необходимости

Переключатель можно:

• добавить в Header Builder;
• добавить в Footer Builder;
• вывести как плавающую кнопку.

Официальное руководство: Kadence Color Palette Switch При включении тёмного режима Kadence добавляет к <body> класс:

color-switch-dark

Благодаря этому сторонние элементы можно адаптировать через CSS:

body.color-switch-dark .custom-element {
    color: var(--global-palette3);
}

18. Как проверить правильность настройки

После настройки выполните тест:

1. Откройте Customizer.
2. Переключите Palette 1 на Palette 2.
3. Проверьте фон, текст, шапку, меню и кнопки.
4. Опубликуйте изменения.
5. Откройте сайт в приватной вкладке.
6. Переключите кнопку светлой/тёмной темы.

Если элемент меняется автоматически, он привязан правильно. Если цвет не меняется, возможны причины:

• введён фиксированный HEX;
• цвет задан в редакторе блока;
• используется локальный цвет Elementor;
• используется Background Overlay;
• цвет задаёт сторонний плагин;
• старый CSS находится в кеше.

19. Как удалить старые цвета внутри отдельных страниц

На тестовой странице старый песочный цвет продолжал отображаться после изменения глобального фона. Причина: цвет был задан непосредственно в блоке страницы. Порядок исправления:

1. Открыть Страницы → Все страницы.
2. Выбрать нужную страницу.
3. Нажать «Изменить».
4. Открыть список блоков.
5. Найти внешний блок hero-секции:

• Row Layout;
• Section;
• Container;
• Group.

6. Открыть Блок → Стиль/Дизайн → Фон.
7. Удалить фиксированный HEX.
8. Выбрать Lighter Background.
9. Проверить Background Overlay.
10. Сделать перекрытие прозрачным.

Hero-блок можно связать так:

Элемент	Глобальная роль
Фон hero	Lighter Background
Заголовок	Strongest Text
Описание	Strong Text
Кнопка	Accent
Hover кнопки	Accent Alt
Текст кнопки	White/Offwhite

20. Макеты страниц Kadence

Макет страницы

Используется для обычных страниц:

• «Обо мне»;
• «Контакты»;
• «Услуги».

Рекомендации:

• без боковой колонки;
• широкое содержимое;
• отдельные секции собирать блоками Kadence.

Макет одиночной записи

Используется для статьи блога. Рекомендации:

• основная колонка — 70–72 %;
• правая колонка с оглавлением — 28–30 %;
• фон сайта — Lighter Background;
• фон статьи — White/Offwhite;
• внутренние отступы — около 48 px;
• внешние вертикальные отступы — 48–64 px.

Макет архива

Используется для списка статей. Пока публикаций мало:

• одна колонка;
• без боковой панели;
• карточки White/Offwhite;
• фон страницы Lighter Background;
• обложка;
• краткое описание;
• ссылка «Читать далее».

Трёхколоночная сетка при одной статье создаёт огромное пустое пространство.

21. Настройка плагина Was This Helpful

В проекте использовался плагин Was This Helpful от HasThemes. Он имеет собственные настройки цветов и не использует глобальные роли Kadence автоматически.

Светлая версия плашки

Рекомендуемые значения:

Поле плагина	HEX
Container Background Color	#F2EEEB
Container Border Color	#DED5D1
Positive Button Background	#9A4C2E
Positive Button Border	#9A4C2E
Negative Button Background	#6B5D58
Negative Button Border	#6B5D58
Text Button Color	#FFFCFA
Feedback Text Color	#2F2523
Feedback Inner Text Color	#5E504B
Feedback Box Background	#FFFCFA
Feedback Box Border	#AFA09A
Submit Button Text	#FFFCFA
Submit Button Background	#9A4C2E
Submit Button Border	#9A4C2E

Почему кнопка «Нет» не красная

Ответ «Нет» не является ошибкой или опасным действием. Красная кнопка создаёт лишнее напряжение. Поэтому используется нейтральный серо–коричневый:

#6B5D58

CSS для заголовка в тёмной теме

Плагин сохраняет светлый фон плашки, а заголовок может унаследовать светлый цвет тёмной темы. В результате текст становится почти невидимым. Реальная разметка плагина содержит класс с опечаткой:

<div id="feedback-container" class="htwth-helpful-wraper">

Обратите внимание: используется wraper с одной буквой p. Поэтому правильный CSS:

body.color-switch-dark
#feedback-container.htwth-helpful-wraper
.htwth-heading > h4 {
    color: #2f2523 !important;
    -webkit-text-fill-color: #2f2523 !important;
}

Разместить CSS рекомендуется здесь: Внешний вид → Настроить → Дополнительные стили Это правило:

• действует только в тёмном режиме;
• затрагивает только заголовок плашки;
• не меняет кнопки;
• не меняет форму;
• не влияет на светлую тему.

Более полная тёмная адаптация плагина

Если требуется полностью тёмная плашка:

body.color-switch-dark
#feedback-container.htwth-helpful-wraper {
    background-color: var(--global-palette9) !important;
    border-color: var(--global-palette6) !important;
}

body.color-switch-dark
#feedback-container.htwth-helpful-wraper
.htwth-heading > h4 {
    color: var(--global-palette3) !important;
}

body.color-switch-dark
#feedback-container.htwth-helpful-wraper
.button-positive {
    background-color: var(--global-palette1) !important;
    border-color: var(--global-palette1) !important;
    color: var(--global-palette9) !important;
}

body.color-switch-dark
#feedback-container.htwth-helpful-wraper
.button-negative {
    background-color: var(--global-palette6) !important;
    border-color: var(--global-palette6) !important;
    color: var(--global-palette3) !important;
}

body.color-switch-dark
#feedback-container.htwth-helpful-wraper textarea {
    background-color: var(--global-palette8) !important;
    border-color: var(--global-palette6) !important;
    color: var(--global-palette4) !important;
}

Не используйте этот полный вариант, если цвета плагина уже настроены вручную и требуется изменить только заголовок.

22. Как устроены CSS-переменные Kadence

Основные переменные:

var(--global-palette1)
var(--global-palette2)
var(--global-palette3)
var(--global-palette4)
var(--global-palette5)
var(--global-palette6)
var(--global-palette7)
var(--global-palette8)
var(--global-palette9)

Пример:

.custom-button {
    background-color: var(--global-palette1);
    color: var(--global-palette9);
}

В светлой теме это даст:

• фон #9A4C2E;
• текст #FFFCFA.

В тёмной теме:

• фон #E6A07E;
• текст #211A18.

CSS остаётся один, а значения переменных меняются вместе с палитрой.

23. Кеширование

Если CSS или цвета не обновились:

1. нажмите «Опубликовать»;
2. очистите кеш FlyingPress;
3. очистите серверный кеш;
4. очистите CDN-кеш, если используется;
5. откройте страницу в приватной вкладке;
6. выполните жёсткое обновление страницы.

Для диагностики откройте инструменты разработчика и проверьте Computed Style. Например:

rgb(47, 37, 35)

соответствует:

#2F2523

Если правило присутствует в CSS, но не применяется, проверьте точное имя класса в HTML. Именно так была обнаружена опечатка htwth-helpful-wraper.

24. Финальный чек-лист

Палитры

• [ ] Palette 1 содержит светлый JSON.
• [ ] Palette 2 содержит тёмный JSON.
• [ ] Dark Color Palette назначена на Palette 2.
• [ ] Palette 3 не используется.

Фоны

• [ ] Фон сайта — Lighter Background.
• [ ] Фон содержимого — White/Offwhite.
• [ ] Фон шапки — White/Offwhite.
• [ ] Старые фиксированные HEX удалены из блоков.

Текст

• [ ] H1–H6 используют Strongest Text.
• [ ] Основной текст использует Strong Text.
• [ ] Метаданные используют Medium Text.
• [ ] Границы используют Subtle Text.

Интерактивные элементы

• [ ] Ссылки используют Accent.
• [ ] Hover ссылок использует Accent Alt.
• [ ] Кнопки используют Accent.
• [ ] Hover кнопок использует Accent Alt.
• [ ] Текст кнопок использует White/Offwhite.

Шапка

• [ ] Название использует Strongest Text.
• [ ] Подпись использует Strong или Medium Text.
• [ ] Меню использует Strong Text.
• [ ] Hover меню использует Accent.
• [ ] Нижняя граница — 1 px.

Тёмный режим

• [ ] Переключатель работает.
• [ ] Фон и карточки меняются.
• [ ] Заголовки остаются читаемыми.
• [ ] Ссылки имеют достаточный контраст.
• [ ] Сторонние плагины проверены отдельно.

25. Главный принцип

Не вводите HEX повторно в каждой настройке. Правильная модель работы:

1. Создать глобальные палитры.
2. Назначить каждому цвету понятную роль.
3. Привязать элементы сайта к глобальным кружкам.
4. Использовать CSS-переменные для сторонних элементов.
5. Оставлять фиксированные HEX только там, где плагин не умеет работать с глобальными цветами.
6. Проверять обе темы после каждого заметного изменения.

Именно такая система позволяет поддерживать светлую и тёмную тему без двойной ручной перекраски всего сайта.