Зелёная цветовая схема сайта: 6 палитр с HEX-кодами

Зелёные палитры для сайта с HEX-кодами, проверенными по контрасту парами для текста и примерами применения: выберите читаемый зелёный под свой бренд.

Частые вопросы

Какой зелёный лучше всего подходит для сайта?

Единственного лучшего зелёного нет, но самая безопасная отправная точка — глубокий, слегка приглушённый зелёный вроде #166534 или #2D6A4F. Оба проходят порог WCAG AA 4.5:1 для текста на белом фоне (7.13:1 и 6.39:1), поэтому подходят для кнопок, ссылок и заголовков. Яркие зелёные вроде #22C55E на белом не проходят (2.28:1), их лучше оставить для иконок или тёмных фонов.

Какие цвета хорошо сочетаются с зелёным на сайте?

Хорошо работают тёплые off-white и кремовые оттенки (#F6F4EC), почти чёрные зелёные (#081C15) и один тёплый акцент, например янтарный или терракотовый. Делайте нейтральные цвета с зелёным подтоном, а не чисто серыми, чтобы страница выглядела цельно, и ограничьте акцент одним цветом для действий.

Подходит ли зелёный для текста с точки зрения доступности?

Тёмные зелёные подходят, светлые и средние часто нет. WCAG 2 AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса. Проверяйте каждую пару, а не оценивайте на глаз: средние зелёные вроде #40916C (3.83:1 на белом) находятся в зоне, где проходят только для крупного текста.

Что зелёный цвет означает в веб-дизайне?

Чаще всего зелёный ассоциируется с природой, ростом, здоровьем, экологичностью и деньгами, поэтому его так часто используют на сайтах о wellness, финансах, энергетике и активном отдыхе. Смысл меняется с оттенком: глубокий лесной зелёный читается как солидный и спокойный, а лаймовый — как энергичный и современный. Считайте это конвенциями, а не гарантиями, и проверяйте на своей аудитории.

Стоит ли использовать зелёный для кнопок призыва к действию?

Можно, если кнопка выделяется на странице, а её подпись проходит проверку контраста. Тёмно-зелёная кнопка с белым текстом хорошо смотрится на светлых страницах. Если страница в основном зелёная, кнопка тёплого акцентного цвета часто выделяется лучше. О том, как принять решение, читайте в нашем руководстве по цветовым схемам, повышающим конверсию.

Нужна ли зелёная палитра для тёмной темы?

Не обязательно, но тёмно-зелёные фоны и сами по себе популярны в дизайне. Если вы делаете такую тему, не используйте просто светлую палитру: яркие зелёные, которые не проходят на белом, часто отлично работают на почти чёрном зелёном — например, #22C55E на #052E16 даёт 6.54:1.

Коротко: для зелёного сайта берите глубокий зелёный вроде #166534 или #2D6A4F для кнопок, ссылок и заголовков, тонированный off-white вроде #F6F4EC или #F0FDF4 для фона, а яркие зелёные вроде #22C55E оставьте только для тёмных фонов или декора. Тёмные зелёные на светлом фоне проходят порог WCAG AA 4.5:1 для текста. Яркие зелёные на белом — нет (#22C55E на белом даёт 2.28:1).

Ниже шесть зелёных палитр с HEX-значениями, измеренными коэффициентами контраста и описанием сайтов, для которых каждая подходит. Все коэффициенты рассчитаны по формуле относительной яркости WCAG, а любую пару можно проверить самостоятельно в проверке цветового контраста.

Почему с зелёным на экране сложно

Зелёный находится в середине диапазона яркости. Средний зелёный выглядит насыщенно, но на белом он часто слишком светлый для текста, а на чёрном — слишком тёмный. Поэтому зелёный, который отлично смотрится в логотипе, может не подойти для кнопки.

Практическое правило: выбирайте зелёный по коэффициенту контраста, а не по тому, как он выглядит на образце. Для обычного текста стремитесь к 4.5:1 и выше. Для крупного текста (примерно от 24px обычного или 19px жирного начертания) и элементов интерфейса, таких как границы полей и иконки, минимум — 3:1.

Шесть зелёных палитр для сайта с HEX-кодами

В каждой палитре указаны фон, цвет текста, акцент для кнопок или ссылок и коэффициент контраста для важной пары.

1. Лесной и кремовый (издания, активный отдых, еда)

Роль	HEX	Пара и коэффициент
Фон	#F6F4EC
Текст и заголовки	#1B4332	на фоне: 10.06:1
Кнопка / ссылка	#2D6A4F	белый текст на ней: 6.39:1
Мягкая панель	#95D5B2	текст #1B4332 на ней: 6.56:1

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

2. Свежая мята (wellness, клиники, контент о здоровье)

Роль	HEX	Пара и коэффициент
Фон	#F0FDF4
Текст и заголовки	#14532D	на фоне: 8.70:1
Кнопка	#15803D	белый текст на ней: 5.02:1
Тёмный блок	#052E16	текст #DCFCE7 на нём: 13.57:1

Светлая и чистая. Зелёный кнопки лишь немного превышает порог AA, поэтому подписи на кнопках лучше делать обычной или более жирной толщины и не размещать кнопку на тонированных панелях.

3. Шалфей и олива (студии, интерьеры, хендмейд)

Роль	HEX	Пара и коэффициент
Фон	#E9F5DB
Текст и заголовки	#31572C	на фоне: 7.33:1
Кнопка	#4F772D	белый текст на ней: 5.24:1
Выделение	#90A955	текст #132A13 на нём: 5.84:1

Приглушённая, природная палитра. Хорошо подходит для портфолио и бутиковых брендов, где нужен зелёный, но без крика.

4. Глубокая зелёная тёмная тема (финтех, SaaS, премиум)

Роль	HEX	Пара и коэффициент
Фон	#081C15
Текст	#B7E4C7	на фоне: 12.58:1
Акцент / ссылки	#40916C	на фоне: 4.62:1
Карточка	#1B4332	текст #95D5B2 на ней: 6.56:1

На тёмных фонах средние зелёные работают как акценты. Обратите внимание: #40916C проходит на #081C15, но не проходит на белом (3.83:1), поэтому не используйте его в светлых секциях.

5. Неоновый лайм на тёмно-зелёном (события, авторы, молодёжные бренды)

Роль	HEX	Пара и коэффициент
Фон	#1A2E05
Заголовок / кнопка	#A3E635	на фоне: 9.69:1
Альтернативный яркий	#22C55E	на #052E16: 6.54:1

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

6. Бирюзово-зелёный (SaaS, health tech, экологичность)

Роль	HEX	Пара и коэффициент
Фон	#CCFBF1
Текст и заголовки	#134E4A	на фоне: 8.41:1
Кнопка	#0F766E	белый текст на ней: 5.47:1

Склоняется к сине-зелёному, поэтому выглядит более технологично и менее «природно». Хороший выбор, когда нужен зелёный без органического ощущения.

Зелёные оттенки, которые не проходят, и чем их заменить

Не проходит	Пара	Коэффициент	Чем заменить
Ярко-зелёная кнопка	#22C55E с белым текстом	2.28:1	#15803D с белым текстом (5.02:1)
Лаймовая ссылка на белом	#65A30D на белом	3.09:1	#4D7C0F на белом (4.99:1)
Средний зелёный для основного текста	#40916C на белом	3.83:1	#2D6A4F на белом (6.39:1)

Средние оттенки всё же проходят планку 3:1, так что их можно использовать для крупных заголовков, иконок и границ, но не для абзацев текста и мелких ссылок. Подробнее о типичных ошибках — в материале примеры плохого цветового контраста, а о сильных сочетаниях в целом — в руководстве контрастные цветовые палитры.

Как собрать собственную зелёную палитру: пошагово

Сначала определите роль зелёного. Это цвет бренда, цвет действия или просто акцент? Зелёный только для бренда может быть любого оттенка. Зелёный для действий обязан проходить проверку контраста.
Выберите тёмный якорь. Начните с зелёного в районе от #14532D до #2D6A4F. Он станет цветом заголовков, ссылок и кнопок на светлом фоне.
Тонируйте фон. Используйте очень светлый зелёный или тёплый кремовый вместо чисто белого, например #F0FDF4 или #F6F4EC. После тонирования перепроверьте контраст текста.
Добавьте один акцент, который не зелёный. Янтарный или терракотовый на фоне зелёного отделяет кнопки на страницах с большим количеством зелёного. Проверьте контраст подписи: например, текст #92400E на #FEF3C7 даёт 6.37:1.
Проверьте каждую пару «текст на фоне». Прогоните через проверку заголовки, основной текст, ссылки, кнопки и плейсхолдеры. Всё, что ниже 4.5:1 для основного размера текста, нужно сделать темнее или светлее.
Проверьте состояния наведения и отключения. Оттенки при наведении часто сдвигаются в зону, где контраст не проходит.
Сохраните палитру как именованные токены. Названия переменных вроде brand-900, brand-700 и brand-100 позволяют менять цвета потом одной строкой. Идею шкалы оттенков показывает наше руководство по цветам Tailwind CSS, и несколько HEX-кодов выше взяты из шкалы такого типа.

Какой зелёный для какого сайта

Экология, энергетика, некоммерческие организации: лесной с кремовым или шалфей. Настроение можно увидеть в нашем шаблоне Greenfield Renewables.
Здоровье и wellness: свежая мята или бирюзово-зелёный.
Финансы и SaaS: глубокая зелёная тёмная тема с одним ярким акцентом.
Еда, ферма, сад: лесной с кремовым и тёплым акцентом.
Страницы авторов и событий: неоновый лайм на тёмно-зелёном, только для заголовков и одной кнопки.

Чек-лист, который можно скопировать перед публикацией

[ ] Контраст основного текста с фоном — не менее 4.5:1
[ ] Крупный текст и иконки — не менее 3:1
[ ] Подписи на кнопках проходят 4.5:1 относительно заливки кнопки
[ ] Ссылки отличаются от основного текста не только цветом (подойдёт подчёркивание)
[ ] Яркие зелёные встречаются только на тёмных фонах или как декор
[ ] Не больше одного акцентного цвета, кроме зелёного
[ ] Тёмные секции используют собственные проверенные пары, а не переработанные пары из светлой темы
[ ] Палитра сохранена как именованные токены, чтобы её можно было менять в одном месте

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

Применяем зелёную палитру на настоящем сайте

Когда HEX-коды готовы, их нужно где-то применить. Бесплатный тариф We.Inc позволяет опубликовать до трёх сайтов из готовых шаблонов; AI-конструктор, который создаёт черновик сайта по описанию, доступен на тарифе Starter за $20 в месяц. Зарегистрируйтесь здесь, вставьте HEX-коды фона, текста и кнопок в стили сайта, а затем проведите те же проверки контраста на опубликованных страницах.

Начать бесплатно · Банковская карта не нужна

Umair Ali Sadaqat

Основатель We.Inc

Умайр — основатель We.Inc. Он пишет о создании сайтов с помощью ИИ, агентствах и ведении бизнеса веб-студии.

Готовы создать что-то стоящее?

Присоединяйтесь к 15,000+ компаний, которые с We.Inc запускаются, растут и автоматизируют работу — всё на одной платформе.

Начать бесплатно

Банковская карта не нужна · Связаться с отделом продаж