Supporting Colors — Warm Grays

BAUER GROUP follows a monochromatic color scheme: orange is the only chromatic brand color. All supporting tones are based on warm-tinted grays (hue ≈28°, saturation ≈6%) that form a natural color-temperature harmony with orange.

Design principle

Orange (primary)

Warm grays (supporting)

Property	Reasoning
Monochromatic	Orange as the sole color accent receives maximum attention
Harmonious	Warm grays share the hue (~28°) with orange — no visual break
Professional	A reduced color palette feels serious and timeless
Flexible	A 10-step scale offers enough differentiation for all applications

Reference colors

#524B45

Warm 700 — Standard

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

#3A3430

Warm 800 — Dark

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

Warm Gray scale

The 10-step scale uses OKLCH-based lightness distribution for perceptually uniform stepping. All steps share the same warm base hue (≈28°).

50

100

200

300

400

500

600

700

800

900

Full values

Step	HEX	Preview	RGB	OKLCH	CMYK	Usage
50	#F9F8F6		249, 248, 246	oklch(98% 0.005 50)	C0 M0 Y1 K2	Backgrounds, hover states
100	#F0EDEA		240, 237, 234	oklch(95% 0.008 50)	C0 M1 Y2 K6	Subtle accents, sections
200	#E0DBD6		224, 219, 214	oklch(89% 0.011 50)	C0 M2 Y4 K12	Borders, dividers
300	#C4BDB7		196, 189, 183	oklch(80% 0.012 50)	C0 M3 Y5 K23	Icons, decoration
400	#A69E97		166, 158, 151	oklch(70% 0.013 50)	C0 M4 Y7 K35	Disabled text, placeholders
500	#887F78		136, 127, 120	oklch(60% 0.013 50)	C0 M5 Y9 K47	Secondary text (large only, AA Large)
600	#6B635C		107, 99, 92	oklch(50% 0.013 50)	C0 M6 Y10 K58	Body text (WCAG AA)
700	#524B45		82, 75, 69	oklch(40% 0.012 50)	C0 M7 Y12 K68	Strong text (WCAG AAA)
800	#3A3430		58, 52, 48	oklch(30% 0.011 50)	C0 M8 Y13 K77	Headlines, dark surfaces
900	#231F1C		35, 31, 28	oklch(20% 0.009 50)	C0 M9 Y14 K86	Maximum contrast, footer

OKLCH cheat sheet

Format: oklch(L% C H) — Lightness in % (0–100), Chroma absolute (0–~0.4 in sRGB), Hue in degrees (0–360°). The Warm Gray scale shares the same hue (50°) and near-constant chroma (~0.01) — only lightness varies. That's what makes the scale perceptually linear.

OKLCH lightness distribution

The scale uses OKLCH lightness for perceptual uniformity:

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

Average step: ~0.086 OKLCH-L per step — uniformly distributed.

Accessibility

Combination	Contrast	WCAG	Status
Warm 600 on white	~5.9:1	AA (text)	AA
Warm 700 on white	~8.6:1	AAA (text)	AAA
Warm 800 on white	~12.3:1	AAA (text)	AAA
Warm 900 on white	~16.6:1	AAA (text)	AAA
Warm 500 on white	~3.9:1	AA (large)	AA large
Warm 400 on white	~2.6:1	—	Not AA
White on Warm 700	~8.6:1	AAA (text)	AAA
Orange on Warm 800	~5.0:1	AA (text)	AA
Orange on Warm 900	~6.8:1	AA (text)	AA

Recommendation

Warm 700 (#524B45) is the recommended text color — WCAG AAA compliant on white. For body text, use at least Warm 600 (#6B635C, AA). Warm 800/900 work well for headlines and dark surfaces.

Interaction with orange

← Orange (chromatic)Warm gray (neutral) →

Why warm grays?

Property	Reasoning
Color temperature	Same hue (~28°) as orange — no temperature conflicts
Focus	Orange remains uncontested as the only chromatic color
Natural	Warm grays feel more organic than cool or neutral grays
Versatile	From near-white (50) to near-black (900) — full coverage

Application

UI example

BAUER GROUP

ProductsSolutionsContact

Welcome to BAUER GROUP

Technology that scales with you — innovative solutions for your business.

Get startedLearn more

© 2026 BAUER GROUPImprint · Privacy

As background color

Page background (50)

Header / navigation (800)

Footer / dark sections (900)

As text color

Headlines (800)

Strong text (700)

Body text (600)

Secondary text (500)

Application rules

1. Warm grays are supporting — orange remains the primary brand color
2. For dark areas (header, footer), use Warm 800–900
3. For body text on white, use at least Warm 600 for WCAG AA
4. Warm 50–200 work as warm backgrounds and visual separation
5. Orange for CTAs and action elements, warm grays for everything else

Dark mode

In dark mode, lighter warm tones are used to ensure contrast on dark backgrounds.

Warm 300

For accents on
dark background

Warm 200

For primary text on
dark background

Warm 100

For light headlines on
dark background

Light mode	→ Dark mode	Usage
Warm 700 #524B45	Warm 300 #C4BDB7	Strong text
Warm 800 #3A3430	Warm 200 #E0DBD6	Headlines
Warm 50 #F9F8F6	Warm 900 #231F1C	Background surfaces

Print & production

CMYK values

For professional printing, use the CMYK values directly — don't convert from HEX.

Step	CMYK	Pantone (closest)
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

Print note

The warm grays always carry a slight yellow/magenta share (Y, M > 0) — that's intentional and creates the warm character. Don't replace with pure grays (K only). Verify color fidelity with a current Pantone fan.

CSS Custom Properties

: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);
}

When HEX, when OKLCH in CSS?

• Standard components continue using var(--warm-700) etc. (HEX tokens) — guaranteed to work in any tooling workflow.
• Wide-gamut optimization (P3 displays, HDR hero sections): use var(--warm-700-oklch) when perceptual consistency matters more than tooling compatibility.
• Build-time scale generation: OKLCH tokens are the source of truth for mathematically derivable scale extensions — see Methodology.