Перейти до вмісту
1.6k

1 травня 2026 р.

необруталізмпалітри кольорівдизайнвеб-дизайнcss

20 необруталістських палітр кольорів із hex-кодами (готові до копіювання)

Не можете підібрати кольори для необруталістського дизайну? Ось 20 перевірених у бою палітр кольорів із точними hex-кодами, які можна копіювати та вставляти. Від класичного жовтого з чорним до сміливих поєднань лаймового й рожевого.

DA

Dov Azencot

@DovAzencot
Поділитися в X

Чесно кажучи: підбір кольорів для необруталістського дизайну може вибити з колії.


Ви знаєте, що потрібні сміливі контрастні кольори. Але які саме сміливі кольори? Скільки їх? І які поєднуються між собою, не перетворюючись на садочкову виробку, що пішла не так?


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


Жодної теорії. Жодних лекцій про колірне коло. Просто копіюйте hex-коди й беріться до роботи.


Розбираймося.



Як використовувати ці палітри

Перш ніж перейти до кольорів, ось як варто думати про необруталістські колірні системи:


Структура необруталістської палітри:

  • База: чорний або дуже темний (для рамок, тексту, тіней)
  • Фон: білий або дуже світлий (для карток, основного фону)
  • Основний: ваш головний акцентний колір (CTA, заголовки, акценти)
  • Додатковий: допоміжний акцент (зазвичай 1-2 додаткові кольори)
  • Акценти: додаткові спалахи кольору (за бажанням, дозовано)

Ключові принципи:

  1. Високий контраст обов’язковий - чорний і білий мають бути опорою палітри
  2. Насиченість важливіша за стриманість - жодних пастельних і приглушених тонів (крім фонів)
  3. Обмежуйте акцентні кольори - максимум 1-3 яскраві акценти
  4. Не бійтеся сміливості - якщо відчувається надто безпечно, значить, недостатньо брутально

А тепер — до палітр.



Класичні необруталістські палітри

Це позачасові поєднання, що визначають естетику.


1. Electric Yellow

Первісна необруталістська палітра. Якщо освоїте лише одну — освоюйте цю.

--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Технопродукти й SaaS
  • Усе, чому потрібні увага та енергія
  • Ваш перший необруталістський проєкт

Чому працює: Жовтий на білому дає максимальну помітність. Чорні рамки й текст забезпечують структуру. Це палітра Neobrutalism за замовчуванням не просто так — зіпсувати її майже неможливо.


Приклад використання:

