20 bảng màu neo-brutalism kèm mã hex (sẵn sàng sao chép và dán)

Thành thật mà nói: chọn màu cho một thiết kế neo-brutalist có thể khiến bạn choáng ngợp.

Bạn biết mình cần những màu táo bạo, tương phản cao. Nhưng táo bạo cỡ nào? Bao nhiêu màu? Và màu nào ăn ý với nhau mà không trông như một dự án thủ công mẫu giáo hỏng?

Tôi đã dựng hàng chục website neo-brutalist, và khâu chọn màu là nơi phần lớn mọi người mắc kẹt. Vì thế tôi trao cho bạn 20 bảng màu sẵn sàng dùng, mỗi bảng kèm mã hex chính xác, hướng dẫn sử dụng và bối cảnh thực tế.

Không lý thuyết. Không bài giảng về vòng tròn màu. Chỉ cần sao chép mã hex và bắt tay vào xây.

Bắt đầu thôi.

Cách dùng những bảng màu này

Trước khi đến với màu sắc, đây là cách tư duy về hệ màu neo-brutalist:

Cấu trúc của một bảng màu neo-brutalist:

• Nền tảng (base): đen hoặc rất tối (cho đường viền, chữ, bóng đổ)
• Nền (background): trắng hoặc rất sáng (cho thẻ, nền chính)
• Màu chính (primary): màu nhấn chủ đạo của bạn (CTA, header, điểm nhấn)
• Màu phụ (secondary): màu nhấn hỗ trợ (thường 1-2 màu bổ sung)
• Màu điểm nhấn (accents): những chấm phá màu bổ sung (tùy chọn, dùng dè dặt)

Các nguyên tắc cốt lõi:

1. Tương phản cao là bắt buộc - đen và trắng phải làm điểm neo cho bảng màu của bạn
2. Độ bão hòa hơn sự tinh tế - không pastel, không tông màu nhợt nhạt (trừ phần nền)
3. Giới hạn màu nhấn - tối đa 1-3 màu nhấn rực rỡ
4. Đừng sợ táo bạo - nếu cảm thấy quá an toàn, nghĩa là chưa đủ brutal

Giờ thì cùng đến với các bảng màu.

Các bảng màu neo-brutalist kinh điển

Đây là những kết hợp vượt thời gian đã định hình nên thẩm mỹ này.

1. Electric Yellow

Bảng màu neo-brutalist nguyên bản. Nếu chỉ học một bảng, hãy học bảng này.

Sao chép--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFF

Khi nào dùng:

• Sản phẩm công nghệ và SaaS
• Bất cứ thứ gì cần sự chú ý và năng lượng
• Dự án neo-brutalist đầu tiên của bạn

Vì sao hiệu quả: Vàng trên trắng tạo độ hiển thị tối đa. Đường viền và chữ đen mang lại cấu trúc. Việc đây là bảng màu mặc định của Neobrutalism là có lý do: gần như không thể làm hỏng.

Ví dụ sử dụng:

Sao chép// 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>

Ví dụ ngoài đời thực: Gumroad dùng một biến thể của bảng màu này trên toàn bộ giao diện.

2. Hot Pink Punch

Cho những thương hiệu có cá tính và năng lượng.

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

Khi nào dùng:

• Agency sáng tạo
• Thương hiệu thời trang và streetwear
• Sản phẩm hướng đến giới trẻ
• Bất cứ thứ gì chống lại kiểu doanh nghiệp

Vì sao hiệu quả: Hồng chói đòi hỏi sự chú ý. Kết hợp với xanh cyan tạo nên chất retro-tương lai. Màu nhấn vàng thêm một chiều thứ ba mà không gây ngợp.

Chiến lược color blocking:

Sao chép// 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

Độ hiển thị tối đa với một chút chất số.

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

Khi nào dùng:

• Game và esports
• Startup công nghệ
• Công cụ cho lập trình viên
• Bất cứ thứ gì tương lai hoặc ưu tiên số

Vì sao hiệu quả: Xanh lime gào lên "chất số" trong khi hồng magenta mang lại tương phản. Bảng màu này cảm giác như một cửa sổ terminal lai với một tấm poster rave.

