Unterstützende Farben — Warme Grautöne

Die BAUER GROUP setzt auf ein monochromatisches Farbschema: Orange ist die einzige chromatische Markenfarbe. Alle unterstützenden Farbtöne basieren auf warm getönten Grautönen (Hue ≈28°, Sättigung ≈6%), die mit Orange eine natürliche Farbtemperatur-Harmonie bilden.

Designprinzip

Orange (Primär)

Warme Grautöne (Unterstützend)

Eigenschaft	Begründung
Monochrom	Orange als einziger Farbakzent erhält maximale Aufmerksamkeit
Harmonisch	Warme Grautöne teilen den Farbton (~28°) mit Orange — kein visueller Bruch
Professionell	Reduzierte Farbpalette wirkt seriös und zeitlos
Flexibel	10-Stufen-Skala bietet ausreichend Differenzierung für alle Anwendungen

Referenzfarben

#524B45

Warm 700 — Standard

RGB 82, 75, 69 · HSL 28°, 9%, 30%

#3A3430

Warm 800 — Dunkel

RGB 58, 52, 48 · HSL 24°, 9%, 21%

Warm-Gray-Skala

Die 10-Stufen-Skala verwendet OKLCH-basierte Helligkeitsverteilung für perceptuell gleichmäßige Abstände. Alle Stufen teilen denselben warmen Grundton (Hue ≈28°).

100

200

300

400

500

600

700

800

900

Vollständige Werte

Stufe	HEX	RGB	OKLCH	CMYK	Anwendung
50	`#F9F8F6`	`249, 248, 246`	`oklch(98% 0.005 50)`	`C0 M0 Y1 K2`	Hintergründe, Hover-States
100	`#F0EDEA`	`240, 237, 234`	`oklch(95% 0.008 50)`	`C0 M1 Y2 K6`	Subtile Akzente, Sektionen
200	`#E0DBD6`	`224, 219, 214`	`oklch(89% 0.011 50)`	`C0 M2 Y4 K12`	Rahmen, Trennlinien
300	`#C4BDB7`	`196, 189, 183`	`oklch(80% 0.012 50)`	`C0 M3 Y5 K23`	Icons, Dekoration
400	`#A69E97`	`166, 158, 151`	`oklch(70% 0.013 50)`	`C0 M4 Y7 K35`	Deaktivierter Text, Platzhalter
500	`#887F78`	`136, 127, 120`	`oklch(60% 0.013 50)`	`C0 M5 Y9 K47`	Sekundärtext (nur groß, AA Large)
600	`#6B635C`	`107, 99, 92`	`oklch(50% 0.013 50)`	`C0 M6 Y10 K58`	Fließtext (WCAG AA)
700	`#524B45`	`82, 75, 69`	`oklch(40% 0.012 50)`	`C0 M7 Y12 K68`	Starker Text (WCAG AAA)
800	`#3A3430`	`58, 52, 48`	`oklch(30% 0.011 50)`	`C0 M8 Y13 K77`	Headlines, dunkle Flächen
900	`#231F1C`	`35, 31, 28`	`oklch(20% 0.009 50)`	`C0 M9 Y14 K86`	Maximaler Kontrast, Footer

OKLCH-Lesehilfe

Format: oklch(L% C H) — Lightness in % (0–100), Chroma absolut (0–~0.4 in sRGB), Hue in Grad (0–360°). Die Warm-Gray-Skala teilt denselben Hue (50°) und nahezu konstantes Chroma (~0.01) — variiert wird nur die Lightness. Das macht die Skala perzeptiv linear.

OKLCH-Helligkeitsverteilung

Die Skala verwendet OKLCH-Lightness für perceptuelle Gleichmäßigkeit:

text

50  ████████████████████████████████████████████████  0.97
100 ███████████████████████████████████████████████░  0.94
200 ████████████████████████████████████████████░░░░  0.88
300 ███████████████████████████████████████░░░░░░░░░  0.79
400 ██████████████████████████████████░░░░░░░░░░░░░░  0.68
500 ████████████████████████████░░░░░░░░░░░░░░░░░░░░  0.57
600 ███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░  0.47
700 ███████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.38
800 ██████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.29
900 ██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.20

Durchschnittlicher Schritt: ~0.086 OKLCH-L pro Stufe — gleichmäßige Verteilung.

Barrierefreiheit

Kombination	Kontrast	WCAG	Status
Warm 600 auf Weiß	~5.9:1	AA (Text)	AA
Warm 700 auf Weiß	~8.6:1	AAA (Text)	AAA
Warm 800 auf Weiß	~12.3:1	AAA (Text)	AAA
Warm 900 auf Weiß	~16.6:1	AAA (Text)	AAA
Warm 500 auf Weiß	~3.9:1	AA (groß)	AA groß
Warm 400 auf Weiß	~2.6:1	—	Nicht AA
Weiß auf Warm 700	~8.6:1	AAA (Text)	AAA
Orange auf Warm 800	~5.0:1	AA (Text)	AA
Orange auf Warm 900	~6.8:1	AA (Text)	AA

Empfehlung

