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°).

50

100

200

300

400

500

600

700

800

900

Vollständige Werte

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

OKLCH-Helligkeitsverteilung

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

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

© 2026 BAUER GROUPImpressum · Datenschutz

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

1. Warme Grautöne sind unterstützend — Orange bleibt die primäre Markenfarbe
2. Für dunkle Bereiche (Header, Footer) Warm 800–900 verwenden
3. Für Fließtext auf weißem Hintergrund mindestens Warm 600 für WCAG AA
4. Warm 50–200 eignen sich als warme Hintergründe und für visuelle Trennung
5. 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

:root {
  /* Warm Gray Scale */
  --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;
}