styleColor Scheme

Brutalist Raw

A raw brutalist palette with stark black-and-white contrast and no softening. Embraces imperfection and confrontational design.

#ffffff
#fafafa
#18181b
#475569
#dc2626

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Zinc 900

Hex

#18181b

Tailwind

text-zinc-900

Role

secondary

Name

Slate 600

Hex

#475569

Tailwind

text-slate-600

Role

accent

Name

Red 600

Hex

#dc2626

Tailwind

bg-red-600

Live Preview

Welcome Back

This is a live preview of the Brutalist Raw color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Stark black on white creates the unapologetic directness central to brutalism. Red accents add a confrontational edge without decorative pretense.

Use Cases

Experimental art sitesAnti-design portfoliosPunk zine layouts

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #fafafa;
  --primary: #18181b;
  --secondary: #475569;
  --accent: #dc2626;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brutalist-raw': {
  'background': '#ffffff',  // bg-white
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#18181b',  // text-zinc-900
  'secondary': '#475569',  // text-slate-600
  'accent': '#dc2626',  // bg-red-600
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

What is brutalist web design?
Brutalist design rejects polish and convention, embracing raw aesthetics, stark contrasts, and intentional roughness.