Bauhaus Extended Color Psychology & Meaning
Bauhaus is the most influential design school in history translated to color — these primaries are a statement that all complex visual communication can be reduced to fundamentals.
#F5F0E8
#CC0000
#003399
#FFCC00
Background
Primary Accent
Secondary
Body Text
Bauhaus Extended
boldgeometricprincipled all brandingdesigneducation
Fail
WCAG Grade
1.3:1
Contrast Ratio
2,200
Saves
5,900
AI Copies
Use #F5F0E8 as the background. Use #CC0000 as the primary accent. Use #003399 as secondary. Use #FFCC00 as body text/supporting color. Palette mood: Bauhaus Extended — bold, geometric, principled.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Bauhaus Extended color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 87.6% | 245, 240, 232 | 0%, 2%, 5%, 4% | 37°, 39%, 94% | ||
| Primary Accent Luminance: 12.8% | 204, 0, 0 | 0%, 100%, 100%, 20% | 0°, 100%, 40% | ||
| Secondary Luminance: 4.7% | 0, 51, 153 | 100%, 67%, 0%, 40% | 220°, 100%, 30% | ||
| Body Text Luminance: 64.4% | 255, 204, 0 | 0%, 20%, 100%, 0% | 48°, 100%, 50% |
Color Harmony: Triadic Scheme
The Bauhaus Extended palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
The Bauhaus school (1919-1933) codified primary color use in design education through the theories of Johannes Itten and Josef Albers. Its visual influence extends through virtually all modern design.
Best Design Use Cases
Warm white for surfaces. Red, blue, and yellow as equal primaries — never mixed, always pure. Use each for a distinct function. Geometric forms required.
Industries This Palette Suits
Design education, branding agencies, cultural institutions, design tools, museums.
How to Implement the Bauhaus Extended Color Scheme
To use this Bauhaus Extended color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #F5F0E8 for the main background and #CC0000 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #FFCC00 and #F5F0E8 is 1.33:1 (Fail). Ensure your body text remains legible.