Ví dụ:

Sao chép// 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

Khi bạn muốn neo-brutalism mà không cần cầu vồng.

Sao chép--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666

Khi nào dùng:

• Neo-brutalism tối giản (đúng vậy, nó có tồn tại)
• Portfolio kiến trúc và thiết kế
• Khi màu sắc sẽ làm phân tán khỏi nội dung
• Bối cảnh chuyên nghiệp cần chất riêng

Vì sao hiệu quả: Nó chứng minh neo-brutalism không phải là chuyện màu sắc, mà là chuyện cấu trúc. Đường viền dày, bóng đổ cứng và typography đậm gánh cả thẩm mỹ mà không cần một sắc màu nào.

Mẹo chuyên nghiệp: Thêm một màu nhấn tinh tế cho trạng thái hover:

Sao chép--hover-accent: #FFDB33  /* Yellow appears only on interaction */

Các bảng màu rực rỡ và tràn năng lượng

Cho những thương hiệu không thì thầm.

5. Sunset Riot

Sự ấm áp gặp gỡ nổi loạn.

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

Khi nào dùng:

• Thương hiệu đồ ăn và thức uống
• Website sự kiện và lễ hội
• Sản phẩm lifestyle và chăm sóc sức khỏe
• Bất cứ thứ gì cần cảm giác ấm áp và mời gọi

Vì sao hiệu quả: Đỏ và vàng tạo ra năng lượng và cả cảm giác thèm ăn (theo nghĩa đen: đây là những màu của đồ ăn). Màu nhấn xanh dương nhạt làm dịu vừa đủ.

