Farbskalen
Orange Skala
50
100
200
300
400
500
600
700
800
900
| Stufe | HEX | Vorschau | Anwendung |
|---|---|---|---|
| 50 | #FFF7ED | Hintergründe, Hover-States | |
| 100 | #FFEDD5 | Subtile Akzente, Badges | |
| 200 | #FED7AA | Rahmen, Dekoration | |
| 300 | #FDBA74 | Icons, Illustrationen | |
| 400 | #FB923C | Dark-Mode Primary | |
| 500 | #FF8500 | Brand Primary | |
| 600 | #EA6D00 | Hover-State Primary | |
| 700 | #C2570A | Text (AA konform) | |
| 800 | #9A4509 | Text (AAA konform) | |
| 900 | #7C3A0A | Starker Akzent |
Warm-Gray Skala
50
100
200
300
400
500
600
700
800
900
| Stufe | HEX | Vorschau | Anwendung |
|---|---|---|---|
| 50 | #F9F8F6 | Seitenhintergrund, Brand Light | |
| 100 | #F0EDEA | Karten-Hintergrund | |
| 200 | #E0DBD6 | Rahmen (Standard) | |
| 300 | #C4BDB7 | Rahmen (Stark), Dekoration | |
| 400 | #A69E97 | Deaktivierter Text | |
| 500 | #887F78 | Sekundärtext | |
| 600 | #6B635C | Fließtext (AA) | |
| 700 | #524B45 | Starker Text (AAA) | |
| 800 | #3A3430 | Headlines, Brand Dark | |
| 900 | #231F1C | 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.
50
100
200
300
400
500
600
700
800
900
| Stufe | HEX | Vorschau | Anwendung |
|---|---|---|---|
| 50 | #F7F7F7 | Helle Hintergründe | |
| 100 | #EBEBEB | Subtile Trennlinien | |
| 200 | #D1D1D1 | Print-Raster, Hilfslinien | |
| 300 | #B8B8B8 | Rahmen, Dekoration | |
| 400 | #9E9E9E | Deaktivierte Elemente | |
| 500 | #7F7F7F | Print-Akzentbalken, Mitteltöne | |
| 600 | #666666 | Sekundärtext (Print) | |
| 700 | #4D4D4D | Text (Print) | |
| 800 | #333333 | Headlines (Print) | |
| 900 | #1C1C1C | 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
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;
}