Die besten Farbwerkzeuge für Webdesigner

Haufen von buntem Pulver

Als Webdesigner hat eine der wichtigsten Entscheidungen, die wir treffen, mit unserer Farbauswahl zu tun. Wählen Sie die falschen aus, und Sie könnten eine Gelegenheit verpassen. Es ist wahr - die Farben, die wir wählen, können psychologische Auswirkungen auf diejenigen haben, die sie sehen.

Beispielsweise wird Rot im Allgemeinen als energiereiche Farbe angesehen, während Blau Ruhe und Frieden bedeutet. Um diesen Punkt zu veranschaulichen, betrachten Sie die Farben, die Sie möglicherweise auf einer Website verwenden, auf der Kinderspielzeug verkauft wird, im Vergleich zu einer Website für eine Anwaltskanzlei. Die Chancen stehen gut, dass Sie für die ersteren helle, lebendige Farben und für die letzteren gedämpfte Blau- und Grautöne verwenden.

Aber woher weißt du, welche Farben gut zusammenarbeiten? Zum Glück musst du kein Meister sein Farbtheorie eine funktionsfähige Farbpalette zusammenstellen. Um Ihnen bei der wichtigen Aufgabe der Farbauswahl zu helfen, finden Sie hier einige der besten freien Farben Webdesign-Tools (plus einen besonderen Bonus am Ende für Mac-Benutzer).



01. HueSnap

Farbton-Snap-Farbwerkzeug

Lassen Sie sich unterwegs inspirieren und verwandeln Sie sie in Farbpaletten

Inspiration kann jederzeit zuschlagen. Es könnte das Dekor eines Hotelzimmers oder das Licht im Park eines Abends sein, das die Inspiration für Ihr nächstes Website-Farbschema auslöst. In diesem Fall hilft Ihnen HueSnap gerne weiter. Sie können ein Foto aufnehmen und mit HueSnap die Farben aus dem Bild extrahieren und in eine Palette umwandeln.

Die App ist auf den mobilen Einsatz zugeschnitten und Sie können Ihre Paletten speichern und mit anderen teilen. Es gibt zahlreiche Funktionen, mit denen Sie eine Palette ändern können, z. B. Optionen zur Auswahl von Komplementär- und Mischfarben. Ihre Paletten können jeweils bis zu sechs Farben enthalten.

02. Khroma

khroma Farbwerkzeuge

Khroma verwendet KI, um Farben vorzuschlagen, die Ihnen gefallen

Khroma ist ein AI-Farbwerkzeug, mit dem Sie Originalfarbkombinationen einfach durchsuchen und vergleichen können. Damit trainieren Benutzer einen KI-Algorithmus, der sich wie eine Erweiterung ihres Gehirns verhält. Benutzer wählen zunächst 50 Farben aus, die ihnen gefallen. Mit diesen Farben wird ein neuronales Netzwerk trainiert, das Hunderttausende anderer ähnlicher Farben erkennen kann. Erfahren Sie hier mehr über Khroma und wie man es benutzt .

03. Coolors.co

Laptop-, Desktop- und mobile Bildschirme mit Farbpaletten

Der Abschnitt 'Durchsuchen' enthält Hunderte - wenn nicht Tausende - von Palettenoptionen

Coolors bietet eine Vielzahl von Werkzeugen, mit denen Sie die Palette ganz nach Ihren Wünschen einstellen können. Darüber hinaus können Sie Ihre endgültige Kreation in vielen verschiedenen Formaten exportieren, sodass Sie sie praktisch überall verwenden können.

Kostenlose Papiermuster für Grafikdesigner

Kühler sind nicht nur ein Werkzeug zum Erstellen einer Farbpalette, sondern ermöglichen es Ihnen auch, andere fertige Kreationen anderer Benutzer anzuzeigen, um sich inspirieren zu lassen. Der Abschnitt 'Durchsuchen' enthält Hunderte (wenn nicht Tausende) von Paletten, die Sie selbst anzeigen, speichern und bearbeiten können. Noch besser ist, dass Coolors auf Desktop-Computern und als iOS-Anwendung, als Adobe Photoshop- und Illustrator-Add-On und sogar als Google Chrome-Erweiterung für einfachen Zugriff verfügbar ist.

