2026년 5월 1일

hex 코드까지 담은 네오브루탈리즘 컬러 팔레트 20선 (복사 & 붙여넣기 가능)

네오브루탈리즘 디자인의 색 선택으로 고민하고 계신가요. 그대로 복사해서 붙여넣을 수 있는, 실전에서 검증된 컬러 팔레트 20가지를 정확한 hex 코드와 함께 소개합니다. 정석적인 노랑 x 검정부터 대담한 라임 x 핑크 조합까지 담았습니다.

Dov Azencot

@DovAzencot

X에 공유

솔직히 말해, 네오브루탈리즘 디자인에서 색을 고르는 일은 막막하게 느껴질 수 있습니다.

대담하고 고대비인 색이 필요하다는 건 압니다. 그런데 어떤 대담한 색을요? 몇 개나? 유치원 미술 시간이 어긋난 것처럼 보이지 않으면서, 어떤 색들이 서로 잘 어울릴까요?

저는 수십 개의 네오브루탈리즘 사이트를 만들어 봤는데, 색 선택이야말로 대부분의 사람들이 막히는 지점입니다. 그래서 바로 쓸 수 있는 컬러 팔레트 20가지를 준비했습니다. 각각 정확한 hex 코드, 사용 지침, 그리고 실제 사용 맥락을 함께 담았습니다.

이론은 없습니다. 색상환 강의도 없습니다. 그냥 hex 코드를 복사해서 바로 만들기 시작하세요.

바로 시작해 보겠습니다.

이 팔레트 사용법

색으로 들어가기 전에, 네오브루탈리즘 컬러 시스템을 어떻게 생각해야 하는지 알아보겠습니다.

네오브루탈리즘 팔레트의 구성:

베이스: 검정 또는 아주 어두운 색 (테두리, 텍스트, 그림자용)
배경: 흰색 또는 아주 밝은 색 (카드, 메인 배경용)
프라이머리: 주된 액센트 색 (CTA, 헤더, 강조용)
세컨더리: 이를 받쳐주는 액센트 (보통 1~2개 색)
액센트: 색의 추가 포인트 (선택 사항, 아껴서 사용)

핵심 원칙:

고대비는 필수 - 검정과 흰색이 팔레트의 중심이 되어야 합니다
은은함보다 채도 - 파스텔이나 탁한 톤은 금물 (배경은 예외)
액센트 색은 제한 - 선명한 액센트는 많아야 1~3개
대담함을 두려워하지 마세요 - 너무 무난하게 느껴진다면, 브루탈함이 부족한 것입니다

이제 팔레트를 살펴보겠습니다.

클래식 네오브루탈리즘 팔레트

이 미학을 정의하는, 시대를 타지 않는 조합들입니다.

1. 일렉트릭 옐로우

원조 네오브루탈리즘 팔레트. 딱 하나만 익힌다면 이것을 익히세요.

--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. 핫 핑크 펀치

개성과 에너지가 있는 브랜드를 위한 팔레트.

--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. 사이버 라임

디지털한 감각과 최대한의 시인성.

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

이럴 때 사용하세요:

게임 및 e스포츠
테크 스타트업
개발자 도구
미래적이거나 디지털 우선인 모든 것

효과적인 이유: 라임 그린이 '디지털'을 외치고, 마젠타 핑크가 대비를 만듭니다. 이 팔레트는 터미널 창과 레이브 포스터를 뒤섞은 듯한 느낌입니다.

예시:

// 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. 브루탈 모노크롬

무지개색 없이 네오브루탈리즘을 원할 때.

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

이럴 때 사용하세요:

미니멀한 네오브루탈리즘 (네, 존재합니다)
건축 및 디자인 포트폴리오
색이 콘텐츠를 방해할 때
개성이 필요한 전문적인 맥락

효과적인 이유: 네오브루탈리즘이 색이 아니라 구조의 문제임을 증명합니다. 두꺼운 테두리, 선명한 그림자, 대담한 타이포그래피가 색조 없이도 이 미학을 이끌어갑니다.

프로 팁: 호버 상태를 위해 은은한 액센트를 하나 더하세요:

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

