--- title: "Tutorials: toujou-Color-Settings – Hier ist toujou." url: "https://www.toujou.de/service/toujou-setup/farben-festlegen/" description: "Der vierte Schritt zu Ihrer individuellen TYPO3-Website: Corporate Design liegt bereit? Wir übersetzen Ihre individuelle Farbwelt." date: 2018-08-03 modified: 2022-09-27 --- # Tutorials: toujou-Color-Settings – Hier ist toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [toujou Setup](https://www.toujou.de/service/toujou-setup/) 4. [Farben festlegen](https://www.toujou.de/service/toujou-setup/farben-festlegen/) Color Settings ============== In diesem Theme-Abschnitt finden Sie alle Einstellungen, um Ihre Website mithilfe von Farben unverwechselbar zu gestalten. Reiter: »Color« --- Schritt für Schritt --------------------- [ ![](https://www.toujou.de/_assets/processed/7F1YjbDpOS_olv94vWpJGY2Urc1YHBLcazzYTaDENJM/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUhpbnRlcmdydW5kZmFyYmVfNTQzNTg5OTczYg:t/cb:fe8b1acb8a69b2cd4a8c4adbb43d7013bd505e66/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtSGludGVyZ3J1bmRmYXJiZS5wbmc) ](https://www.toujou.de/_assets/processed/HqLNc6fKDOaPJKM0xmDlBMtI8cW9vhoxt3G78vH_8pA/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUhpbnRlcmdydW5kZmFyYmVfZTBkNTk1Nzk1Ng:t/cb:fe8b1acb8a69b2cd4a8c4adbb43d7013bd505e66/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtSGludGVyZ3J1bmRmYXJiZS5wbmc) ### Hintergrundfarbe: - Bei *Hintergrundfarbe* stellen Sie mit einem HTML-Code die Hintergrundfarbe Ihrer Website ein. - Klicken Sie den Reiter **Farbe**. - Für die Farbauswahl stehen Ihnen in der *Hintergrundfarbe-Fläche* die Auswahl via **Cursor im Farbfeld** sowie die **Eingabe des Hex-Werts** zur Verfügung. - Den Hex-Wert bildet den RGB-Wert in einer sechsstelligen Buchstaben- oder Zahlenkombination ab. Er eignet sich, wenn Sie bereits die genaue Farbe kennen. Für die Hex-Werte finden Sie unzählige Farbtafeln im Netz. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. [ ![](https://www.toujou.de/_assets/processed/r2Bh5jSCMYeChJwyfhgti85lHh_P6iZsE8CLloHOVJU/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVNjaHJpZnRmYXJiZV84NmE0NTQ2ZTQ3:t/cb:263c597e74177ffeb1dbb79706b05c00db118fcd/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtU2NocmlmdGZhcmJlLnBuZw) ](https://www.toujou.de/_assets/processed/TJsEzMl6CHpqEmNG-EI225Zvw0uiYLKz1fK-cNq2JdM/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVNjaHJpZnRmYXJiZV8wZTQzMWQ0YThk:t/cb:263c597e74177ffeb1dbb79706b05c00db118fcd/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtU2NocmlmdGZhcmJlLnBuZw) ### Schriftfarbe: - Stellen Sie die Schriftfarbe Ihrer Website ein. Definieren Sie einen Basiswert sowie eine helle und eine dunkle Variante in den jeweiligen *Schriftfarben-Fläche*. - Für die Farbauswahl stehen Ihnen die Auswahl via **Cursor im Farbfeld** sowie die **Eingabe des Hex-Werts** zur Verfügung. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. [ ![](https://www.toujou.de/_assets/processed/X5Nsn_dzu1C5ph-nh8jsCTeDNJ4QNyFvFda_IFOIb-0/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVByaW1hZXJmYXJiZV82YzAyN2I4Yzdh:t/cb:084c02ae4cf2c0acc6be16b24fc4e3e359086aa1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtUHJpbWFlcmZhcmJlLnBuZw) ](https://www.toujou.de/_assets/processed/ApgGMMqhgOFca3uT4z_HNkzYmdtpYK3AXGOsy6pXX70/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVByaW1hZXJmYXJiZV9hZjhiYmQzOGZk:t/cb:084c02ae4cf2c0acc6be16b24fc4e3e359086aa1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtUHJpbWFlcmZhcmJlLnBuZw) ### Primärfarben: - Die Primärfarbe Ihrer Website definieren Sie in der *Primärfarben-Fläche.* Auch hier lässt sich ein Basiswert samt einer hellen und eine dunklen Variante festlegen. - **Cursor im Farbfeld** und **Eingabe des Hex-Werts** stehen Ihnen auch hier wieder für die Farbauswahl zur Verfügung. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. [ ![](https://www.toujou.de/_assets/processed/VZqzk8py3zDfV-wrpJbOSZ1KL9JcJH1bdT-r2fVQg48/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVNla3VuZGFlcmZhcmJlXzAwZjM1MzcyMTQ:t/cb:e59fe2aa34868e3dc7d2bb8ad472b92aadd817fa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtU2VrdW5kYWVyZmFyYmUucG5n) ](https://www.toujou.de/_assets/processed/lPXGqThutsfRIFzeafX4GPzHHAc2RD9sr2BhPlarjs0/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVNla3VuZGFlcmZhcmJlXzZjMWE4YWViMTA:t/cb:e59fe2aa34868e3dc7d2bb8ad472b92aadd817fa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtU2VrdW5kYWVyZmFyYmUucG5n) ### Sekundärfarben: - Analog zur Primärfarbe legen Sie auch für die Sekundärfarbe die gewünschten Farbcodes fest. - Auch hier bestehen die drei Optionen Basiswert, helle und dunkle Alternative, die Sie via **Cursor im Farbfeld** sowie die **Eingabe des Hex-Werts** bestimmen. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. [ ![](https://www.toujou.de/_assets/processed/eSJNZCPes8lFdcg2D1G4FHNJ1MKpeDAwb4jCX25ieHQ/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVp1c2F0emZhcmJlbl8wZjgzZjFiZjY1:t/cb:2559a14f6426550a201eab4ef9bab0d4513d098c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtWnVzYXR6ZmFyYmVuLnBuZw) ](https://www.toujou.de/_assets/processed/tOWgQcQyKFTiC4VtKDHpApwN1JO4jEPXtUPoK9WY68o/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLVp1c2F0emZhcmJlbl81NTQxNTQyZmM1:t/cb:2559a14f6426550a201eab4ef9bab0d4513d098c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtWnVzYXR6ZmFyYmVuLnBuZw) ### Signalfarben: - Bestimmte Dialogmeldungen und Systemantworten können farblich betont werden, hier bei den Eingabefeldern *Farbe für Erfolgsmeldungen*, *Farbe für Warnungen* und *Farbe für Fehlermeldungen*. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. [ ![](https://www.toujou.de/_assets/processed/xh2P0lZvTsfXLONIAfyxuvAfMHwpshCmD9xYEiiCbi4/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLU5hdmlnYXRpb25zZmFyYmVuXzU2ZDljMDY2MTU:t/cb:02762833533878dda2285c5937c8adbc2c332cda/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtTmF2aWdhdGlvbnNmYXJiZW4ucG5n) ](https://www.toujou.de/_assets/processed/nxx3cUICH7-BudzzFeee3HC-dQ79KJcDvlLR-22yrKw/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLU5hdmlnYXRpb25zZmFyYmVuXzBjMjY3YTYxZmE:t/cb:02762833533878dda2285c5937c8adbc2c332cda/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtTmF2aWdhdGlvbnNmYXJiZW4ucG5n) ### Desktop- und Mobil-Navigation: - Hier legen Sie fest, welches der eingestellten Farbsets für die Navigation am Desktop sowie an mobilen Geräten verwendet wird. Für die *Desktop Navigation* werden die Werte **Primärfarben**, **Sekundärfarben** und **Schriftfarben** angeboten, für die *Mobile Navigation* nur **Primärfarben** sowie **Sekundärfarben**. - Klicken Sie über der Arbeitsfläche auf den Button **Speichern**. --- [ ![](https://www.toujou.de/_assets/processed/cQlnOHnec0AqyDj4k9Q95b605_tAxZ5s1J1aPjeXusY/q:85/c:1685.66:947:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUJhcnJpZXJlZnJlaWhlaXQtT3B0aW9uZW5fZmFmY2EzZjEzYw:t/cb:3750404012fd4d7cb5749ffe20cbd24357aa38de/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtQmFycmllcmVmcmVpaGVpdC1PcHRpb25lbi5wbmc) ](https://www.toujou.de/_assets/processed/--2m3e5ywymeIHp9g4e6mYRWoyjwTYbRUi1xZSKlqH8/q:85/w:1024/h:510/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUJhcnJpZXJlZnJlaWhlaXQtT3B0aW9uZW5fMmEyNmRjMTEyNw:t/cb:3750404012fd4d7cb5749ffe20cbd24357aa38de/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtQmFycmllcmVmcmVpaGVpdC1PcHRpb25lbi5wbmc) ### Farbeinstellungen und Barrierefreiheit: - In toujou können Sie Ihre eingestellten Farben auf ausreichenden Kontrast hinsichtlich Barrierefreiheit / WCAG testen und erhalten auch Beispiele für verschiedene Anwendungsfälle der Schrift-, Primär-, und Sekundärfarben. - Die Farbkontraste aktivieren Sie über den Button **Kontrasttestergebnisse anzeigen**. - Für die Anzeige der Beispiele aktivieren Sie die Ansicht via Button **Farbvorschauen anzeigen**. - Unter *Erforderliche Kontrastverhältnisse für die WCAG-Konformität* erhalten Sie zusätzliche Informationen die Farbkontraste betreffend. [ ![](https://www.toujou.de/_assets/processed/nRba04KB_JfpMZ1l5eESSn-eXB3-td4J3niVQgmXQ58/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUtvbnRyYXN0ZXJnZWJuaXNzZV84OGU5ZjY3MjIy:t/cb:56cab3cc3d5a4ddc3fcf275b24883c38060f19e8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtS29udHJhc3RlcmdlYm5pc3NlLnBuZw) ](https://www.toujou.de/_assets/processed/aVVGOqs7PWVX8m-BxZxBtkNyXlLQVQFaFBHG9YM7gYw/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUtvbnRyYXN0ZXJnZWJuaXNzZV9hMGVhNjcyOWE1:t/cb:56cab3cc3d5a4ddc3fcf275b24883c38060f19e8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtS29udHJhc3RlcmdlYm5pc3NlLnBuZw) ### Kontrasttestergebnisse: - Nach Aktivierung Farbkontrastergebnisse erhalten Sie eine Analyse, die sich an der Hintergrundfarbe orientiert. Angezeigt werden Ergebnisse zur Schriftfarbe, (hier beispielhaft markiert), Primärfarbe, Sekundärfarbe sowie Signalfarben. - Grün bedeutet, das ausreichend Kontrast im Sinne der Barrierefreiheit / WCAG besteht. Rot signalisiert Verbesserungsbedarf. - Die Ansicht deaktivieren Sie durch erneuten Klick auf den Button **Kontrasttestergebnisse ausblenden**. [ ![](https://www.toujou.de/_assets/processed/NPEC7OVq2-qKa1DyIXjJV0gP0wk_oVBsQKfFxhY_0PQ/q:85/c:1666.08:936:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUZhcmJ2b3JzY2hhdV9jNTY1YTUzMmI2:t/cb:007a8aabf288a4ddc32dfecc4d1a1b704e0cbf8b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtRmFyYnZvcnNjaGF1LnBuZw) ](https://www.toujou.de/_assets/processed/pm4tEFGpDZEXGg86UNBWK_jB8SHKPzIhMzXCE4qQjmg/q:85/w:1024/h:502/fn:Y3NtX0NvbG9yLVNldHRpbmdzLUZhcmJ2b3JzY2hhdV9iZDZiOTIxMGZl:t/cb:007a8aabf288a4ddc32dfecc4d1a1b704e0cbf8b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDRfY29sb3IvQ29sb3ItU2V0dGluZ3MtRmFyYnZvcnNjaGF1LnBuZw) ### Farbvorschauen: - Die von Ihnen vorgenommenen Farb-Einstellungen können Sie für verschiedene Anwendungsfälle auf Ihrer Website beispielhaft darstelllen. - Dazu gehören [Headlines](https://www.toujou.de/service/elementbibliothek/text-elements/headline-element/), Bulletpoints, [Linkbuttons](https://www.toujou.de/tutorials/seiteninhalte/textbearbeitung/ankerlinks-setzen/), Checkboxen in Formularen sowie Meldungs-Buttons, die Sie über die [Signalfarben](#c1001564) definieren. - Aktivieren Sie die Ansicht durch Klick auf den Button **Farbvorschauen anzeigen**. Durch Klick auf den Button **Farbvorschauen ausblenden** deaktivieren Sie die Ansicht. Verknüpfte Elemente ------------------- Elemente aus der [toujou-Elementbibliothek](https://www.toujou.de/service/elementbibliothek/), die mit diesen Einstellungen in Verbindung stehen. [Headline Element](https://www.toujou.de/service/elementbibliothek/text-elements/headline-element/) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)