Farbskalen

Orange Skala

100

200

300

400

500

600

700

800

900

Stufe	HEX	OKLCH	Anwendung
50	`#FFF7ED`	`oklch(96% 0.03 60)`	Hintergründe, Hover-States
100	`#FFEDD5`	`oklch(92% 0.06 60)`	Subtile Akzente, Badges
200	`#FED7AA`	`oklch(86% 0.11 58)`	Rahmen, Dekoration
300	`#FDBA74`	`oklch(78% 0.15 55)`	Icons, Illustrationen
400	`#FB923C`	`oklch(72% 0.18 50)`	Dark-Mode Primary
500	`#FF8500`	`oklch(68% 0.19 47)`	Brand Primary
600	`#EA6D00`	`oklch(62% 0.18 44)`	Hover-State Primary
700	`#C2570A`	`oklch(54% 0.16 42)`	Text (AA konform)
800	`#9A4509`	`oklch(44% 0.13 40)`	Text (AAA konform)
900	`#7C3A0A`	`oklch(34% 0.10 38)`	Starker Akzent

Warm-Gray Skala

100

200

300

400

500

600

700

800

900

Stufe	HEX	OKLCH	Anwendung
50	`#F9F8F6`	`oklch(98% 0.005 50)`	Seitenhintergrund, Brand Light
100	`#F0EDEA`	`oklch(95% 0.008 50)`	Karten-Hintergrund
200	`#E0DBD6`	`oklch(89% 0.011 50)`	Rahmen (Standard)
300	`#C4BDB7`	`oklch(80% 0.012 50)`	Rahmen (Stark), Dekoration
400	`#A69E97`	`oklch(70% 0.013 50)`	Deaktivierter Text
500	`#887F78`	`oklch(60% 0.013 50)`	Sekundärtext
600	`#6B635C`	`oklch(50% 0.013 50)`	Fließtext (AA)
700	`#524B45`	`oklch(40% 0.012 50)`	Starker Text (AAA)
800	`#3A3430`	`oklch(30% 0.011 50)`	Headlines, Brand Dark
900	`#231F1C`	`oklch(20% 0.009 50)`	Maximaler Kontrast, Brand Black

Neutral-Gray Skala

Rein neutrale Grautöne (Sättigung 0%) — bewährt in Print-Materialien (Rasterlinien, technische Elemente, Akzentbalken). Referenzwerte aus den Schreibblöcken.

100

200

300

400

500

600

700

800

900

Stufe	HEX	OKLCH	Anwendung
50	`#F7F7F7`	`oklch(97% 0 0)`	Helle Hintergründe
100	`#EBEBEB`	`oklch(93% 0 0)`	Subtile Trennlinien
200	`#D1D1D1`	`oklch(85% 0 0)`	Print-Raster, Hilfslinien
300	`#B8B8B8`	`oklch(77% 0 0)`	Rahmen, Dekoration
400	`#9E9E9E`	`oklch(68% 0 0)`	Deaktivierte Elemente
500	`#7F7F7F`	`oklch(58% 0 0)`	Print-Akzentbalken, Mitteltöne
600	`#666666`	`oklch(48% 0 0)`	Sekundärtext (Print)
700	`#4D4D4D`	`oklch(38% 0 0)`	Text (Print)
800	`#333333`	`oklch(28% 0 0)`	Headlines (Print)
900	`#1C1C1C`	`oklch(18% 0 0)`	Maximaler Kontrast

Warm-Gray vs. Neutral-Gray

Warm-Gray (Hue ~28°, Sättigung ~6–14%) für digitale Interfaces und Branding-Flächen mit emotionaler Wärme. Neutral-Gray (Sättigung 0%) für Print-Raster, technische Zeichnungen und sachliche Darstellungen.

CSS Custom Properties

HEX (Print-Authority, Tooling-Fallback)

css

:root {
  --orange-50: #FFF7ED;   --orange-100: #FFEDD5;
  --orange-200: #FED7AA;  --orange-300: #FDBA74;
  --orange-400: #FB923C;  --orange-500: #FF8500;
  --orange-600: #EA6D00;  --orange-700: #C2570A;
  --orange-800: #9A4509;  --orange-900: #7C3A0A;

  --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;

  --gray-50: #F7F7F7;     --gray-100: #EBEBEB;
  --gray-200: #D1D1D1;    --gray-300: #B8B8B8;
  --gray-400: #9E9E9E;    --gray-500: #7F7F7F;
  --gray-600: #666666;    --gray-700: #4D4D4D;
  --gray-800: #333333;    --gray-900: #1C1C1C;
}

OKLCH (Web/Display-Authority)

css

:root {
  /* Orange-Skala — Hue 47°, Chroma-Anker 0.19 bei -500 */
  --orange-50-oklch:  oklch(96% 0.03 60);
  --orange-100-oklch: oklch(92% 0.06 60);
  --orange-200-oklch: oklch(86% 0.11 58);
  --orange-300-oklch: oklch(78% 0.15 55);
  --orange-400-oklch: oklch(72% 0.18 50);
  --orange-500-oklch: oklch(68% 0.19 47);
  --orange-600-oklch: oklch(62% 0.18 44);
  --orange-700-oklch: oklch(54% 0.16 42);
  --orange-800-oklch: oklch(44% 0.13 40);
  --orange-900-oklch: oklch(34% 0.10 38);

  /* Warm-Gray-Skala — Hue 50°, Chroma ~0.01 (warm getönt) */
  --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);

  /* Neutral-Gray-Skala — Chroma 0 (rein achromatisch) */
  --gray-50-oklch:  oklch(97% 0 0);
  --gray-100-oklch: oklch(93% 0 0);
  --gray-200-oklch: oklch(85% 0 0);
  --gray-300-oklch: oklch(77% 0 0);
  --gray-400-oklch: oklch(68% 0 0);
  --gray-500-oklch: oklch(58% 0 0);
  --gray-600-oklch: oklch(48% 0 0);
  --gray-700-oklch: oklch(38% 0 0);
  --gray-800-oklch: oklch(28% 0 0);
  --gray-900-oklch: oklch(18% 0 0);
}

Warum beide Notationen?

HEX bleibt verbindlich für Druckereien, Pantone-Mapping, SVG-Logos und alle Tools, die OKLCH noch nicht verstehen (Adobe Illustrator-Legacy, Sketch-Plugins, ältere CI-Pipelines). OKLCH gibt die korrekte perzeptive Wirkung auf modernen Displays — vor allem auf P3- und HDR-Hardware. Der Brand Guide führt beide parallel; die Methodik-Dokumentation erklärt, wann welche Notation Vorrang hat.

Farbskalen ​

Orange Skala ​

Warm-Gray Skala ​

Neutral-Gray Skala ​

CSS Custom Properties ​

HEX (Print-Authority, Tooling-Fallback) ​

OKLCH (Web/Display-Authority) ​