Brutalist Colorful
A colorful brutalist palette that clashes bold hues intentionally. Breaks design rules with unapologetic vibrancy and contrast.
Color Breakdown
Role
background
Name
Yellow 500
Hex
#eab308
Tailwind
bg-yellow-500
Role
surface
Name
White
Hex
#ffffff
Tailwind
bg-white
Role
primary
Name
Blue 700
Hex
#1d4ed8
Tailwind
text-blue-700
Role
secondary
Name
Zinc 900
Hex
#18181b
Tailwind
text-zinc-900
Role
accent
Name
Red 500
Hex
#ef4444
Tailwind
bg-red-500
Live Preview
Welcome Back
This is a live preview of the Brutalist Colorful color scheme applied to a sample card component. See how the colors work together in a realistic UI context.
Design Rationale
“Yellow background with blue text deliberately breaks conventional design harmony. Red accents amplify the confrontational, rule-breaking brutalist spirit.
Use Cases
CSS Variables
:root {
--background: #eab308;
--surface: #ffffff;
--primary: #1d4ed8;
--secondary: #18181b;
--accent: #ef4444;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brutalist-colorful': {
'background': '#eab308', // bg-yellow-500
'surface': '#ffffff', // bg-white
'primary': '#1d4ed8', // text-blue-700
'secondary': '#18181b', // text-zinc-900
'accent': '#ef4444', // bg-red-500
},
},
},
},
};Related Color Schemes
Fintech Bold
A bold fintech palette that breaks convention with vibrant violet and sharp contrasts. Perfect for disruptive financial startups.
Automotive Bold
A bold automotive palette with powerful darks and metallic red accents. Conveys speed, precision, and engineering excellence.
Minimalist Light
A clean minimalist palette with abundant white space and subtle gray accents. Less is more with this restrained, elegant approach.
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Brutalist Raw
A raw brutalist palette with stark black-and-white contrast and no softening. Embraces imperfection and confrontational design.
Retro 80s
A neon-tinged 80s retro palette with hot pink and electric blue. Channels the vibrant excess and synthwave aesthetic of the 1980s.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator