https://brandhub.otto.de/d/3b7DxrpgBBPu/farben#/-/otto-farben Brand Basics Guidelines Downloads Support Login externer Link Aktuelle Seite:OTTO-Farben Intro Wichtiges im Überblick OTTO-Rot Sustainable Green Service-Blau Accessibility Farbübersicht Farbkombinationen & Anwendung Don’ts Deepdive OTTO-Farben Intro OTTO setzt auf ein modulares Farbsystem, das die visuelle Identität der Marke über verschiedene Touchpoints und Bereiche hinweg konsistent hält. Dabei ermöglicht das System, unterschiedliche Aspekte je nach Zielgruppenbedürfnissen hervorzuheben, ohne die Hauptfarben der Marke zu verändern. So wird sichergestellt, dass die Marke stets erkennbar bleibt, während gleichzeitig Flexibilität für spezifische Zielgruppenansprachen gegeben ist. Das Farbsystem sorgt dafür, dass Texte und Elemente auf unterschiedlichen Hintergründen gut lesbar und barrierefrei sind, indem die Kontraste verbessert wurden. Zudem schafft das Farbsystem eine visuelle Hierarchie, Informationen können in kräftigeren Farben oder in helleren Tönen dargestellt werden und bietet so eine hohe Flexibilität, die zur Markenprägung beitragen. Wichtiges im Überblick OTTO-Rot OTTO-Rot HEX #EB001F RGB 235, 0, 31 CMYK 0, 100, 95, 0 RAL 3028 PMS-C 185 C NCS S1080-Y90R Der 2022 für App-Darstellung optimierte Rotton verleiht OTTO eine warme und strahlende Anmutung. Für eine noch höhere Wiedererkennbarkeit gibt es klare Regeln im Umgang mit dem OTTO-Rot. Beim Einsatz des OTTO-Rot ist darauf zu achten, dass die Aussage nicht ungewollt durch einen zu hohen Rotanteil zu verkäuferisch wirkt. Der Einsatz von Weißraum sorgt für eine gewisse Leichtigkeit und Klarheit in der Gestaltung. Der Rotanteil wird abhängig vom Touchpoint bzw. Kommunikationsziel definiert. Mehr als 30% Rot-Anteil sollte in der Gestaltung nicht eingesetzt werden, um nicht ungewollt zu verkäuferisch zu wirken. Eine Ausnahme ist hier die Gestaltung von Kommunikationsmitteln im Rahmen des Employer Brandings. Sustainable Green Sustainable Green 110 HEX #7EA87B RGB 126, 168, 123 CMYK 60, 20, 60, 0 RAL 1506030 PMS-C 4207C NCS S3040-G20Y Das Sustainable Green ist die Nachhaltigkeitsfarbe von OTTO. Die Farbe darf ausschließlich in Verbindung mit nachhaltigen und ökologischen Produkten, Kommunikation und thematisch passendem Content verwendet werden. Das Sustainable Green steht auf der Hierarchie-Ebene wie das OTTO-Rot und darf deshalb nicht in Verbindung mit roten Flächen gestaltet werden. Service-Blau Service-Blau Das neue Service-Blau gibt den OTTO-Services eine einheitliche Farbgebung und soll eine langfristige Erkennbarkeit sicherstellen. Das Service-Blau ist nicht aus der allgemeinen Farbpalette entnommen und agiert so unabhängig. Servicefarbe 140 HEX #213D4F RGB 33, 61, 79 CMYK 85, 55, 35, 30 RAL 250 30 25 Servicefarbe 130 HEX #305873 RGB 48, 88, 115 CMYK 85, 45, 25, 15 RAL 250 50 25 Servicefarbe 120 HEX #3F7498 RGB 63, 116, 152 CMYK 80, 40, 20, 10 RAL 250 60 20 Servicefarbe 110 HEX #538FB7 RGB 83, 143, 183 CMYK 60, 20, 15, 5 RAL 250 70 25 Servicefarbe 100 HEX #76A6C6 RGB 118, 166, 198 CMYK 60, 20, 10, 0 RAL 250 70 15 Servicefarbe 80 HEX #C1DAEB RGB 193, 218, 235 CMYK 20, 10, 5, 0 RAL 250 92 05 Das Service Blau erhält aus Accessibility-Gründen Abstufungen in der Farbigkeit um mit roter und auch weißer Typografie zu kommunizieren. Accessibility Barrierefreiheit im Web bedeutet, dass Websites so gestaltet werden, dass sie für alle Menschen zugänglich sind, unabhängig von ihren Fähigkeiten. Ein wichtiger Aspekt dabei ist der Einsatz von Farben und Kontrasten. Farben sollten nicht die einzige Methode sein, um Informationen zu vermitteln, und der Kontrast zwischen Text und Hintergrund muss ausreichend hoch sein, damit der Text gut lesbar ist. In Deutschland regeln das Behindertengleichstellungsgesetz (BGG) und die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) die Anforderungen an die Barrierefreiheit im Web. Die Farben von OTTO wurden auf Farbkontraste gemäß den Richtlinien der WCAG 2.1 überprüft. Dabei wurden alle möglichen Farbkombinationen analysiert und nur diejenigen Kombinationen dargestellt, die den Kontrastanforderungen entsprechen. Kombinationen, die die Anforderungen nicht erfüllten, wurden nicht in der Übersicht aufgeführt. Diese Überprüfung stellt sicher, dass die Farbwahl barrierefrei ist und den Zugang für alle Nutzer erleichtert. Farbübersicht In unserem modularen Farbsystem gibt es für jede Farbe 8 Farbabstufungen. Diese unterteilen sich in dunkle Shades im Bereich 130-140, Akzentfarben im Bereich 130-90 und helle Shades im Bereich 80-70. Eine Ausnahme bildet Beige, das nur 5 Farbabstufungen umfasst. Jede Farbabstufung muss unter Berücksichtigung der Barrierefreiheit bedacht werden, wenn Texte und Grafiken darauf platziert werden. Sustainable Green Das Sustainable Green erhält aus Accessibility-Gründen zudem Abstufungen in der Farbigkeit. Farbkombinationen & Anwendung Farbkombination für Kampagnen – Beispiel 1  White HEX #FFFFFF RGB 255, 255, 255 OTTO Red HEX #EB001F RGB 235, 0, 31 Purple 70 HEX #F4EEFF RGB 244, 238, 255 Purple 80 HEX #E5D5FE RGB 229, 213, 254 Purple 100 HEX #B198DB RGB 177, 152, 219 Purple 140 HEX #522EB7 RGB 82, 46, 183 Warm Red 70 HEX #FFE2E2 RGB 255, 226, 226 Warm Red 90 HEX #FF9196 RGB 255, 145, 150 Warm Red 110 HEX #DE3E64 RGB 222, 62, 100 Green 70 HEX #E7FFB5 RGB 231, 255, 181 Green 90 HEX #C5EF6C RGB 197, 239, 108 Farbkombination für Kampagnen – Beispiel 2 White HEX #FFFFFF RGB 255, 255, 255 OTTO Rot HEX #EB001F RGB 235, 0, 31 Mint 70 HEX #D1EDE7 RGB 209, 237, 231 Mint 80 HEX #B4E1D7 RGB 180, 225, 215 Mint 110 HEX #099F91 RGB 9, 159, 145 Mint 130 HEX #006058 RGB 0, 96, 88 Orange 70 HEX #FFE2D2 RGB 255, 226, 210 Orange 80 HEX #FFC5A5 RGB 255, 197, 165 Orange 90 HEX #FFB084 RGB 255, 176, 132 Yellow 80 HEX #FFFAAF RGB 255, 250, 175 Yellow 90 HEX #FFEB91 RGB 255, 235, 145 Don’ts Rotes OTTO-Logo auf dunklen Hintergründen Das rote OTTO-Logo darf ausschließlich auf hellen Flächen stehen. Weißes OTTO-Logo auf hellen Hintergründen Das rote OTTO-Logo darf ausschließlich auf dunklen Flächen stehen. OTTO-Rot  Das OTTO-Rot sollte nicht zu prägnant eingesetzt werden. Schriftfarbe Dark Grey ist für Überschriften nicht erlaubt. Keine bunten Schriften Farbabstufungen der OTTO Farben als Schriftfarbe sind nicht erlaubt (z.B. Blue 80 -140)  Kleine Schrift in OTTO-Rot Rote Schrift nicht kleiner als 14pt / 19px einsetzen. Dunkle Farbe in Verbindung mit Roter Headline Rotem Logo Nur dunklen Shades Helle Farbe in Verbindung mit Weißer Headline Weißes Logo Nur hellen Shades Farbkombinationen aus nur dunklen Shades Farbkombinationen aus einer Farbfamilie Deepdive Farbwerte Im folgenden sind alle Farbfamilien und die jeweiligen Farbabstufungen von 140-80 für OTTO abgebildet. Die CMYK-Werte werden sukzessive nachgetragen – bei Bedarf wendet euch an das Brand-Development: brand-development@otto.de Mint 140 HEX #194743 RGB 25, 71, 67 CMYK 85, 35, 55, 45 RAL 190 30 20 Mint 130 HEX #006058 RGB 0, 96, 88 CMYK 80, 25, 50, 30 RAL 18040 25 Mint 120 HEX #028A7E RGB 2, 138, 126 CMYK 78, 12, 50, 17 RAL 180 50 30 Mint 110 HEX #099F91 RGB 9, 159, 145 CMYK 78, 5, 45, 0 RAL 180 60 45 Mint 100 HEX #64C8B9 RGB 100, 200, 185 CMYK 60, 0, 35, 0 RAL 180 70 25 Mint 90 HEX #7DD4C7 RGB 125, 212, 199 CMYK 53, 0, 33, 0 RAL 180 80 25 Mint 80 HEX #B4E1D7 RGB 180, 225, 215 CMYK 35, 0, 20, 0 RAL 170 80 20 Mint 70 HEX #D1EDE7 RGB 209, 237, 231 CMYK 20, 0, 12, 0 RAL 160 90 10 Blue 140 HEX #14374B RGB 20, 55, 75 CMYK 95, 70, 45, 45 RAL 250 40 25 Blue 130 HEX #1E5A78 RGB 30, 90, 120 CMYK 90, 55, 30, 20 RAL 240 40 20 Blue 120 HEX #2E5AAE RGB 46, 90, 174 CMYK 95, 60, 0, 0 RAL 260 40 40 Blue 110 HEX #266BD3 RGB 38, 107, 211 CMYK 100, 40, 0, 0 RAL 260 40 45 Blue 100 HEX #6EA0EB RGB 110, 160, 235 CMYK 60, 25, 0, 0 RAL 260 60 30 Blue 90 HEX #C5EAFF RGB 197, 234, 255 CMYK 25, 0, 0, 0 RAL 240 80 15 Blue 80 HEX #DCF0FA RGB 220, 240, 250 CMYK 20, 0, 0, 0 RAL  240 80 15 Blue 70 HEX #F0FAFF RGB 240, 250, 255 CMYK 8, 0, 0, 0 RAL 250 92 05 Green 140 HEX #456501 RGB 69, 101, 1 CMYK 65, 30, 100, 15 RAL 100 50 50 Green 130 HEX #5E8114 RGB 94, 129, 20 CMYK 60, 10, 100, 5 RAL 120 50 50 Green 120 HEX #6A9807 RGB 106, 152, 7 CMYK 50, 10, 100, 5 RAL 110 60 50 Green 110 HEX #8ABC20 RGB 138, 188, 32 CMYK 40, 0, 100, 0 RAL 110 70 70 Green 100 HEX #A9E034 RGB 169, 224, 52 CMYK 35, 0, 85, 0 RAL 110 80 70 Green 90 HEX #C5EF6C RGB 197, 239, 108 CMYK 30, 0, 65, 0 RAL 110 80 60 Green 80 HEX #DBFB98 RGB 219, 251, 152 CMYK 20, 0, 50, 0 RAL 110 90 35 Green 70 HEX #E7FFB5 RGB 231, 255, 181 CMYK 15, 0, 40, 0 RAL 110 90 20 Purple 140 HEX #522EB7 RGB 82, 46, 183 CMYK 85, 95, 0, 0 RAL 290 40 40 Purple 130 HEX #6C49CF RGB 108, 73, 207 CMYK 75, 80, 0, 0 RAL 300 30 40 Purple 120 HEX #7E63CA RGB 126, 99, 202 CMYK 63, 65, 0, 0 RAL 290 50 40 Purple 110 HEX #9C7FCB RGB 156, 127, 203 CMYK 45, 50, 0, 0 RAL 300 60 30 Purple 100 HEX #B198DB RGB 177, 152, 219 CMYK 30, 40, 0, 0 RAL 300 70 25 Purple 90 HEX #C5AFE9 RGB 197, 175, 233 CMYK 30, 30, 0, 0 RAL 290 70 20 Purple 80 HEX #E5D5FE RGB 229, 213, 254 CMYK 20, 20, 0, 0 RAL 290 80 15 Purple 70 HEX #F4EEFF RGB 244, 238, 255 CMYK 13, 20, 0, 0 RAL 320 80 10 Pink 140 HEX #65056B RGB 101, 5, 107 CMYK 70, 100, 20, 0 RAL 320 30 35 Pink 130 HEX #801489 RGB 128, 20, 137 CMYK 60, 100, 20, 0 RAL 320 30 40  Pink 120 HEX #93319C RGB 147, 49, 156 CMYK 55, 100, 0, 0 RAL 330 40 45  Pink 110 HEX #B060B7 RGB 176, 96, 183 CMYK 35, 75, 0, 0 RAL 340 50 40 Pink 100 HEX #E89FDD RGB 232, 159, 221 CMYK 5, 50, 0, 0 RAL 340 70 30 Pink 90 HEX #FFBEF5 RGB 255, 190, 245 CMYK 0, 40, 0, 0 RAL 3407030 Pink 80 HEX #FFD7F5 RGB 255, 215, 245 CMYK 0, 20, 0, 0 RAL 350 80 15 Pink 70 HEX #FFEFFB RGB 255, 239, 251 CMYK 0, 10, 0, 0 RAL 340 92 05 Warm Red 140 HEX #6E1937 RGB 110, 25, 55 CMYK 35, 95, 45, 50 RAL 350 20 30 Warm Red 130 HEX #8C2D4B RGB 140, 45, 75 CMYK 30, 90, 40, 30 RAL 0103035 Warm Red 120 HEX #C82864 RGB 200, 40, 100 CMYK 15, 95, 35, 5 RAL 360 40 50 Warm Red 110 HEX #DE3E64 RGB 222, 62, 100 CMYK 5, 90, 50, 0 RAL 010 50 50  Warm Red 100 HEX #E85F80 RGB 232, 95, 128 CMYK 0, 60, 30, 0 RAL 010 60 45 Warm Red 90 HEX #FF9196 RGB 255, 145, 150 CMYK 0, 55, 30, 0 RAL 020 70 30  Warm Red 80 HEX #FEC5C6 RGB 254, 197, 198 CMYK 0, 35, 15, 0 RAL 010 80 20 Warm Red 70 HEX #FFE2E2 RGB 255, 226, 226 CMYK 0, 20, 10, 0 RAL 010 90 10 Orange 140 HEX #BF430D RGB 191, 67, 13 CMYK 20, 80, 100, 0 RAL 050 50 78 Orange 130 HEX #E95D21 RGB 233, 93, 33 CMYK 0, 75, 90, 0 RAL 050 60 80 Orange 120 HEX #E77433 RGB 231, 116, 51 CMYK 0, 70, 90, 0 RAL 050 60 60 Orange 110 HEX #EB8F5C RGB 235, 143, 92 CMYK 0, 50, 65, 0 RAL 050 60 50 Orange 100 HEX #F8A171 RGB 248, 161, 113 CMYK 0, 45, 50, 0 RAL 050 70 40 Orange 90 HEX #FFB084 RGB 255, 176, 132 CMYK 0, 40, 45, 0 RAL 050 70 30 Orange 80 HEX #FFC5A5 RGB 255, 197, 165 CMYK 0, 30, 35, 0 RAL 060 80 30 Orange 70 HEX #FFE2D2 RGB 255, 226, 210 CMYK 0, 20, 20, 0 RAL 050 90 05 Yellow 140 HEX #8D6B06 RGB 141, 107, 6 CMYK 30, 45, 100, 15 RAL 080 50 50 Yellow 130 HEX #9E790D RGB 158, 121, 13 CMYK 20, 40, 100, 15 RAL 080 60 50 Yellow 120 HEX #B4890A RGB 180, 137, 10 CMYK 10, 40, 100, 10 RAL 080 60 70 Yellow 110 HEX #F3C640 RGB 243, 198, 64 CMYK 5, 20, 95, 0 RAL  085 80 70 Yellow 100 HEX #FFDC73 RGB 255, 220, 115 CMYK 0, 15, 60, 0 RAL 090 80 50 Yellow 90 HEX #FFEB91 RGB 255, 235, 145 CMYK 0, 5, 55, 0 RAL 090 80 30 Yellow 80 HEX #FFFAAF RGB 255, 250, 175 CMYK 0, 0, 40, 0 RAL 0959030 Yellow 70 HEX #FFFFCD RGB 255, 255, 205 CMYK 0, 0, 25, 0 RAL 100 90 05    Beige 110 HEX #D8BDA4 RGB 216, 189, 164 CMYK 5, 20, 30, 5 RAL 075 70 20 Beige 100 HEX #E9D4BF RGB 233, 212, 191 CMYK 5, 15, 20, 0 RAL 075 80 20 Beige 90 HEX #F5E6D7 RGB 245, 230, 215 CMYK 3, 11, 15, 0 RAL 050 90 05 Beige 80 HEX #FFF5E6 RGB 255, 245, 230 CMYK 0, 5, 10, 0 RAL 050 92 05 Beige 70 HEX #FFF9F0 RGB 255, 249, 240 CMYK 0, 5, 5, 0 RAL 050 92 05 White HEX #FFFFFF RGB 255, 255, 255 CMYK 0, 0, 0, 0 RAL OTTO-Rot OTTO-Rot HEX #EB001F RGB 235, 0, 31 CMYK 0, 100, 95, 0 Auf dem OTTO-Rot darf nur die Farbe White verwendet werden. Dementsprechend muss die Schrift hier auf Lesbarkeit geprüft werden: AA-Level: Texte mit einer Mindestgröße von 18pt Regular oder 14pt Bold erfüllt ein. Sustainable Green – Farbabstufungen Sustainable Green 140 HEX #3C5939 RGB 60, 89, 57 CMYK 0, 0, 0, 0 PMS-C Sustainable Green 130 HEX #50734D RGB 80, 115, 77 CMYK 0, 0, 0, 0 PMS-C Sustainable Green 120 HEX #658C62 RGB 101, 140, 98 CMYK 28, 0, 30, 45 PMS-C Sustainable Green 110 HEX #7EA87B RGB 126, 168, 123 CMYK 60, 20, 60, 0 PMS-C 4207C Sustainable Green 80 HEX #BFECBB RGB 191, 236, 187 CMYK 0, 0, 0, 0 PMS-C Sustainable Green 70 HEX #E5FBE3 RGB 229, 251, 227 CMYK 0, 0, 0, 0 PMS-C Das Sustainable Green erhält aus Accessibility-Gründen zudem Abstufungen in der Farbigkeit. Farbeinsatz Logo Die bevorzugte Variante des Logos ist die primäre Version in OTTO-Rot. Dieses Logo sollte stets auf hellen Hintergründen platziert werden. Ein weißes Logo sollte hingegen immer auf dunklen Farbflächen verwendet werden. Schrift & Farben Überschriften sind ausschließlich in OTTO-Rot oder White zu setzen. Während Fließtexte nur in Dark Grey oder White gehalten werden. OTTO-Rot HEX #EB001F RGB 235, 0, 31 CMYK 0, 100, 95, 0 Black HEX #212121 RGB 33, 33, 33 CMYK 0, 0, 0, 76 White HEX #FFFFFF RGB 255, 255, 255 CMYK 0, 0, 0, 0 Layoutsystem Das Layoutsystem basiert auf einem modularen, dynamischen und zugleich einfachen Designprinzip, das es ermöglicht, mit Texten, Bild- und Farbflächen klar strukturierte und ansprechende Gestaltungen zu entwickeln. Dieses flexible System unterstützt die visuelle Kommunikation und passt sich je nach Touchpoint und Zielgruppe ideal an. Farbkombinationen erstellen Für jede Kampagne wird eine spezifischer Farbkombination erstellt. Dabei können alle Farben und Farbabstufungen des gesamten Spektrums verwendet werden, wobei folgende Punkte zu beachten sind: 1. Eine Farbkombination für eine Kampagne besteht immer aus 3 Farbfamilien zuzüglich OTTO-Rot & White. Insgesamt beinhaltet ein Farbcode optimalerweise 11 Shades. 4.Zusätzlich können weitere Shades ergänzt werden. Auch Shades, die einzig als Akzentfarben ohne Text verwendet werden können. Zuletzt geändert am 20. Mai 2026 um 16:20