Зелена колірна схема сайту: 6 палітр із HEX-кодами

Зелені палітри для сайту з HEX-кодами, перевіреними на контраст парами тексту та сферами застосування — оберіть зелений, який читається і пасує бренду.

Поширені запитання

Який зелений колір найкращий для сайту?

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

Які кольори поєднуються із зеленим на сайті?

Добре працюють теплі відтінки білого й кремові (#F6F4EC), майже чорні зелені (#081C15) та один теплий акцент, наприклад бурштиновий або теракотовий. Робіть нейтральні кольори з зеленуватим відтінком, а не чисто сірими, щоб сторінка виглядала цілісно, і обмежте акцент одним кольором для дій.

Чи доступний зелений колір для тексту?

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

Що означає зелений колір у вебдизайні?

Зелений найчастіше асоціюється з природою, зростанням, здоров'ям, сталим розвитком і грошима, тому його так часто бачимо на сайтах про велнес, фінанси, енергетику та активний відпочинок. Значення змінюється залежно від відтінку: глибокий лісовий зелений сприймається як стабільний і спокійний, а лаймовий — як енергійний і сучасний. Сприймайте це як усталені уявлення, а не гарантію, і перевіряйте на власній аудиторії.

Чи варто робити кнопки із закликом до дії зеленими?

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

Чи потрібна зелена палітра для темної теми?

Не обов'язково, але темно-зелені фони самі по собі — популярне дизайнерське рішення. Якщо ви пропонуєте таку тему, не копіюйте світлу палітру: яскраві зелені, що не проходять на білому, часто чудово виглядають на майже чорному зеленому, наприклад #22C55E на #052E16 дає 6.54:1.

Коротко: для зеленого сайту використовуйте глибокий зелений, наприклад #166534 або #2D6A4F, для кнопок, посилань і заголовків, відтінений білий, наприклад #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. Свіжа м'ята (велнес, клініки, контент про здоров'я)

Роль	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.
Здоров'я та велнес: свіжа м'ята або бірюзово-зелений.
Фінанси й 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 запускаються, зростають і автоматизують роботу — усе на одній платформі.

Почати безкоштовно

Банківська картка не потрібна · Зв'язатися з відділом продажів