Verwenden von Paletton zur Auswahl der Farbpalette Ihrer WordPress-Website

Veröffentlicht: 2020-07-31

In diesem Beitrag sehen wir uns an, wie Sie Paletton verwenden, um die Farbpalette Ihrer WordPress-Website auszuwählen. Paletton ist ein benutzerfreundlicher Online-Farbpalettengenerator, der Ihnen viel Zeit spart. Nicht jeder Webdesign-Kunde hat ein Markenfarbschema und es liegt an Ihnen, die Farben für seine Website auszuwählen. Hier kommt Paletton ins Spiel.

Unter all den online verfügbaren Optionen ist Paletton aufgrund der Live-Beispielfunktion einer der Favoriten. Die App wurde seit einigen Jahren nicht mehr aktualisiert, funktioniert aber zum Glück immer noch perfekt für das, was Sie brauchen. Sie finden die App auf Paletton.com. Ignorieren Sie die Google-Anzeigen rundherum und Sie können loslegen.

Warum ist es wichtig, die richtigen Farben für Ihre Website zu wählen?

Bevor wir uns eingehend mit der Verwendung der Paletton-App befassen, wollen wir kurz überlegen, warum es wichtig ist, die richtige Farbpalette auf einer Website zu haben. Wie Sie wissen, tragen Farben unterschwellige Botschaften, die die Emotionen des Betrachters und letztendlich seine Entscheidungen beeinflussen. Die Farben müssen auch die Firmenmarke der Website repräsentieren.

Der beste Weg, eine Farbpalette für eine Website auszuwählen, besteht darin, die Stimmung zu berücksichtigen, die sie darstellen soll. So wie Innenarchitekten die Farben wählen, um einem Raum eine bestimmte Stimmung zu verleihen, können Sie dasselbe für eine Website tun. Denken Sie an den ersten Eindruck; Wenn jemand auf einer Website mit leuchtenden, lebendigen Farben landet, wird er zufrieden sein und vielleicht sogar lächeln. Eine Website mit einer neutralen, gedämpften Palette kann eine Person beruhigen und ein Gefühl von Komfort vermitteln.

Natürlich müssen auch die von Ihnen gewählten Farben zur Marke passen. In der Kombination und Tonalität stehen Sie als Webdesigner im Mittelpunkt. Die Wahl der besten Verwendung der Farben in einer Palette ist auch für die Stimmung einer Website wichtig.

Aus diesem Grund ist Paletton einer der beliebtesten Farbpalettengeneratoren. Sie können eine Vorschau anzeigen, wie eine Farbpalette in verschiedenen Kombinationen auf einer Website angewendet wird. Dies hilft Ihnen, bessere Entscheidungen über die von Ihnen gewählten Farben zu treffen. Die dunkle Farbe als Hintergrund anstelle der hellen Farbe zu verwenden, macht einen großen Unterschied im endgültigen Design.

Alle Farbpaletten beginnen mit einer Grundfarbe

Für jede Farbpalette, die Sie auf Paletton erstellen, benötigen Sie eine Grundfarbe, mit der Sie arbeiten können. Aber woher wissen Sie, welche Grundfarbe Sie verwenden sollen?

Sehen Sie sich die Inhalte an, die Ihnen der Kunde gegeben hat, sein Branding und alle Bilder, die Ihnen zur Verfügung gestellt wurden.

  • Wenn Ihr Kunde ein Farblogo hat, verwenden Sie dieses als Grundfarbe.
  • Verwenden Sie eine Pipette, um eine oder zwei Farben aus einem der Bilder zu extrahieren, die Ihnen der Kunde gegeben hat.
  • Fragen Sie Ihren Kunden nach der Stimmung und Markengeschichte seines Unternehmens.
  • Wenn Sie Webdesigns erstellen, um sie als Vorlagen oder untergeordnete Themen zu verkaufen, oder für Ihr Portfolio, wählen Sie eine Farbe entsprechend der Stimmung, die Sie mit Ihrem Design wünschen.

Wenn Sie eine Palette auf Paletton erstellen, können Sie entweder eine visuelle Grundfarbe oder einen Hex-Code im Hex-Tab der Grundfarbe auswählen.

Kennenlernen der Benutzeroberfläche der Paletton-App

Jetzt ist es an der Zeit, Paletten zu erstellen. Schauen wir uns an, wie alles eingerichtet ist. Die App hat zwei Hauptbereiche; auf der linken Seite dreht sich alles um die Farbauswahl und auf der rechten Seite dreht sich alles um die Vorschau.

Werfen wir zunächst einen Blick auf das Farbauswahlwerkzeug auf der linken Seite. Was auch immer Sie auf dieser Seite ändern, verändert die Ergebnisse der rechten Seite, aber es ist am besten, zuerst zu verstehen, wozu jede Seite fähig ist.