Chiến lược nền: Nền màu kem (#FCFFE7) mềm hơn trắng thuần, giúp các sắc đỏ và vàng nổi bật mà không bị gắt.

6. Lavender Dream

Neo-brutalism gặp gỡ sự bay bổng.

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

Khi nào dùng:

• Portfolio sáng tạo
• Dự án nghệ thuật và minh họa
• Làm đẹp và mỹ phẩm
• Thương hiệu Gen Z muốn sự vui tươi

Vì sao hiệu quả: Tím lavender táo bạo nhưng không hung hăng. Kết hợp với vàng lime và hồng magenta, nó tạo nên một bảng màu vui tươi, gần như kiểu kẹo, mà vẫn giữ được cấu trúc neo-brutalist.

Ví dụ:

Sao chép// 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

Năng lượng cao, ấm áp tối đa.

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

Khi nào dùng:

• Thương hiệu thể thao và thể hình
• Chiến dịch mùa hè
• Sản phẩm tập trung vào năng lượng và hành động
• Các trang nhiều lời kêu gọi hành động

Vì sao hiệu quả: Cam ít được tận dụng trong thiết kế web, khiến nó nổi bật ngay tức thì. Nhiều sắc cam tạo chiều sâu mà không cần thêm màu nào khác.

8. Forest Fresh

Neo-brutalism mộc mạc, ai mà ngờ?

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

Khi nào dùng:

• Thương hiệu bền vững và thân thiện môi trường
• Sức khỏe và chăm sóc bản thân
• Sản phẩm ngoài trời và hướng đến thiên nhiên
• Khi bạn cần một neo-brutalism có cảm giác chân đất

Vì sao hiệu quả: Xanh lá không nhất thiết phải mềm. Bảng màu này dùng các sắc xanh lá bão hòa, tương phản cao, giữ được thẩm mỹ brutal trong khi vẫn cảm giác hữu cơ.

Điểm đặc biệt: Nền thẻ màu kem (#F9F5F2) thêm sự ấm áp mà trắng thuần sẽ không mang lại.

Các bảng màu táo bạo, thử nghiệm

Cho những nhà thiết kế muốn phá giới hạn.

9. Neon Midnight

Neo-brutalism ở chế độ tối, đỉnh cao của nó.

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

Khi nào dùng:

• Nền tảng game
• Công cụ lập trình và ứng dụng viết code
• Trải nghiệm chế độ ban đêm
• Thẩm mỹ cyberpunk

Vì sao hiệu quả: Màu neon trên nền tối tạo nên chất terminal/hacker đó. Đường viền trắng thay vì đen đảo ngược thế cờ mà vẫn giữ tương phản.

Mẹo triển khai:

Sao chép// 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

Chủ nghĩa tối đa gặp gỡ neo-brutalism.

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

Khi nào dùng:

• Âm nhạc và giải trí
• Thương hiệu đồ chơi và sản phẩm cho trẻ em
• Chiến dịch marketing ngắn hạn
• Khi sự tinh tế lại là một sai lầm

Vì sao hiệu quả: Bốn màu rực rỡ nghe như hỗn loạn, nhưng đường viền đen và thẻ trắng ghìm nó lại. Đây là triết lý "nhiều hơn là tốt hơn" của neo-brutalism đẩy đến cực điểm logic của nó.

Lưu ý: Bảng màu này rất ỒN ÀO. Chỉ dùng nếu thương hiệu của bạn kham được năng lượng tối đa.

11. Electric Violet

Sức mạnh của tím với một chút chất hiện đại.

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

Khi nào dùng:

• Sản phẩm SaaS
• Ứng dụng fintech
• Phần mềm sáng tạo
• Công cụ năng suất hiện đại

Vì sao hiệu quả: Tím cảm giác cao cấp mà không kiểu cách. Vàng phụ mang lại sự ấm áp. Bảng màu này cân bằng hoàn hảo giữa chuyên nghiệp và vui tươi.

Biến thể chế độ tối:

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

12. Blood Orange

Hung hăng và ấm áp.

Sao chép--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFF

Khi nào dùng:

• Đội thể thao
• Nước tăng lực và thương hiệu đồ ăn táo bạo
• Sản phẩm hướng hành động
• Chiến dịch Halloween hoặc mùa thu

Vì sao hiệu quả: Đỏ cam tràn năng lượng và kích thích vị giác. Màu nhấn vàng gold thêm nét cao cấp. Đen phụ neo sự ấm áp lại.

Các bảng màu brutal tinh tế

Neo-brutalism có thể tinh tế. Đây là bằng chứng.

13. Teal & Coral

Màu bổ túc làm đúng cách.

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

Khi nào dùng:

• Ứng dụng sức khỏe và chăm sóc bản thân
• Nền tảng giáo dục
• Thương hiệu lifestyle
• Khi bạn cần cân bằng giữa năng lượng và sự thư thái

Vì sao hiệu quả: Teal và coral là màu bổ túc, tạo nên điểm thú vị thị giác tự nhiên. Màu nhấn vàng thêm một chiều thứ ba. Bảng màu này cảm giác tươi mới và hiện đại.

14. Indigo & Gold

Brutalism sang trọng.

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

Khi nào dùng:

• Sản phẩm cao cấp
• Thời trang hạng sang
• Hội viên độc quyền
• Khi neo-brutalism cần cảm giác đắt tiền

Vì sao hiệu quả: Chàm đậm phát tín hiệu chất lượng và độc quyền. Vàng gold mang lại sự sang trọng. Cùng nhau, chúng tạo nên một thẩm mỹ neo-brutalist cao cấp nổi bật khỏi những màu cơ bản thường thấy.

15. Mint & Charcoal

Mát mẻ và điềm tĩnh.

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

Khi nào dùng:

• Tài chính và ngân hàng (phiên bản neo-brutalist)
• Dịch vụ chuyên nghiệp
• SaaS B2B
• Khi sự tin cậy quan trọng nhưng nhàm chán không phải là lựa chọn

Vì sao hiệu quả: Xanh bạc hà táo bạo nhưng không hung hăng. Xám than thay cho đen thuần làm dịu bớt sự gai góc mà vẫn giữ tương phản.

Thử nghiệm và bắt trend

Những bảng này dành cho người dũng cảm.

16. Dopamine Overload

Tất cả màu sắc. Cùng một lúc.

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

Khi nào dùng:

• Lễ hội âm nhạc
• Ứng dụng và trò chơi cho trẻ em
• Những cú marketing gây chú ý
• Khi "quá nhiều" chính là mục tiêu

Vì sao hiệu quả (may lắm mới được): Bảng màu này cố tình phá vỡ quy tắc "tối đa 3 màu". Đường viền đen và nền trắng ghìm sự hỗn loạn lại. Hãy dùng dè dặt.

Mẹo chuyên nghiệp: Gán cho mỗi màu một mục đích cụ thể:

Sao chép// 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

Hoài niệm thập niên 90 gặp gỡ brutalism hiện đại.

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

Khi nào dùng:

• Game retro
• Thẩm mỹ vaporwave
• Thương hiệu hoài niệm
• Bất cứ thứ gì lỗi thời một cách châm biếm

Vì sao hiệu quả: Magenta, cyan và vàng thuần gợi lại đồ họa máy tính thập niên 90. Nền xanh dương nhạt làm dịu bớt độ gắt.

18. Rust & Cream

Neo-brutalism công nghiệp.

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

Khi nào dùng:

• Xây dựng và công nghiệp
• Thương hiệu thủ công và làm bằng tay
• Cà phê và đồ ăn (không khí mộc mạc)
• Khi neo-brutalism cần sự ấm áp và kết cấu

Vì sao hiệu quả: Cam gỉ sét và màu kem tạo nên cảm giác mộc mạc, hữu cơ. Nâu sẫm thay cho đen thêm sự ấm áp mà vẫn giữ tương phản.

19. Cyber Grape

Tím, nhưng phiên bản số.

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

Khi nào dùng:

• Tiền mã hóa và blockchain
• Sản phẩm AI và machine learning
• SaaS tương lai
• Trải nghiệm chế độ tối

Vì sao hiệu quả: Nền tím đậm với các màu nhấn rực rỡ tạo cảm giác high-tech. Đường viền sáng trên nền tối đảo ngược neo-brutalism truyền thống mà vẫn giữ cấu trúc.

20. Sunshine & Shadow

Tương phản tối đa, màu sắc tối thiểu.

Sao chép--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DC

Khi nào dùng:

• Khi bạn cần sự đơn giản brutal
• Trang nhiều chữ để đọc
• Blog và ấn phẩm
• Khi hai màu (cộng đen và trắng) là đủ

Vì sao hiệu quả: Cam là màu duy nhất. Đen và trắng gánh phần việc nặng. Các thẻ màu kem thêm chút ấm áp tinh tế. Bảng màu này chứng minh rằng ít có thể là nhiều, ngay cả trong neo-brutalism.

Cách triển khai những bảng màu này

Chọn bảng màu bạn thích và thả nó vào CSS của bạn:

Cho Tailwind CSS v4

Thêm vào styles.css của bạn:

Sao chép@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;
}

Rồi dùng trong markup của bạn:

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

Cho CSS thông thường

Định nghĩa các biến CSS:

Sao chép: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);
}