Warm 700 (#524B45) ist die empfohlene Textfarbe — WCAG AAA konform auf Weiß. Für Fließtext mindestens Warm 600 (#6B635C, AA) verwenden. Warm 800/900 eignen sich für Headlines und dunkle Flächen.

Zusammenspiel mit Orange

← Orange (chromatisch)Warm Gray (neutral) →

Warum warme Grautöne?

Eigenschaft	Begründung
Farbtemperatur	Gleicher Hue (~28°) wie Orange — keine Temperaturkonflikte
Fokus	Orange bleibt als einzige chromatische Farbe unangefochten dominant
Natürlich	Warme Grautöne wirken organischer als kühle oder neutrale Grautöne
Vielseitig	Von fast-Weiß (50) bis fast-Schwarz (900) — vollständige Palette

Anwendung

UI-Beispiel

BAUER GROUP

ProdukteLösungenKontakt

Willkommen bei BAUER GROUP

Technology that scales with you — innovative Lösungen für Ihr Unternehmen.

Jetzt startenMehr erfahren

Als Hintergrundfarbe

Seitenhintergrund (50)

Header / Navigation (800)

Footer / Dark Sections (900)

Als Textfarbe

Headlines (800)

Starker Text (700)

Fließtext (600)

Sekundärtext (500)

Anwendungsregeln

Warme Grautöne sind unterstützend — Orange bleibt die primäre Markenfarbe
Für dunkle Bereiche (Header, Footer) Warm 800–900 verwenden
Für Fließtext auf weißem Hintergrund mindestens Warm 600 für WCAG AA
Warm 50–200 eignen sich als warme Hintergründe und für visuelle Trennung
Orange für CTAs und Aktionselemente, warme Grautöne für alle anderen UI-Elemente

Dark Mode

Im Dark Mode werden hellere Warm-Töne verwendet, um Kontrast auf dunklen Hintergründen zu gewährleisten.

Warm 300

Für Akzente auf
dunklem Hintergrund

Warm 200

Für primären Text auf
dunklem Hintergrund

Warm 100

Für helle Headlines auf
dunklem Hintergrund

Light Mode	→ Dark Mode	Verwendung
Warm 700 `#524B45`	Warm 300 `#C4BDB7`	Starker Text
Warm 800 `#3A3430`	Warm 200 `#E0DBD6`	Headlines
Warm 50 `#F9F8F6`	Warm 900 `#231F1C`	Hintergrundflächen

Print & Produktion

CMYK-Werte

Für professionellen Druck die CMYK-Werte direkt verwenden — nicht aus HEX konvertieren.

Stufe	CMYK	Pantone (nächster)
50	`C0 M0 Y1 K2`	—
100	`C0 M1 Y2 K6`	—
200	`C0 M2 Y4 K12`	—
300	`C0 M3 Y5 K23`	PMS Warm Gray 4 C
400	`C0 M4 Y7 K35`	PMS Warm Gray 7 C
500	`C0 M5 Y9 K47`	PMS Warm Gray 9 C
600	`C0 M6 Y10 K58`	PMS Warm Gray 10 C
700	`C0 M7 Y12 K68`	PMS Warm Gray 11 C
800	`C0 M8 Y13 K77`	PMS 411 C
900	`C0 M9 Y14 K86`	PMS Black 7 C

Druckhinweis

Die warmen Grautöne enthalten stets einen leichten Gelb/Magenta-Anteil (Y, M > 0) — das ist beabsichtigt und erzeugt den warmen Charakter. Nicht durch reine Grautöne (K only) ersetzen. Farbverbindlichkeit mit aktuellem Pantone-Fächer abgleichen.

CSS Custom Properties

css

:root {
  /* Warm Gray Scale — HEX (Print-Authority, SVG, Tooling-Fallback) */
  --warm-50: #F9F8F6;   --warm-100: #F0EDEA;
  --warm-200: #E0DBD6;  --warm-300: #C4BDB7;
  --warm-400: #A69E97;  --warm-500: #887F78;
  --warm-600: #6B635C;  --warm-700: #524B45;
  --warm-800: #3A3430;  --warm-900: #231F1C;

  /* Warm Gray Scale — OKLCH (Web/Display-Authority) */
  --warm-50-oklch:  oklch(98% 0.005 50);
  --warm-100-oklch: oklch(95% 0.008 50);
  --warm-200-oklch: oklch(89% 0.011 50);
  --warm-300-oklch: oklch(80% 0.012 50);
  --warm-400-oklch: oklch(70% 0.013 50);
  --warm-500-oklch: oklch(60% 0.013 50);
  --warm-600-oklch: oklch(50% 0.013 50);
  --warm-700-oklch: oklch(40% 0.012 50);
  --warm-800-oklch: oklch(30% 0.011 50);
  --warm-900-oklch: oklch(20% 0.009 50);
}

Wann HEX, wann OKLCH im CSS?

Standard-Komponenten verwenden weiterhin var(--warm-700) etc. (HEX-Tokens) — das funktioniert garantiert in jedem Tooling-Workflow.
Wide-Gamut-Optimierung (P3-Displays, HDR-Hero-Sektionen): var(--warm-700-oklch) einsetzen, wenn perzeptive Konsistenz wichtiger ist als Tooling-Kompatibilität.
Skalengeneration zur Build-Zeit: OKLCH-Tokens sind die Quelle der Wahrheit für mathematisch ableitbare Skalen-Erweiterungen — siehe Methodik.

Unterstützende Farben — Warme Grautöne ​

Designprinzip ​

Referenzfarben ​

Warm-Gray-Skala ​

Vollständige Werte ​

Barrierefreiheit ​

Zusammenspiel mit Orange ​

Warum warme Grautöne? ​

Anwendung ​

UI-Beispiel ​

Als Hintergrundfarbe ​

Als Textfarbe ​

Anwendungsregeln ​

Dark Mode ​

Print & Produktion ​

CMYK-Werte ​

CSS Custom Properties ​