Linke Seite – Die Farbwähler

Das erste, was Ihnen beim Betreten der Paletton-App auffällt, ist das Farbrad. Die Standardansicht hat die Grundfarbe als neutrales Rot in einer monochromatischen (1-farbigen) Palette.

Sie sehen einen Satz von 5 Punkten in einer Linie innerhalb des Farbkreises. Der Punkt in der Mitte ist die Grundfarbe, zwei Punkte fügen Helligkeit und Entsättigung hinzu, während die anderen beiden Kontrast und Sättigung hinzufügen.

Farbkombinationen

Oberhalb des Farbkreises befinden sich fünf Kombinationsknöpfe. Die Optionen sind von links nach rechts:

  • Monochromatisch – 1 Farbe + optional Komplementär
  • Angrenzend – 3 Farben + optional ergänzend
  • Triadisch – 3 Farben + optional ergänzend
  • Tetrad – 4 Farben
  • Freier Stil – 4 Farben

Grundfarbe

Um die Grundfarbe zu ändern, können Sie einen der folgenden Schritte ausführen:

  1. Ziehen Sie den Hauptfarbpunkt an eine beliebige Stelle im äußeren Kreis.
  2. Ziehen Sie den mittleren Punkt innerhalb des Kreises, um einen anderen Farbton der im äußeren Kreis ausgewählten Hauptfarbe auszuwählen
  3. Geben Sie einen Hex-Code auf der unteren linken Registerkarte ein.
  4. Um eine Sekundärfarbe in die Grundfarbe umzuwandeln, müssen Sie dies auf der Vorschauseite des Bildschirms tun. Dazu später mehr.

Wenn Sie den Grundfarbpunkt innerhalb des Kreises ziehen, bewegen sich alle anderen Punkte mit und zeigen die Farbtonvarianten.

Sie können auch einzelne Farben auswählen, indem Sie vor dem Ziehen auf die Umschalttaste klicken.

Feinabstimmung

Über die Schaltfläche oben links im Kreis können Sie die Farbtongrade zur Feinabstimmung von Hand eingeben. Es gibt weitere Möglichkeiten zur Feinabstimmung mit der Schaltfläche unten rechts. Hier können Sie alles an den von Ihnen gewählten Farben verfeinern:

  • Farbton
  • Sättigung
  • Helligkeit
  • Kontrast

Klicken Sie einfach auf die Schaltflächen, um jeden Effekt um 1, 5 oder 10 Grad hinzuzufügen oder zu verringern.

Voreinstellungen nach Grundfarbe

Der Farbauswahlbereich hat zwei Hauptauswahlmöglichkeiten; Farben und Voreinstellungen. Wir haben uns den Farbabschnitt oben angesehen. Besuchen wir nun die Registerkarte Voreinstellungen. Je nach ausgewählter Grundfarbe und -kombination zeigen die Voreinstellungen eine Vielzahl von Variablen. Diese sind hilfreich, wenn Sie nicht selbst mit Farbton, Sättigung, Helligkeit und Kontrast herumspielen möchten.

Diese Voreinstellungen geben Ihnen eine gute Vorstellung davon, was mit den von Ihnen ausgewählten Farben möglich ist und ob es mögliche sekundäre Paletten gibt, die die erste ergänzen.

Rechte Seite – Die Palettenvorschauen

Auf der rechten Seite des Paletton sehen Sie alle Live-Vorschauen. Der Hauptbereich ist in vier Abschnitte unterteilt, um monochrome Paletten oder andere mit zwei, drei oder vier Farben visualisieren zu können. Jeder Farbabschnitt zeigt die Grundfarbe im größeren Bereich und vier Variationen darum herum.

In der Abbildung unten sehen Sie, wie die Farbauswahl und die Vorschau zusammenarbeiten.

Unter dem Vorschauquadrat befindet sich eine Registerkarte, auf der Sie das Aussehen der Vorschau ändern können. Die Standardansicht ist definitiv die beste, aber falls Sie das Aussehen der Dinge ändern möchten, ist diese Schaltfläche für Sie da.

Wechseln der Grundfarbe

Im Vorschaubereich können Sie auf eine der Sekundär- oder Komplementärfarben klicken und sie in die Grundfarbe umwandeln. Bewegen Sie den Mauszeiger über eine beliebige Farbe und klicken Sie auf "Weitere Informationen". Abgesehen davon, dass Sie alle Informationen für diese Farbe sehen, sehen Sie eine Schaltfläche mit der Aufschrift "Als Grundfarbe übernehmen". Wenn Sie darauf klicken, ändern sich alle Farben in der Palette.

Verwenden der Sehsimulationsfunktion von Paletton