04. Adobe Color CC

Farbradauswahlbildschirm mit Einstellwerkzeugen

Nintendo-Spiel und beobachten Esel Kong
Das ist schon eine Weile her, ist aber immer noch unglaublich nützlich

Das kostenlose Tool Adobe Color CC gibt es schon seit einiger Zeit und es ist eines der besten Farbwerkzeuge für die Auswahl einer Farbpalette. Sie können nicht nur Ihre eigenen Farbschemata erstellen, sondern auch untersuchen, was andere erstellt haben.

Wählen Sie eine Farbe aus dem Rad oder aus einem Bild aus und wenden Sie Farbregeln an, z. B. nur Komplementärfarben, monochromatische Farben oder Schattierungen der ausgewählten Farbe, um eine Farbpalette zu erstellen. Oder klicken Sie auf jede Farbe und erkunden Sie das Farbrad, um die Auswahl anzupassen. Als zusätzlichen Bonus können Sie die von Ihnen erstellten Themen in Ihrer Adobe-Bibliothek speichern.

05. Colordot

Farbbalken mit Referenznummern

Verwenden Sie einfache Mausgesten, um Ihre Farbpalette aufzubauen

Colordot von Hailpixel ist ein hervorragendes kostenloses Online-Tool zum Erstellen einer Farbpalette. Mit einfachen Mausgesten können Sie Farben auswählen und speichern. Bewegen Sie die Maus für den Farbton hin und her. auf und ab für Leichtigkeit; Scrollen Sie zur Sättigung und klicken Sie, um eine Farbe in Ihrer Palette zu speichern. Klicken Sie auf das Umschalt-Symbol, um die RGB- und HSL-Werte der einzelnen Farben anzuzeigen. Es hat auch eine $ 0,99 / £ 0,99 iOS App So können Sie Farben mit Ihrer Kamera aufnehmen.

06. Eierradienten

Eierradienten Screenshot

Farbverlaufsinspiration und zum Nachdenken anregende Namen

Eggradients bietet Ideen für schöne Farbverläufe, die Sie in Ihrer Designarbeit verwenden können und die von jemandem zusammengestellt wurden, der sowohl ein großes Auge für Farbe als auch einen interessanten Sinn für Humor hat. Jeder Verlauf in Eiform hat einen eigenen Namen, der zum Nachdenken anregt. Beispiele sind 'Wozniaks gebrochenes Herz' für ein hellblaues und 'Barmherziger Feind' für einen Übergang von gelb nach grün.

07. 147 Farben

Raster aus mehrfarbigen Farbfeldern

Dieses kostenlose Tool enthält die Standard-CSS-Farben

Wenn Sie für das Generieren verantwortlich sind einfach zu lesendes CSS Manchmal ist die Verwendung von Standardfarben und Farbnamen der richtige Weg. Dank 147 Colors von Brian Maier Jr. können Sie einen Blick auf alle werfen und diejenigen auswählen, die für Sie funktionieren.

Es enthält die 17 Standardfarben sowie 130 weitere CSS-Farbnamen. Filtern Sie die Ergebnisse nach Blautönen, Grüntönen usw. oder wählen Sie aus dem vollen Regenbogen mit 147 Farben.

08. Canva Farbpalettengenerator

Farbauswahlbildschirm des Leinwandwerkzeugs

Erstellen Sie eine Farbpalette basierend auf einem Bild

Der Farbpalettengenerator von Canva ist perfekt, wenn Sie eine Farbpalette erstellen möchten, die auf einem bestimmten Bild basiert. Obwohl andere Tools ähnliche Optionen bieten, ist die Verwendung von Canva sehr einfach: Sie laden ein Bild hoch und der Generator gibt eine Palette der fünf darin enthaltenen Hauptfarben zurück. Sie können auf die gewünschten Farben klicken und den HEX-Wert in Ihre Zwischenablage kopieren.

Leider endet hier die Nützlichkeit des Angebots von Canva, da dies alles ist, was Sie mit dem Palettengenerator tun können - Sie können die Farben der Palette nicht anpassen. Sie können nur die angegebenen Hex-Werte kopieren oder ein anderes Foto hochladen.

09. Material Design Palette

Auswahlbildschirm der Material Design Palette

