Bauhaus Color Palette

Updated April 17, 2026

A clean Bauhaus color palette — primary red, yellow, and blue with black and white. Hex codes for modernist, geometric, and design-school work.

The Bauhaus Palette

• White #FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)
• Paper #F5F5F0 rgb(245, 245, 240) hsl(60, 20%, 95%)
• Primary Red #EE3124 rgb(238, 49, 36) hsl(4, 86%, 54%)
• Primary Yellow #FFD100 rgb(255, 209, 0) hsl(49, 100%, 50%)
• Primary Blue #2158A4 rgb(33, 88, 164) hsl(215, 66%, 39%)
• Black #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)

Hex Codes at a Glance

#FFFFFF, #F5F5F0, #EE3124, #FFD100, #2158A4, #000000

How to Use This Palette

• In CSS: Paste each hex into your :root custom properties or directly into background-color / color declarations.
• In Figma or Sketch: Copy the hex into any fill or stroke color field. Save each color to your local style library for reuse across frames.
• In Tailwind CSS: Add each hex to your tailwind.config.js file inside theme.extend.colors, then use classes like bg-palette-500.
• In Procreate or Photoshop: Create a new swatch set and paste each hex value. PhotoTones Pro exports ready-to-import .swatches and .ase files.

Build Your Own Palette

This bauhaus palette is one of many themed palettes in the PhotoTones gallery. To build a palette from your own photo, use the free PhotoTones color palette from image generator — it extracts up to 12 hex codes per image in under a second, entirely in your browser. No signup required.