Eine der besten Eigenschaften von Paletton ist die Fähigkeit zu beurteilen, wie Ihre Farben in unerwarteten Fällen aussehen werden. Die Funktion heißt 'Vision Simulation' und Sie finden sie unter dem Vorschauquadrat. Dies sind die verfügbaren Simulationen:

  • Farbenblind-Simulation
  • Entsättigen
  • Gamma-Simulation
  • Webfarben (alte 216-Farbpalette)

Dies ist ein großartiges Werkzeug, wenn Sie eine Palette für eine Website erstellen. Sie können sehen, ob Ihre Palette in all diesen Fällen in Ordnung ist. Am nützlichsten ist die Simulation der Farbenblindheit. Es ist gut, sicherzustellen, dass alle Farben voneinander unterschieden werden!

Live-Beispiele Ihrer Farbpalette sehen

Ein weiteres praktisches Tool in Paletton ist die Registerkarte, die Ihnen zeigt, wie die Palette auf einer Beispielwebsite und anderen Designstilen aussehen wird. Diese Simulationen finden Sie im Reiter „BEISPIELE…“. Die erste Wahl ist ein Seitenlayout und dieses hat einige Optionen:

  • Weiße Seite
  • Dunkle Seite
  • Positives Design
  • Negatives Design

Die App kann Ihnen andere Simulationen von künstlerischen Designs mit Ihrer gewählten Farbpalette anzeigen. Es gibt einige statische und animierte Beispiele. Diese sind praktisch, um eine gute Vorstellung davon zu bekommen, wie viel Potenzial Ihre Farbpalette hat.

Darüber hinaus können Sie in dieser Phase Ihre Palette auf verschiedene Weise randomisieren:

  • Ähnliche Farben, anders als Stil
  • nicht wie
  • Ähnlich
  • Im Gegensatz zu Farben, ähnlicher Stil

Stellen Sie sicher, dass Sie eine Kopie Ihrer Palette erhalten, bevor Sie sie randomisieren! Es gibt kein Zurück.

Exportieren und Kopieren einer Farbpalette

Nachdem Sie Ihre Farbpalette angepasst und in der Vorschau angezeigt haben, ist es an der Zeit, sie aus Paletton zu exportieren und für Ihre Website vorzubereiten.

Es gibt verschiedene Möglichkeiten, Ihre Palette zu kopieren oder zu exportieren. Oben rechts im Fenster befindet sich eine Schaltfläche mit der Aufschrift "Palette teilen", die jedoch vor einiger Zeit kaputt zu sein scheint. Ignorieren Sie diese Schaltfläche einfach, da sie nichts bewirkt.

Kopieren Sie Ihre Palette auf eine dieser anderen Arten:

  • Kopieren Sie die Hex-Codes für einzelne Farben, indem Sie mit der Maus darauf zeigen und klicken, um das Infofenster zu öffnen.
  • Klicken Sie auf 'TABLES/EXPORT', um die Paletten in verschiedenen Formaten anzuzeigen.
  • Exportieren Sie auf der Registerkarte TABLES/EXPORT' in einem der folgenden Formate:
    • Farblisten
      • HTML
      • WENIGER
      • CSS
      • SASS
      • XML
      • Text
    • Farbmuster
      • PNG-Bild
      • ACO (Photoshop)
      • GPL (Gimp)
  • Sie können auch Kombinationen der Farben in der ausgewählten Palette anzeigen.

Hinzufügen der Farben zu Ihrer WordPress-Website

Jetzt ist es an der Zeit, die Farben zu Ihrer Website hinzuzufügen!

Da die Paletton-App seit mehr als 6 Jahren nicht aktualisiert wurde, ist es besser, die einfache Textversion herunterzuladen und die Farben manuell in Ihr Stylesheet einzugeben. Die Exportfunktionen funktionieren möglicherweise nicht mit dem HTML- oder CSS-Stylesheet Ihrer Website.

Um Ihrem Divi-Theme Farben hinzuzufügen, navigieren Sie zu Ihren Themenoptionen und geben Sie jede Farbe mit dem entsprechenden Hex-Code ein.

Das ist ein Color Wrap!

Wir haben die Schritte zum Erstellen einer Farbpalette mit Paletton abgeschlossen. Die Grundfunktionen der App ähneln denen anderer Farbpaletten-Apps, aber was sie von den anderen abhebt, ist die Möglichkeit, die Farben in Live-Beispielen sowohl für Webdesign als auch für andere künstlerische Designs zu sehen. Schade, dass die App seit über 6 Jahren nicht mehr aktualisiert wurde. Zum Glück scheint es durch diese Google-Anzeigen am Leben zu bleiben!.

Was ist Ihre Lieblings-Farbpaletten-Generator-App? Hast du Paletton schon probiert? Lass es uns in den Kommentaren wissen!

Ausgewähltes Bild über DaGaAl / shutterstock.com