Erstellen Sie eine Palette basierend auf den Material Design-Prinzipien von Google

Mit der Material Design Palette können Sie zwei Farben auswählen, die dann in eine Vollfarbpalette umgewandelt werden, die Sie herunterladen können, einschließlich einer Vorschau.

Das Unternehmen bietet auch Material Design Farben Dadurch können Designer die verschiedenen Farbtöne zusammen mit den entsprechenden HEX-Werten anzeigen.

10. Farbcode

Farbbalken mit HEX-Werten

wie man kinetische Typografie-Videos macht
Speichern und exportieren Sie Farbpaletten als SCSS-, WENIGER- oder PNG-Dateien

ColourCode von Tamino Martinius und Andreas Storm ähnelt Colordot, bietet jedoch etwas mehr Anleitung. Dieses kostenlose Tool trifft Sie direkt ins Gesicht und zeigt einen Hintergrund, der mit Ihrer Cursorbewegung seine Farbe ändert. Außerdem bietet dieses Tool verschiedene Kategorien für die Palette (Analog, Triade, Quad, Monochrom, Monochromlicht usw.).

Mit ColourCode können Sie verschiedene Optionen entlang des Farbkreises festlegen, um eine ursprüngliche Kombination zu erstellen. Sie können Ihre Palette auch speichern oder als SCSS- oder WENIGER-Datei exportieren. Sie können sogar nach PNG exportieren, wenn Sie möchten.

elf. Farbrechner

Anleitungsbildschirm des Farbrechners

Wählen Sie eine Farbe und eine Farbharmonie aus, und dieses Werkzeug generiert eine Farbpalette

Der Farbrechner ist unkompliziert: Sie wählen eine Option für Farbe und Farbharmonie aus. Im Gegenzug erhalten Sie die Ergebnisse Ihres empfohlenen Farbschemas zurück.

Das Schöne an dieser Seite ist jedoch, dass sie auch ein wenig detailliert auf die Farbtheorie und deren Beziehung zu Ihrer Farbauswahl eingeht.

12. HTML-Farbcode

Download-Bildschirm für den HTML-Farbcode

Diese Werkzeugsuite enthält eine Liste mit Standardfarbnamen

Diese umfangreiche Tool-Suite von Dixon & Moe enthält einen detaillierten Farbwähler mit zahlreichen Erklärungen zu Farbregeln. eine Reihe von Farbkarten mit flachen Designfarben, Googles Materialdesign und der klassischen web-sicheren Farbpalette; und eine Liste von Standard-HTML-Farbnamen und -codes.

Diese Website bietet auch Tutorials und andere Ressourcen für Webdesigner sowie Optionen zum Exportieren von Ergebnissen aus ihren Tools als HEX-Codes, HTML-, CSS- und SCSS-Stile.

13. W3Schools: Farben Tutorial

Bildschirm mit den Namensbeispielen für das Farb-Tutorial

Dieses kostenlose Tutorial enthält Links zu einer Reihe praktischer Farbwerkzeuge

Wenn Sie nach einer All-in-One-Lösung suchen, die eine Anleitung zu Farben sowie eine Reihe verschiedener Werkzeuge enthält, ist das Farb-Tutorial bei W3Schools die perfekte Wahl.

Sie können nicht nur etwas über Farbtheorie, Farbräder und Farbtöne lernen, sondern auch die anderen Tools verwenden, z Farbkonverter . Mit diesem Tool können Sie beliebige Farben in Namen, HEX-Codes, RGB-, HSL-, HWB- und CMYK-Werte konvertieren.

14. Digitales Farbmessgerät (Mac)

Beispiel eines digitalen Farbmessers in Aktion

Wie hebt man die Auswahl eines Bildes auf?
Mit dem in Mac integrierten Tool können Sie Farben von Ihrem Bildschirm abrufen

OK, Mac-Benutzer ... das hier ist für Sie. Mit dem integrierten digitalen Farbmessgerät Ihres Geräts können Sie eine Farbe von einer beliebigen Stelle auf Ihrem Bildschirm aus erfassen und dann die Werte für diese Farbe als Dezimal-, Hexadezimal- oder Prozentwert abrufen. Außerdem können Sie die ausgewählte Farbe sogar als Text oder Bild 'kopieren'.

Weiterlesen: