# Web-App der Woche: Paletton

Nicht jeder Webseitenbetreiber hat das Gespür eines Designers. Doch das **Farbkonzept Ihres Online-Auftritts** muss darunter nicht leiden. Der beliebte Color Scheme Designer kommt in neuem Gewand daher: Die kostenlose Web-App [Paletton](https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF "Die Web-App Paletton ist einen Besuch wert") hilft Ihnen, mit wenigen Klicks harmonische Farbzusammenstellungen zu kreieren. Das Online-Tool stützt sich auf die Erkenntnisse der Farblehre und ermittelt **für jeden Grundton eine ergänzende Farbpalette**. So geben Sie nicht nur den Gestaltungselementen Ihrer Website einen professionellen Anstrich, sondern überzeugen auch in Präsentationen oder Infografiken mit einer durchdachten Farbkomposition.

[![Bild: Startseite der Web-App Paletton](https://www.ionos.at/digitalguide/fileadmin/_processed_/3/a/csm_paletton-1_37feb87c12.webp "Startseite der Web-App Paletton")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-1.jpg) Startseite der Web-App Paletton ## So nutzen Sie Paletton für Ihr Farbkonzept

Ihr Farbkonzept erstellen Sie mit Paletton **in fünf verschiedenen Modi**: *Monochromatic*, *Adjacent* *Colors*, *Triad*, *Tetrad* und *Free-Style*. Ausgangspunkt ist eine beliebige Basisfarbe, die Sie wahlweise mit bis zu drei ergänzenden Farbtönen und der jeweiligen Komplementärfarbe kombinieren. Nutzen Sie dazu folgende Schaltfläche:

[![Bild: Paletton Schaltflächen](https://www.ionos.at/digitalguide/fileadmin/_processed_/9/a/csm_paletton-2_649567b3f5.webp "Paletton Schaltflächen")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-2.jpg) Paletton Schaltflächen #### Die Modi im Überblick:

- **Monochromatic**: Entscheiden Sie sich für den monochromatischen Modus, besteht Ihre Farbpalette aus dem gewählten Grundton in fünf Schattierungen. Diesen kombinieren Sie wahlweise mit der jeweiligen Komplementärfarbe.
- **Adjacent Colors:** Im Modus *Adjacent Colors* erzeugt Paletton Farbpaletten, indem dem Grundton ihrer Wahl zwei ähnliche Farben zugeordnet werden. Jeder Farbton wird in fünf Schattierungen ausgegeben. Wahlweise kann das Farbschema um die Komplementärfarbe zum Grundton ergänzt werden.
- **Triad**: Farbschemata, die in diesem Modus erstellt werden, bestehen aus drei harmonisch aufeinander abgestimmten Farbtönen in jeweils fünf Schattierungen. Auch hier kann die Komplementärfarbe zum Grundton hinzugefügt werden.
- **Tetrad**: In diesem Modus kombinieren Sie Ihren Grundton mit zwei sekundären Farbtönen und einer Komplementärfarbe. Für jeden Farbton werden jeweils fünf Schattierungen generiert.
- **Free-Style**: Der *Free-Style*-Modus ist nicht an die Regeln des Farbkreises gebunden. Ihnen steht somit frei, vier Farbtöne individuell zu kombinieren. Dieser Modus bietet maximalen Gestaltungsspielraum, generiert aber nicht zwangsläufig harmonische Farbpaletten.

## Der Farbkreis

Die Wahl des Grundtons sowie sekundärer Farben erfolgt anhand eines Farbkreises. Die Bedingung ist intuitiv: Je nachdem, wo Sie die Regler für den Grundton und ergänzende Farben platzieren, generiert Paletton eine auf den Einstellungen beruhende Farbpalette. Nutzen Sie die Modi *Adjacent Colors*, *Triad* oder *Tetrad*, basiert das **Farbkonzept auf vorprogrammierten Kombinationsregeln**, die eine harmonische Zusammenstellung garantieren. Während Sie mithilfe des äußeren Farbringes die Farbwerte definieren, bietet das Innere des Farbkreises die Möglichkeit, die Schattierung der gewählten Farbtöne anzupassen.

[![Bild: Paletton Farbkreis](https://www.ionos.at/digitalguide/fileadmin/_processed_/5/7/csm_paletton-3_e6e13bcf48.webp "Paletton Farbkreis")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-3.png) Paletton Farbkreis ## Farbpalette an Beispielgrafiken testen

Steht Ihr Farbkonzept, können Sie die **Wirkung der gewählten Zusammenstellung** an Beispielgrafiken testen. Nutzen Sie dazu die Schaltfläche *Examples* und wählen Sie zwischen *Page Layout*, *Artwork* oder *Animated*.

[![Bild: Farbpalette testen](https://www.ionos.at/digitalguide/fileadmin/_processed_/4/5/csm_paletton-4_2b1c54e83b.webp "Farbpalette testen")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-4.png) Farbpalette testen ### Farben exportieren

Um an den **Hexadezimalcode** und andere Informationen zu Ihrem erstellten Farbkonzept zu gelangen, klicken Sie einfach auf das jeweilige Farbfeld Ihrer Palette, um das Fenster *Color Info* aufzurufen.

[![Bild: Farben exportieren](https://www.ionos.at/digitalguide/fileadmin/_processed_/c/b/csm_paletton-5_5cfe984693.webp "Farben exportieren")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-5.jpg) Farben exportieren Alternativ bietet Ihnen Paletton die Möglichkeit, die individuelle Farbpalette in diversen Formaten wie CSS, [LESS](https://www.ionos.at/digitalguide/websites/web-entwicklung/less-css-tutorial/ "Less-CSS: Tutorial"), [SASS](https://www.ionos.at/digitalguide/websites/web-entwicklung/sass/ "SASS"), XML oder Swatch-Files für Photoshop zu exportieren. Klicken Sie dazu auf die Schaltfläche *Tables/Export* und wählen Sie das gewünschte Format aus.

[![Bild: Farbpaletten für Photoshop exportieren](https://www.ionos.at/digitalguide/fileadmin/_processed_/4/0/csm_paletton-6_ee6f551ad2.webp "Farbpaletten für Photoshop exportieren")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Websites/paletton-6.jpg) Farbpaletten für Photoshop exportieren Eine kurze Paletton-Einführung in englischer Sprache finden Sie in folgendem Video des Youtube-Nutzers Chris Stefanski:

[YouTube video](https://www.youtube.com/watch?v=XFcqTmLhJFA)


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/webdesign/web-app-der-woche-paletton/](https://www.ionos.at/digitalguide/websites/webdesign/web-app-der-woche-paletton/) for AI/LLM consumption.