Das Firmenrot #ED0000 ist gesetzt. Die Frage ist nur, wer die Flächen trägt. Sechs Vorschläge, jeweils als Mini-Mockup der echten Sektionen (Hero, Über uns mit Kachel, helle Zwischensektion, Abschluss-CTA). Stand 24.09.2026, Vorschau: inform.studios-in-motion.com.
So steht die Seite gerade: Rot im Hero-Marker, in der Kachel, in Knöpfen, in Überschriften und als ganze CTA-Fläche. Weil alles rot ist, hebt sich nichts mehr ab, und die Fläche wirkt aggressiv. In den Vorschlägen unten ist der Mockup identisch, nur Kachel, CTA-Fläche und Kartenkante tragen die Begleitfarbe.
Die sicherste Variante: keine zweite Buntfarbe, nur warme Grautöne in drei Stufen. Das Rot bleibt allein bunt und wirkt dadurch automatisch als Akzent. Passt zu den Studiofotos (grauer Boden, Geräte), wirkt sachlich und wertig, aber etwas unauffällig.
#ED0000#151515#2B2A28#8C8780#E8E4DD| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 14.3 AA |
| Rote Schrift auf Tief | Ab | 3.1 nur groß |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 3.6 nur groß |
| Anthrazit auf Hell | Ab | 14.4 AA |
| Rot auf Hell | Ab | 3.6 nur groß |
| Tief als Text auf Hell | Ab | 11.3 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #2B2A28; --inform-begleit-mittel: #8C8780; --inform-begleit-hell: #E8E4DD;
Sand und Beige machen die dunkle Seite menschlicher und passen zur Gesundheits- und Reha-Ausrichtung (Rückenschmerzen, ganzheitliches Konzept). Rot auf Sand ist ein klassisches, warmes Paar. Helle Sand-Sektionen können als Atempause zwischen dunklen Blöcken dienen.
#ED0000#151515#5E5346#C4B497#E9DFCF| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 7.5 AA |
| Rote Schrift auf Tief | Ab | 1.6 zu wenig |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 2.0 zu wenig |
| Anthrazit auf Hell | Ab | 13.8 AA |
| Rot auf Hell | Ab | 3.5 nur groß |
| Tief als Text auf Hell | Ab | 5.7 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #5E5346; --inform-begleit-mittel: #C4B497; --inform-begleit-hell: #E9DFCF;
Petrol liegt im Farbkreis fast gegenüber von Rot, ist aber gebrochen und dunkel, deshalb kein Kirmes-Effekt. Kalt gegen warm: Petrolflächen lassen das Rot leuchten, ohne dass die Fläche selbst schreit. Modern, eigenständig, unterscheidet InForm von den üblichen Rot-Schwarz-Studios.
#ED0000#151515#163E48#2E7280#D8E6E8| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 11.6 AA |
| Rote Schrift auf Tief | Ab | 2.5 zu wenig |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 5.5 AA |
| Anthrazit auf Hell | Ab | 14.3 AA |
| Rot auf Hell | Ab | 3.6 nur groß |
| Tief als Text auf Hell | Ab | 9.0 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #163E48; --inform-begleit-mittel: #2E7280; --inform-begleit-hell: #D8E6E8;
Blaugraues Schiefer und Silber holen die Farben der Geräte (Matrix, Life Fitness, Power Plate) in die Gestaltung. Sportlich-technisch, wie Sportswear-Marken mit Rot-Akzent. Weniger Charakter als Petrol, dafür sehr robust und universell.
#ED0000#151515#2A323C#5E6B7A#DFE4E9| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 13.0 AA |
| Rote Schrift auf Tief | Ab | 2.8 zu wenig |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 5.4 AA |
| Anthrazit auf Hell | Ab | 14.3 AA |
| Rot auf Hell | Ab | 3.6 nur groß |
| Tief als Text auf Hell | Ab | 10.1 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #2A323C; --inform-begleit-mittel: #5E6B7A; --inform-begleit-hell: #DFE4E9;
Grün ist die echte Komplementärfarbe zu Rot. Reines Grün wäre Weihnachten, gebrochenes Olive nicht: Es wirkt natürlich und ruhig und betont Gesundheit und Wohlbefinden. Rot bleibt auf Olive gut sichtbar. Für ein Fitnessstudio die ungewöhnlichste Wahl, deshalb mit Vorsicht.
#ED0000#151515#3E4A36#7B8A63#EEE8DA| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 9.4 AA |
| Rote Schrift auf Tief | Ab | 2.1 zu wenig |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 3.7 nur groß |
| Anthrazit auf Hell | Ab | 14.9 AA |
| Rot auf Hell | Ab | 3.7 nur groß |
| Tief als Text auf Hell | Ab | 7.7 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #3E4A36; --inform-begleit-mittel: #7B8A63; --inform-begleit-hell: #EEE8DA;
Statt Signalrot als Fläche ein tiefes Bordeaux: Die Seite bleibt eindeutig in der Markenfarbe, aber die Flächen brüllen nicht mehr. Das Signalrot wird zum Leuchtpunkt darauf. Creme statt Weiß nimmt zusätzlich Härte raus. Vorsicht: Rot-Knopf auf Bordeaux hat zu wenig Kontrast, dort weißer Knopf.
#ED0000#151515#4A0C10#7E1A1F#F2E9E1| Kontrast | WCAG | |
|---|---|---|
| Weiß auf Tief | Ab | 15.5 AA |
| Rote Schrift auf Tief | Ab | 3.4 nur groß |
| Weiß auf Rot (Knopf) | Ab | 4.6 AA |
| Weiß auf Mittel | Ab | 10.2 AA |
| Anthrazit auf Hell | Ab | 15.2 AA |
| Rot auf Hell | Ab | 3.8 nur groß |
| Tief als Text auf Hell | Ab | 13.0 AA |
„Rote Schrift auf Tief“ meint rote Wörter oder Linien direkt auf der Begleitfarbe. Der rote Knopf ist davon nicht betroffen, er trägt weiße Schrift auf Rot. Wo der Wert schwach ist: dort nur weiße Wörter markieren oder das Rot als Kante statt als Schrift setzen.
--inform-begleit-tief: #4A0C10; --inform-begleit-mittel: #7E1A1F; --inform-begleit-hell: #F2E9E1;
Petrol + Anthrazit ist mein Favorit: Das Rot bekommt einen echten Gegenspieler, kalt gegen warm, und leuchtet auf Petrol besser als auf Rot, ohne dass die Fläche laut ist. Es hebt InForm von der üblichen Rot-Schwarz-Fitnessoptik ab und passt zum dunklen Theme. Zweite Wahl Schiefer + Silber, wenn es näher an den Geräten und ganz sicher bleiben soll, oder Sand + Anthrazit, wenn die Seite wärmer und gesundheitsnäher wirken soll. Bordeaux + Creme ist der Weg, wenn der Kunde „alles muss rot sein“ sagt.
Umsetzung im Repo: drei Begleit-Token im InForm-Block von global.css, dann CTA-Hintergrund (custom/CtaHintergrund.astro), Bento-Kachel (custom/AboutBento.astro) und die Verlaufsflächen auf /fitness/ auf die Token umstellen. Knöpfe, Chips und Hervorhebungswörter bleiben unverändert rot. Eine Farbwelt ist in etwa einer Stunde auf der Bühne live2 sichtbar, zwei Welten nebeneinander als Demo-Seite genauso.