선명하고 에너지 넘치는 팔레트

속삭이지 않는 브랜드를 위해.

5. 선셋 라이엇

온기와 반항심의 만남.

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

이럴 때 사용하세요:

식음료 브랜드
이벤트 사이트와 페스티벌
라이프스타일 및 웰니스 제품
따뜻하고 친근하게 느껴져야 하는 모든 것

효과적인 이유: 빨강과 노랑은 에너지와 식욕을 만들어냅니다 (말 그대로, 음식의 색이니까요). 연한 파랑 액센트가 딱 알맞게 열기를 식혀줍니다.

배경 전략: 크림색 배경(#FCFFE7)은 순백보다 부드러워, 빨강과 노랑을 자극적이지 않게 돋보이게 합니다.

6. 라벤더 드림

네오브루탈리즘과 장난기의 만남.

--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. 오렌지 버스트

높은 에너지, 최대한의 온기.

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

이럴 때 사용하세요:

스포츠 및 피트니스 브랜드
여름 캠페인
에너지와 행동을 겨냥한 제품
CTA가 많은 페이지

효과적인 이유: 오렌지는 웹 디자인에서 잘 쓰이지 않아, 곧바로 개성을 드러냅니다. 여러 단계의 오렌지 색조가 추가 색 없이도 깊이를 만들어냅니다.

8. 포레스트 프레시

흙내음 나는 네오브루탈리즘, 의외죠?

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

이럴 때 사용하세요:

지속가능성 및 에코 브랜드
건강 및 웰니스
아웃도어 및 자연 중심 제품
차분하게 안정된 네오브루탈리즘이 필요할 때

효과적인 이유: 초록이 꼭 부드러워야 하는 것은 아닙니다. 이 팔레트는 채도 높은 초록을 고대비로 사용해, 유기적인 느낌을 주면서도 브루탈한 미학을 유지합니다.

독특한 특징: 크림색 카드 배경(#F9F5F2)이 순백으로는 낼 수 없는 온기를 더합니다.

대담하고 실험적인 팔레트

경계를 밀어붙이고 싶은 디자이너를 위해.

9. 네온 미드나이트

다크 모드 네오브루탈리즘의 정점.

--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. 버블검 카오스

맥시멀리즘과 네오브루탈리즘의 만남.

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

이럴 때 사용하세요:

음악 및 엔터테인먼트
완구 브랜드 및 아동 중심 제품
수명이 짧은 마케팅 캠페인
은은함이 오히려 실수가 될 때

효과적인 이유: 선명한 색 네 개는 혼돈처럼 들리지만, 검정 테두리와 흰색 카드가 그것을 붙잡아 둡니다. 네오브루탈리즘의 '많을수록 좋다'는 철학을 논리적 극단까지 밀어붙인 것입니다.

주의: 이 팔레트는 요란합니다. 브랜드가 최대치의 에너지를 감당할 수 있을 때만 사용하세요.

11. 일렉트릭 바이올렛

모던한 감각을 더한 퍼플의 힘.

--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. 블러드 오렌지

공격적이면서 따뜻한.

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

이럴 때 사용하세요:

스포츠 팀
에너지 드링크 및 대담한 식품 브랜드
행동 지향적인 제품
핼러윈 또는 가을 캠페인

효과적인 이유: 붉은 오렌지는 에너지 넘치고 식욕을 돋웁니다. 골드 액센트가 프리미엄한 손길을 더합니다. 검정 세컨더리가 온기를 단단히 잡아줍니다.

세련된 브루탈 팔레트

네오브루탈리즘도 세련될 수 있습니다. 여기 그 증거가 있습니다.

13. 틸 & 코랄

보색을 제대로 다루기.

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

이럴 때 사용하세요:

건강 및 웰니스 앱
교육 플랫폼
라이프스타일 브랜드
활기와 차분함 사이의 균형이 필요할 때

효과적인 이유: 틸과 코랄은 보색 관계라 자연스러운 시각적 흥미를 만듭니다. 노랑 액센트가 세 번째 차원을 더합니다. 이 팔레트는 신선하고 모던한 느낌을 줍니다.

14. 인디고 & 골드

럭셔리 브루탈리즘.

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

이럴 때 사용하세요:

프리미엄 제품
하이엔드 패션
독점 멤버십
네오브루탈리즘에 고급스러움이 필요할 때

효과적인 이유: 깊은 인디고는 품질과 특별함을 전합니다. 골드가 럭셔리함을 더합니다. 둘이 함께 흔한 원색과는 차별화되는 프리미엄한 네오브루탈리즘 미학을 만들어냅니다.

15. 민트 & 차콜

쿨하고 차분한.

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

이럴 때 사용하세요:

금융 및 뱅킹 (네오브루탈리즘 버전)
전문 서비스
B2B SaaS
신뢰가 중요하지만 지루함은 선택지가 아닐 때

효과적인 이유: 민트 그린은 대담하지만 공격적이지 않습니다. 순검정 대신 차콜을 쓰면 대비는 유지하면서 딱딱함을 살짝 누그러뜨립니다.

실험적이고 트렌드를 앞서가는 팔레트

이것들은 용감한 사람들을 위한 것입니다.

16. 도파민 오버로드

모든 색을, 한꺼번에.

--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. 애시드 워시

90년대의 향수와 모던 브루탈리즘의 만남.

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

이럴 때 사용하세요:

레트로 게임
베이퍼웨이브 미학
향수를 자극하는 브랜드
일부러 시대에 뒤처져 보이게 하는 모든 것

효과적인 이유: 순수한 마젠타, 시안, 옐로우가 90년대 컴퓨터 그래픽을 떠올리게 합니다. 연한 파랑 배경이 그 강렬함을 누그러뜨립니다.

18. 러스트 & 크림

공업적인 네오브루탈리즘.

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

이럴 때 사용하세요:

건설 및 공업
핸드메이드 및 장인 브랜드
커피와 음식 (흙내음 나는 분위기)
네오브루탈리즘에 온기와 질감이 필요할 때

효과적인 이유: 러스트 오렌지와 크림이 흙내음 나는 유기적인 느낌을 만듭니다. 검정 대신 짙은 갈색이 대비는 유지하면서 온기를 더합니다.

19. 사이버 그레이프

퍼플을, 디지털하게.

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

이럴 때 사용하세요:

암호화폐 및 블록체인
AI 및 머신러닝 제품
미래적인 SaaS
다크 모드 경험

효과적인 이유: 깊은 퍼플 배경에 선명한 액센트를 더하면 하이테크한 느낌이 납니다. 어두운 배경 위의 밝은 테두리가 구조는 유지하면서 전통적인 네오브루탈리즘을 뒤집습니다.

20. 선샤인 & 섀도우

최대한의 대비, 최소한의 색.

--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나 테크 제품을 만들고 있다면: → 일렉트릭 옐로우(#1)나 일렉트릭 바이올렛(#11)으로 시작하세요

크리에이터나 디자이너를 겨냥한다면: → 라벤더 드림(#6)이나 핫 핑크 펀치(#2)를 시도해 보세요

전문적이면서도 대담해야 한다면: → 민트 & 차콜(#15)이나 틸 & 코랄(#13)을 사용하세요

브랜드가 에너지 넘친다면: → 사이버 라임(#3)이나 오렌지 버스트(#7)로 가세요

다크 모드로 만들고 있다면: → 네온 미드나이트(#9)나 사이버 그레이프(#19)로 시작하세요

무난하게 가고 싶다면: → 브루탈 모노크롬(#4)이나 선샤인 & 섀도우(#20)

남들과 다르고 싶다면: → 버블검 카오스(#10)나 도파민 오버로드(#16)

피해야 할 색 조합

모든 대담한 색이 네오브루탈리즘에서 통하는 것은 아닙니다. 피해야 할 조합을 소개합니다:

1. 파스텔 + 검정 테두리 부드러운 핑크(#FFB6C1)와 라벤더(#E6E6FA)는 채도가 부족합니다. 딱딱한 구조와 부딪칩니다.

2. 원색 남용 빨강 + 파랑 + 노랑 + 초록 + 보라 = 시각적 혼돈. 프라이머리 1개, 세컨더리는 많아야 1~2개로 유지하세요.

3. 저대비 액센트 흰 배경 위의 연노랑(#FFFFE0). 흰 배경 위의 회색(#808080). 눈을 가늘게 떠도 보이지 않는다면, 쓰지 마세요.

4. 탁한 갈색 갈색(#8B4513)은 통할 수도 있지만(러스트 & 크림 참고), 대부분의 갈색은 네오브루탈리즘의 기하학적 에너지에 비해 지나치게 유기적으로 느껴집니다.

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 Config: 20가지 팔레트 전부를 Tailwind 테마 설정으로 → Download JSON

CSS 변수: 20가지 팔레트 전부를 CSS 변수 세트로 → Download CSS

Figma: 20가지 팔레트 전부를 Figma 컬러 스타일로 → Get Figma File

마무리

색은 주관적이지만, 네오브루탈리즘의 색은 복잡하지 않습니다:

공식:

검정과 흰색으로 시작한다 (타협 불가)
대담한 프라이머리 색을 하나 고른다 (노랑, 핑크, 라임, 오렌지, 보라)
필요하면 세컨더리 액센트를 하나 더한다 (선택 사항)
아껴서 사용하고, 검정과 흰색에 일을 맡긴다

이 가이드의 팔레트들은 무난한 입문용(일렉트릭 옐로우, 브루탈 모노크롬)부터 실험적인 광기(버블검 카오스, 도파민 오버로드)까지 모든 것을 아우릅니다.

하나로 시작하세요. 써보세요. 조정하세요. 여러분의 것으로 만드세요.

그리고 기억하세요. 최고의 네오브루탈리즘 팔레트는 여러분이 끝까지 밀어붙이는 팔레트입니다. 이 미학에서는 어중간함이 통하지 않습니다. 대담하게 가거나, 아니면 관두세요.

이제 색을 골라서 도무지 무시할 수 없는 무언가를 만들어 보세요. 🎨

Neobrutalism를 사용 중이신가요? 이 팔레트들은 이미 라이브러리에 내장되어 있습니다. 테마만 바꾸면 끝입니다 → neobrutalism.com

더 알고 싶으신가요? 가장 좋아하는 팔레트를 댓글로 남기거나, 여러분만의 브루탈한 색 조합을 공유해 주세요.

← 블로그로 돌아가기

hex 코드까지 담은 네오브루탈리즘 컬러 팔레트 20선 (복사 & 붙여넣기 가능)

이 팔레트 사용법

클래식 네오브루탈리즘 팔레트

1. 일렉트릭 옐로우

2. 핫 핑크 펀치

3. 사이버 라임

4. 브루탈 모노크롬

선명하고 에너지 넘치는 팔레트

5. 선셋 라이엇

6. 라벤더 드림

7. 오렌지 버스트

8. 포레스트 프레시

대담하고 실험적인 팔레트

9. 네온 미드나이트

10. 버블검 카오스

11. 일렉트릭 바이올렛

12. 블러드 오렌지

세련된 브루탈 팔레트

13. 틸 & 코랄

14. 인디고 & 골드

15. 민트 & 차콜

실험적이고 트렌드를 앞서가는 팔레트

16. 도파민 오버로드

17. 애시드 워시

18. 러스트 & 크림

19. 사이버 그레이프

20. 선샤인 & 섀도우

이 팔레트를 적용하는 방법

Tailwind CSS v4의 경우

일반 CSS의 경우

React/Styled Components의 경우

프로젝트에 맞는 팔레트 고르기

피해야 할 색 조합

이 팔레트를 활용하는 프로 팁

1. 모노크롬으로 시작해, 색은 전략적으로 더하기

2. 60-30-10 규칙 사용하기

3. 접근성 테스트하기

4. 호버 상태 만들기

5. 다크 모드를 잊지 마세요

모든 팔레트 다운로드

마무리

관련 글

네오브루탈리즘 디자인에 가장 좋은 폰트 14선 (무료 + 유료)

네오브루탈리즘 vs 미니멀리즘: 언제 쓰고 언제 피해야 하는가

네오브루탈리즘 vs 브루탈리즘: 핵심 차이 7가지 (예시와 함께)