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

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

Вы знаете, что нужны смелые контрастные цвета. Но какие именно смелые цвета? Сколько их? И какие сочетаются между собой, не превращаясь в детсадовскую поделку, которая пошла не так?

Мы построили десятки необруталистских сайтов, и именно на выборе цвета застревает большинство. Поэтому мы отдаём вам 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

Хотите больше? Оставьте комментарий с любимой палитрой или поделитесь собственными брутальными сочетаниями цветов.