На сайті кожен колір має свою роботу: фон, текст, кнопки, посилання й повідомлення. Ці 12 палітр створені саме для цього: світлий чи темний фон, читабельний колір тексту й акцент для кнопок. Копіюйте HEX-коди прямо в CSS або в конструктор сайтів.
Чистий синій SaaS
Майже білий фон, дуже темно-синій текст і кнопки яскраво-синього кольору.
Стримана корпоративна
Для юридичних фірм, консалтингу чи промислових компаній.
Теплий інтернет-магазин
Помаранчевий виділяє кнопки покупки на теплому тлі.
Темна тема із зеленим
Багатошарові темні фони, світлий текст і зелений акцент для дій.
Природна й органічна
Для магазинів натуральних продуктів, фермерських господарств чи велнесу.
Дружня пастель
Привітна; темний синьо-сірий забезпечує читабельний текст.
Редакційна з червоним
Для блогів, журналів і медіа; червоний позначає посилання й заголовки.
Технологічний фіолетовий
Поширена в цифрових продуктах, онлайн-курсах та ШІ-інструментах.
Бірюзовий і кораловий
Два доповнювальні акценти: один для кнопок, інший для повідомлень.
Темна розкіш
Для готелів, ресторанів чи преміум-брендів, де головне — фото.
Здоров’я і велнес
Чиста й спокійна; добра для клінік і терапій.
Пісочний і синьо-зелений
Тепла й водночас серйозна; для туризму, нерухомості чи кав’ярень.
Натисніть колір, щоб скопіювати його HEX-код. Іконка олівця відкриває палітру в редакторі, де її можна змінити.
Застосуйте правило 60-30-10
Домінантний колір (зазвичай фон) використовуйте приблизно на 60 % сторінки, допоміжний — на 30 % (секції, картки, шапка), а акцент — на решті 10 %. Акцент варто залишити для кнопок і посилань, щоб користувач знав, куди натискати.
Перевірте контраст тексту
Рекомендації доступності WCAG вимагають мінімального контрасту 4,5:1 для звичайного тексту. Світло-сірий на білому виглядає елегантно, але його важко читати, особливо на телефоні під сонцем. Перед публікацією скористайтеся перевіркою контрасту.
Визначте кольори для станів і повідомлень
Крім палітри бренду, сайту потрібні кольори для помилок (червоний), успіху (зелений) і попереджень (жовтий чи помаранчевий). Оберіть версії, що пасують до вашої палітри, і завжди використовуйте їх однаково у формах і повідомленнях.