Cho React/Styled Components

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

Chọn bảng màu phù hợp cho dự án của bạn

Vẫn còn choáng ngợp? Hãy dùng cây quyết định này:

Nếu bạn đang xây một SaaS hoặc sản phẩm công nghệ: → Bắt đầu với Electric Yellow (#1) hoặc Electric Violet (#11)

Nếu bạn hướng đến giới sáng tạo hoặc nhà thiết kế: → Thử Lavender Dream (#6) hoặc Hot Pink Punch (#2)

Nếu bạn cần thứ gì đó chuyên nghiệp nhưng táo bạo: → Dùng Mint & Charcoal (#15) hoặc Teal & Coral (#13)

Nếu thương hiệu của bạn tràn năng lượng: → Chọn Cyber Lime (#3) hoặc Orange Burst (#7)

Nếu bạn đang xây ở chế độ tối: → Bắt đầu với Neon Midnight (#9) hoặc Cyber Grape (#19)

Nếu bạn muốn chơi an toàn: → Brutal Monochrome (#4) hoặc Sunshine & Shadow (#20)

Nếu bạn muốn khác biệt: → Bubblegum Chaos (#10) hoặc Dopamine Overload (#16)

Những kết hợp màu nên tránh

Không phải màu táo bạo nào cũng hiệu quả trong neo-brutalism. Đây là vài kết hợp nên bỏ qua:

1. Pastel + đường viền đen Hồng nhạt (#FFB6C1) và lavender (#E6E6FA) không đủ độ bão hòa. Chúng xung đột với cấu trúc cứng cáp.

2. Quá nhiều màu cơ bản Đỏ + xanh dương + vàng + xanh lá + tím = hỗn loạn thị giác. Hãy giữ 1 màu chính, tối đa 1-2 màu phụ.

3. Màu nhấn tương phản thấp Vàng nhạt (#FFFFE0) trên nền trắng. Xám (#808080) trên trắng. Nếu nheo mắt mà không thấy được, đừng dùng.

4. Các sắc nâu đục Nâu (#8B4513) có thể hiệu quả (xem Rust & Cream), nhưng phần lớn các sắc nâu cảm giác quá hữu cơ đối với năng lượng hình học của neo-brutalism.

5. Nhiều màu neon cùng lúc Hồng neon + xanh lá neon + xanh dương neon = đau đầu. Hãy chọn MỘT màu neon và neo nó bằng đen và trắng.

Mẹo chuyên nghiệp khi dùng những bảng màu này

1. Bắt đầu đơn sắc, thêm màu một cách chiến lược

Hãy dựng bố cục của bạn ở dạng đen trắng trước. Rồi chỉ thêm màu ở nơi bạn cần nhấn mạnh:

• các CTA nhận màu chính
• các phần quan trọng nhận màu phụ
• mọi thứ còn lại giữ trung tính

2. Áp dụng quy tắc 60-30-10

Ngay cả trong neo-brutalism, tỷ lệ vẫn quan trọng:

• 60% trung tính (trắng, đen, các sắc xám)
• 30% màu chính
• 10% màu phụ/nhấn

3. Kiểm thử khả năng tiếp cận

Chạy bảng màu của bạn qua một công cụ kiểm tra tương phản. Chữ đen trên nền vàng? Thường đạt. Chữ hồng trên nền trắng? Thường trượt.

Công cụ: dùng WebAIM Contrast Checker

4. Tạo trạng thái hover

Giảm độ bão hòa hoặc làm tối màu chính cho trạng thái hover:

Sao chép--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */

5. Đừng quên chế độ tối

Phần lớn các bảng màu này có biến thể chế độ tối. Chỉ cần đảo phần nền và điều chỉnh độ sáng:

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

Tải về tất cả bảng màu

Muốn cả 20 bảng màu ở định dạng sẵn sàng dùng?

Cấu hình Tailwind: Cả 20 bảng màu dưới dạng cấu hình theme Tailwind → Tải JSON

Biến CSS: Cả 20 bảng màu dưới dạng bộ biến CSS → Tải CSS

Figma: Cả 20 bảng màu dưới dạng color style Figma → Lấy tệp Figma

Vài suy nghĩ cuối

Màu sắc mang tính chủ quan, nhưng màu sắc neo-brutalist thì không phức tạp:

Công thức:

1. Bắt đầu với đen và trắng (không thương lượng)
2. Chọn MỘT màu chính táo bạo (vàng, hồng, lime, cam, tím)
3. Thêm MỘT màu nhấn phụ nếu cần (tùy chọn)
4. Dùng dè dặt: hãy để đen và trắng làm phần việc

Các bảng màu trong cẩm nang này bao trùm mọi thứ, từ những lựa chọn khởi đầu an toàn (Electric Yellow, Brutal Monochrome) đến sự điên rồ thử nghiệm (Bubblegum Chaos, Dopamine Overload).

Bắt đầu với một bảng. Dùng nó. Tinh chỉnh nó. Biến nó thành của bạn.

Và hãy nhớ: bảng màu neo-brutalist tốt nhất là bảng bạn thực sự cam kết. Nửa vời không hiệu quả trong thẩm mỹ này. Làm lớn hoặc thôi khỏi làm.

Giờ thì chọn màu của bạn và xây nên thứ gì đó không thể bị bỏ qua. 🎨

Đang dùng Neobrutalism? Những bảng màu này đã được tích hợp sẵn vào thư viện. Chỉ cần đổi theme là xong → neobrutalism.com

Muốn thêm nữa? Để lại một bình luận với bảng màu bạn thích hoặc chia sẻ những kết hợp màu brutal của riêng bạn.