// Primary CTA button
<button className="bg-[#FFDB33] text-[#000000] border-4 border-[#000000]
                   shadow-[6px_6px_0_0_#000000] px-8 py-4 font-bold">
  Get Started
</button>

Приклад із реального світу: Gumroad використовує варіацію цієї палітри в усьому своєму інтерфейсі.



2. Hot Pink Punch

Для брендів із характером і енергією.

--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #00F0FF
--border: #000000
--card: #FFFFFF
--accent: #FFDB33

Коли використовувати:

  • Креативні агенції
  • Модні та стритвір-бренди
  • Продукти для молоді
  • Усе антикорпоративне

Чому працює: Яскраво-рожевий вимагає уваги. У парі з блакитним створює ретрофутуристичний настрій. Жовтий акцент додає третій вимір, не перевантажуючи.


Стратегія кольорових блоків:

// Three-color feature grid
<div className="grid grid-cols-3 gap-6">
  <div className="bg-[#FF006E] border-4 border-[#000000] p-8">
    <h3 className="text-white">Feature 1</h3>
  </div>
  <div className="bg-[#00F0FF] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 2</h3>
  </div>
  <div className="bg-[#FFDB33] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 3</h3>
  </div>
</div>


3. Cyber Lime

Максимальна помітність із цифровим характером.

--background: #FFFFFF
--foreground: #000000
--primary: #AAFC3D
--primary-hover: #97F819
--secondary: #FF4FD8
--border: #000000
--accent: #00F0FF

Коли використовувати:

  • Геймінг і кіберспорт
  • Техностартапи
  • Інструменти для розробників
  • Усе футуристичне або передусім цифрове

Чому працює: Лаймово-зелений кричить «цифрове», а пурпурно-рожевий дає контраст. Ця палітра відчувається як вікно термінала, схрещене з постером із рейву.


Приклад:

// Hero section with lime background
<section className="bg-[#AAFC3D] min-h-screen">
  <h1 className="text-8xl font-black text-[#000000]">
    LEVEL UP
  </h1>
  <button className="bg-[#FF4FD8] border-4 border-[#000000]
                     shadow-[8px_8px_0_0_#000000]">
    Start Playing
  </button>
</section>


4. Brutal Monochrome

Коли потрібен необруталізм без веселки.

--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666

Коли використовувати:

  • Мінімалістичний необруталізм (так, такий буває)
  • Портфоліо з архітектури та дизайну
  • Коли колір відволікав би від контенту
  • Професійні контексти, яким потрібен характер

Чому працює: Доводить, що необруталізм — не про колір, а про структуру. Товсті рамки, жорсткі тіні та сміливу типографіку несуть естетику без жодного відтінку.


Порада профі: Додайте один стриманий акцент для станів наведення:

--hover-accent: #FFDB33  /* Yellow appears only on interaction */


Яскраві та енергійні палітри

Для брендів, які не шепочуть.


5. Sunset Riot

Тепло зустрічається з бунтом.

--background: #FCFFE7
--foreground: #000000
--primary: #EA435F
--primary-hover: #D00000
--secondary: #FFDA5C
--border: #000000
--accent: #CEEBFC
--card: #FFFFFF

Коли використовувати:

  • Бренди їжі та напоїв
  • Сайти заходів і фестивалів
  • Лайфстайл- і велнес-продукти
  • Усе, що має відчуватися теплим і привітним

Чому працює: Червоний і жовтий створюють енергію та апетит (буквально — це «харчові» кольори). Світло-блакитний акцент охолоджує рівно настільки, наскільки потрібно.


Стратегія фону: Кремовий фон (#FCFFE7) м’якший за чистий білий, завдяки чому червоні та жовті виділяються, не стаючи різкими.



6. Lavender Dream

Необруталізм зустрічається з примхою.

--background: #F9F5F2
--foreground: #000000
--primary: #C4A1FF
--primary-hover: #9678FF
--secondary: #E7F193
--accent: #FE91E9
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Креативні портфоліо
  • Проєкти з мистецтва та ілюстрації
  • Краса й косметика
  • Бренди для покоління Z, яким потрібна грайливість

Чому працює: Лавандово-фіолетовий сміливий, але не агресивний. У парі з лаймово-жовтим і пурпурно-рожевим він створює грайливу, майже цукеркову палітру, яка все одно зберігає необруталістську структуру.


Приклад:

// Testimonial card with lavender accent
<div className="bg-[#C4A1FF] border-4 border-[#000000] shadow-[6px_6px_0_0_#000000] p-8">
  <p className="text-black font-bold text-lg">
    "This product changed my workflow completely!"
  </p>
  <div className="bg-[#E7F193] border-2 border-[#000000] inline-block px-4 py-2 mt-4">
    <span className="font-bold text-black">Sarah K., Designer</span>
  </div>
</div>


7. Orange Burst

Висока енергія, максимум тепла.

--background: #FFFFFF
--foreground: #000000
--primary: #F07200
--primary-hover: #FF8011
--secondary: #EF8C27
--accent: #FF6B6B
--border: #000000
--muted: #FFE1C7

Коли використовувати:

  • Бренди спорту й фітнесу
  • Літні кампанії
  • Продукти про енергію та дію
  • Сторінки, насичені закликами до дії

Чому працює: Помаранчевий недовикористовують у вебдизайні, тому він миттєво вирізняється. Кілька відтінків помаранчевого створюють глибину без потреби в додаткових кольорах.



8. Forest Fresh

Землистий необруталізм — хто б міг подумати?

--background: #FFFFFF
--foreground: #000000
--primary: #599D77
--primary-hover: #39654C
--secondary: #A3D9B1
--accent: #FFE75A
--border: #000000
--card: #F9F5F2

Коли використовувати:

  • Сталі та еко-бренди
  • Здоров’я й велнес
  • Продукти для активного відпочинку та про природу
  • Коли потрібен необруталізм, що відчувається приземленим

Чому працює: Зелений не зобов’язаний бути м’яким. Ця палітра використовує насичені зелені з високим контрастом, зберігаючи брутальну естетику й водночас відчуваючись органічно.


Особливість: Кремовий фон карток (#F9F5F2) додає тепла, якого не дав би чистий білий.



Сміливі експериментальні палітри

Для дизайнерів, які хочуть розсувати межі.


9. Neon Midnight

Необруталізм у темній темі у всій красі.

--background: #0F0F0F
--foreground: #F5F5F5
--primary: #00FF88
--secondary: #FF0066
--accent: #00D4FF
--border: #F5F5F5
--card: #1A1A1A

Коли використовувати:

  • Ігрові платформи
  • Інструменти розробника та застосунки для програмування
  • Нічний режим
  • Кіберпанк-естетика

Чому працює: Неонові кольори на темному фоні створюють той самий настрій термінала й хакера. Білі рамки замість чорних перевертають усе з ніг на голову, зберігаючи контраст.


Порада щодо впровадження:

// Dark background with neon accents
<div className="bg-[#0F0F0F] min-h-screen p-8">
  <h1 className="text-[#00FF88] text-7xl font-black
                 [-webkit-text-stroke:3px_#F5F5F5]">
    GAME ON
  </h1>
  <button className="bg-[#FF0066] text-[#F5F5F5] border-4 border-[#F5F5F5]
                     shadow-[6px_6px_0_0_#00D4FF]">
    Play Now
  </button>
</div>


10. Bubblegum Chaos

Максималізм зустрічається з необруталізмом.

--background: #FFF5F8
--foreground: #000000
--primary: #FF3FE0
--secondary: #00E5FF
--accent-1: #FFE600
--accent-2: #00FF94
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Музика й розваги
  • Бренди іграшок і продукти для дітей
  • Маркетингові кампанії з коротким терміном життя
  • Коли стриманість була б помилкою

Чому працює: Чотири яскраві кольори звучать як хаос, але чорні рамки й білі картки його стримують. Це філософія необруталізму «більше означає краще», доведена до логічної межі.


Увага: Ця палітра ГУЧНА. Використовуйте її, лише якщо ваш бренд витримає максимум енергії.



11. Electric Violet

Сила фіолетового із сучасним характером.

--background: #F5F5F5
--foreground: #1A1A1A
--primary: #7B6DF5
--primary-hover: #5F4FE6
--secondary: #FED13B
--border: #3A3A3A
--card: #FFFFFF
--muted: #CFCCEA

Коли використовувати:

  • SaaS-продукти
  • Фінтех-застосунки
  • Креативний софт
  • Сучасні інструменти для продуктивності

Чому працює: Фіолетовий відчувається преміально, але без претензійності. Жовтий у ролі додаткового дає тепло. Ця палітра ідеально балансує між професійним і грайливим.


Варіант для темної теми:

--background: #0F0F12
--foreground: #F5F5F5
--primary: #7B6DF5
--card: #1A1A1D
--border: #2E2E32


12. Blood Orange

Агресивно й тепло.

--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Спортивні команди
  • Енергетики та сміливі бренди їжі
  • Продукти, орієнтовані на дію
  • Кампанії до Гелловіну чи осені

Чому працює: Червоно-помаранчевий енергійний і апетитний. Золотий акцент додає преміальності. Чорний у ролі додаткового заземлює тепло.



Вишукані брутальні палітри

Необруталізм може бути витонченим. Ось доказ.


13. Teal & Coral

Додаткові кольори, зроблені правильно.

--background: #FAFAFA
--foreground: #000000
--primary: #00BFA6
--secondary: #FF6B6B
--accent: #FFE66D
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Застосунки про здоров’я та велнес
  • Освітні платформи
  • Лайфстайл-бренди
  • Коли потрібен баланс між енергійним і заспокійливим

Чому працює: Бірюзовий і кораловий — додаткові кольори, вони створюють природний візуальний інтерес. Жовтий акцент додає третій вимір. Ця палітра відчувається свіжо й сучасно.



14. Indigo & Gold

Люксовий брутализм.

--background: #F8F9FA
--foreground: #000000
--primary: #4B0082
--secondary: #FFD700
--accent: #FFFFFF
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Преміум-продукти
  • Мода високого класу
  • Ексклюзивні членства
  • Коли необруталізм має відчуватися дорого

Чому працює: Глибокий індиго сигналізує про якість та ексклюзивність. Золото додає розкоші. Разом вони створюють преміальну необруталістську естетику, що вирізняється на тлі звичних основних кольорів.



15. Mint & Charcoal

Спокійно й зібрано.

--background: #FFFFFF
--foreground: #2D3748
--primary: #48BB78
--secondary: #4A5568
--accent: #F6E05E
--border: #2D3748
--card: #F7FAFC

Коли використовувати:

  • Фінанси й банкінг (необруталістська редакція)
  • Професійні послуги
  • B2B-SaaS
  • Коли важлива довіра, але нудне — не варіант

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



Експериментальні та на хвилі трендів

Ці — для сміливих.


16. Dopamine Overload

Усі кольори. Разом.

--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #8338EC
--accent-1: #FFBE0B
--accent-2: #00F5FF
--accent-3: #3A86FF
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Музичні фестивалі
  • Дитячі застосунки та ігри
  • Маркетингові трюки
  • Коли «забагато» і є ціль

Чому працює (ледь-ледь): Ця палітра навмисно порушує правило «максимум 3 кольори». Чорні рамки й білі фони стримують хаос. Використовуйте дозовано.


Порада профі: Призначте кожному кольору конкретну роль:

// Each section gets its own accent
<section className="bg-[#FF006E]">Hero</section>
<section className="bg-[#8338EC]">Features</section>
<section className="bg-[#FFBE0B]">Pricing</section>
<section className="bg-[#00F5FF]">Testimonials</section>


17. Acid Wash

Ностальгія за 90-ми зустрічається із сучасним брутализмом.

--background: #E0F7FF
--foreground: #000000
--primary: #FF00FF
--secondary: #00FFFF
--accent: #FFFF00
--border: #000000
--card: #FFFFFF

Коли використовувати:

  • Ретрогеймінг
  • Vaporwave-естетика
  • Ностальгічні бренди
  • Усе іронічно застаріле

Чому працює: Чисті пурпурний, блакитний і жовтий викликають у пам’яті комп’ютерну графіку 90-х. Світло-блакитний фон пом’якшує інтенсивність.



18. Rust & Cream

Індустріальний необруталізм.

--background: #FFF9F0
--foreground: #2B1F1F
--primary: #C1502E
--secondary: #686463
--accent: #E8C547
--border: #2B1F1F
--card: #FFFFFF

Коли використовувати:

  • Будівництво й промисловість
  • Ремісничі бренди та ручна робота
  • Кава та їжа (землистий настрій)
  • Коли необруталізму потрібні тепло й фактура

Чому працює: Іржаво-помаранчевий і кремовий створюють землисте, органічне відчуття. Темно-коричневий замість чорного додає тепла, зберігаючи контраст.



19. Cyber Grape

Фіолетовий, але в цифровому ключі.

--background: #0D0221
--foreground: #F0F0F0
--primary: #8B5CF6
--secondary: #EC4899
--accent: #10B981
--border: #F0F0F0
--card: #1A0B2E

Коли використовувати:

  • Криптовалюти й блокчейн
  • Продукти ШІ та машинного навчання
  • Футуристичні SaaS
  • Темна тема

Чому працює: Глибокий фіолетовий фон із яскравими акцентами створює high-tech-відчуття. Світлі рамки на темному фоні перевертають традиційний необруталізм, зберігаючи структуру.



20. Sunshine & Shadow

Максимум контрасту, мінімум кольорів.

--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DC

Коли використовувати:

  • Коли потрібна брутальна простота
  • Сайти з великим обсягом читання
  • Блоги та видання
  • Коли двох кольорів (плюс чорний і білий) достатньо

Чому працює: Помаранчевий — єдиний колір. Чорний і білий роблять усю важку роботу. Кремові картки додають легкого тепла. Ця палітра доводить, що менше може бути більше — навіть у необруталізмі.



Як упровадити ці палітри

Оберіть улюблену палітру й помістіть її у свій CSS:


Для Tailwind CSS v4

Додайте у свій styles.css:

@theme {
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-primary: #FFDB33;
  --color-secondary: #000000;
  --color-border: #000000;
  --color-card: #FFFFFF;
}
 
:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}

Потім використовуйте в розмітці:

<button className="bg-primary text-foreground border-4 border-border">
  Click Me
</button>

Для звичайного CSS

Визначте CSS-змінні:

:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}
 
.btn-primary {
  background-color: var(--primary);
  color: var(--foreground);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--border);
}

Для React / Styled Components

export const theme = {
  colors: {
    background: '#FFFFFF',
    foreground: '#000000',
    primary: '#FFDB33',
    border: '#000000',
  },
  shadows: {
    brutal: '6px 6px 0 0 #000000',
  },
}


Як обрати відповідну палітру для проєкту

Досі в розгубленості? Скористайтеся цим деревом рішень:


Якщо ви робите SaaS або технопродукт: → Почніть із Electric Yellow (#1) або Electric Violet (#11)


Якщо орієнтуєтеся на креативників чи дизайнерів: → Спробуйте Lavender Dream (#6) або Hot Pink Punch (#2)


Якщо потрібно професійно, але сміливо: → Використовуйте Mint & Charcoal (#15) або Teal & Coral (#13)


Якщо ваш бренд сповнений енергії: → Беріть Cyber Lime (#3) або Orange Burst (#7)


Якщо ви робите в темній темі: → Почніть із Neon Midnight (#9) або Cyber Grape (#19)


Якщо хочете зіграти напевно: → Brutal Monochrome (#4) або Sunshine & Shadow (#20)


Якщо хочете бути іншими: → Bubblegum Chaos (#10) або Dopamine Overload (#16)



Поєднання кольорів, яких варто уникати

Не кожен сміливий колір працює в необруталізмі. Ось кілька поєднань, які варто пропустити:


1. Пастель + чорні рамки Ніжно-рожевий (#FFB6C1) і лавандовий (#E6E6FA) недостатньо насичені. Вони конфліктують із жорсткою структурою.


2. Забагато основних кольорів Червоний + синій + жовтий + зелений + фіолетовий = візуальний хаос. Тримайтеся 1 основного та максимум 1-2 додаткових.


3. Малоконтрастні акценти Світло-жовтий (#FFFFE0) на білому фоні. Сірий (#808080) на білому. Якщо, примружившись, ви його не бачите, не використовуйте його.


4. Каламутні коричневі Коричневий (#8B4513) може спрацювати (див. Rust & Cream), але більшість коричневих відчуваються надто органічними для геометричної енергії необруталізму.


5. Кілька неонів одразу Неоново-рожевий + неоново-зелений + неоново-синій = мігрень. Оберіть ОДИН неон і заземліть його чорним і білим.



Поради профі щодо використання цих палітр

1. Почніть із монохрому, додавайте колір стратегічно

Спершу зберіть макет у чорно-білому. Потім додавайте колір лише там, де потрібен акцент:

  • CTA отримують основний колір
  • важливі секції отримують додатковий
  • усе інше лишається нейтральним

2. Використовуйте правило 60-30-10

Навіть у необруталізмі пропорції важливі:

  • 60% нейтрального (білий, чорний, сірі)
  • 30% основного кольору
  • 10% додаткового / акцентного

3. Перевіряйте доступність

Проженіть свою палітру через перевірку контрасту. Чорний текст на жовтому? Зазвичай проходить. Рожевий текст на білому? Часто ні.

Інструмент: використовуйте WebAIM Contrast Checker


4. Створюйте стани наведення

Знижуйте насиченість або затемнюйте основний колір для наведення:

--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */

5. Не забувайте про темну тему

У більшості цих палітр є варіанти для темної теми. Просто переверніть фони й підлаштуйте яскравість:

/* Light mode */
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
 
/* Dark mode */
.dark {
  --background: #1A1A1A;
  --foreground: #F5F5F5;
  --primary: #FFDB33; /* Often stays the same */
}


Завантажити всі палітри

Хочете всі 20 палітр у готовому до використання форматі?


Конфіг Tailwind: Усі 20 палітр як конфігурації теми Tailwind → Завантажити JSON


CSS-змінні: Усі 20 палітр як набори CSS-змінних → Завантажити CSS


Figma: Усі 20 палітр як колірні стилі Figma → Отримати файл Figma



Наостанок

Колір суб’єктивний, але необруталістський колір — не складна штука:


Формула:

  1. Почніть із чорного та білого (не обговорюється)
  2. Оберіть ОДИН сміливий основний колір (жовтий, рожевий, лаймовий, помаранчевий, фіолетовий)
  3. Додайте ОДИН додатковий акцент, якщо потрібно (за бажанням)
  4. Використовуйте дозовано — нехай чорний і білий роблять роботу

Палітри з цього посібника охоплюють усе — від безпечних стартових варіантів (Electric Yellow, Brutal Monochrome) до експериментального безумства (Bubblegum Chaos, Dopamine Overload).


Почніть з однієї. Використовуйте. Підлаштуйте. Зробіть своєю.


І пам’ятайте: найкраща необруталістська палітра — та, якій ви віддаєтеся повністю. Півзаходи в цій естетиці не працюють. Або сміливо, або ніяк.


А тепер обирайте кольори й створіть щось, повз що неможливо пройти. 🎨




Використовуєте Neobrutalism? Ці палітри вже вбудовані в бібліотеку. Просто змініть тему — і готово → neobrutalism.com

Хочете більше? Залиште коментар з улюбленою палітрою або поділіться власними брутальними поєднаннями кольорів.

Читайте також

← Назад до статей