Wählen Sie online eine Farbkombination aus. Spickzettel für coole Farbkombinationen

Leute, wir haben unsere Seele in die Seite gesteckt. Dank dafür
für die Entdeckung dieser Schönheit. Danke für die Inspiration und Gänsehaut.
Begleiten Sie uns auf Facebook und In Kontakt mit

Schema Nr. 1. Komplementäre Kombination

Komplementär oder zusätzlich kontrastierend sind Farben, die sich auf gegenüberliegenden Seiten des Itten-Farbkreises befinden. Ihre Kombination wirkt sehr lebendig und energisch, besonders bei maximaler Farbsättigung.

Schema Nummer 2. Triade - eine Kombination aus 3 Farben

Die Kombination von 3 Farben, die im gleichen Abstand voneinander liegen. Bietet hohen Kontrast bei gleichzeitiger Wahrung der Harmonie. Eine solche Komposition sieht auch bei Verwendung von blassen und entsättigten Farben recht lebendig aus.

Schema Nr. 3. Eine ähnliche Kombination

Eine Kombination aus 2 bis 5 Farben, die auf dem Farbkreis nebeneinander angeordnet sind (idealerweise 2-3 Farben). Eindruck: ruhig, entspannend. Ein Beispiel für eine Kombination ähnlich gedeckter Farben: Gelb-Orange, Gelb, Gelb-Grün, Grün, Blau-Grün.

Schema Nr. 4. Getrennt-komplementäre Kombination

Eine Variante einer komplementären Farbkombination, nur dass anstelle der Gegenfarbe die daneben liegenden Farben verwendet werden. Die Kombination aus der Hauptfarbe und zwei weiteren. Dieses Schema sieht fast so kontrastreich aus, aber nicht so angespannt. Wenn Sie sich nicht sicher sind, ob Sie komplementäre Kombinationen richtig verwenden können, verwenden Sie getrennt-komplementäre.

Schema Nummer 5. Tetrade - eine Kombination aus 4 Farben

Ein Farbschema, bei dem eine Farbe die Hauptfarbe ist, zwei sich ergänzen und eine andere die Akzente hervorhebt. Beispiel: blau-grün, blau-violett, rot-orange, gelb-orange.

Schema Nummer 6. Quadrat

Kombinationen einzelner Farben

Weiß: passt zu allem. Die beste Kombination mit Blau, Rot und Schwarz.
Beige: mit Blau, Braun, Smaragd, Schwarz, Rot, Weiß.
Grau: mit Fuchsia, Rot, Lila, Pink, Blau.
Pink: mit Braun, Weiß, Mintgrün, Oliv, Grau, Türkis, Babyblau.
Fuchsia (dunkelrosa): mit Grau, Hellbraun, Limette, Minzgrün, Braun.
Rot: mit Gelb, Weiß, Braun, Grün, Blau und Schwarz.
Tomatenrot: blau, mintgrün, sandig, cremeweiß, grau.
Kirschrot: Azurblau, Grau, Hellorange, Sand, Hellgelb, Beige.
Himbeerrot: Weiß, Schwarz, Damastrosa.
Braun: Hellblau, Creme, Pink, Rehbraun, Grün, Beige.
Hellbraun: hellgelb, cremeweiß, blau, grün, lila, rot.
Dunkelbraun: Zitronengelb, Himmelblau, Minzgrün, Purpurrosa, Limone.
Rotbraun: rosa, dunkelbraun, blau, grün, lila.
Orange: blau, blau, lila, lila, weiß, schwarz.
Hellorange: grau, braun, oliv.
Dunkelorange: hellgelb, oliv, braun, kirschrot.
Gelb: blau, lila, hellblau, lila, grau, schwarz.
Zitronengelb: Kirschrot, Braun, Blau, Grau.
Blassgelb: Fuchsia, Grau, Braun, Rottöne, Hellbraun, Blau, Lila.
Goldgelb: grau, braun, azurblau, rot, schwarz.
Olive: orange, hellbraun, braun.
Grün: Goldbraun, Orange, Salat, Gelb, Braun, Grau, Creme, Schwarz, Cremeweiß.
Salatfarbe: braun, hellbraun, rehbraun, grau, dunkelblau, rot, grau.
Türkis: Fuchsia, Kirschrot, Gelb, Braun, Creme, Dunkelviolett.
Elektriker ist schön in Kombination mit Goldgelb, Braun, Hellbraun, Grau oder Silber.
Blau: rot, grau, braun, orange, pink, weiß, gelb.
Dunkelblau: Hellviolett, Himmelblau, Gelbgrün, Braun, Grau, Hellgelb, Orange, Grün, Rot, Weiß.
Flieder: orange, rosa, dunkelviolett, oliv, grau, gelb, weiß.
Dunkelviolett: goldbraun, blassgelb, grau, türkis, mintgrün, hellorange.
Schwarz ist vielseitig, elegant, sieht in allen Kombinationen aus, am besten mit Orange, Pink, Salat, Weiß, Rot, Lila oder Gelb.

Die Auswahl eines Farbschemas für eine Website ist einer der wichtigsten Schritte im Designprozess. Die Auswahl einer Farbkombination ist ein ziemlich komplexer und kreativer Prozess. Glücklicherweise gibt es viele Dienste, die Sie bei der richtigen Auswahl erheblich unterstützen können.

Bei einigen der in dieser Übersicht erwähnten Ressourcen können Sie aus einer großen Anzahl vorgefertigter Farbschemata auswählen, während Sie bei anderen interaktiv Ihr eigenes Schema erstellen können.

Kuler

Adobe Kuler enthält eine große Bibliothek vorgefertigter Farbschemata. Sie können das Diagramm online anzeigen und zur Verwendung in den Adobe Creative Suite-Produkten herunterladen.

Color Lovers verfügt derzeit über fast 2 Millionen von Benutzern erstellte Farbschemata. Sie können sie sortiert nach Datum, Bewertung, Anzahl der Aufrufe anzeigen.

ColoRotate verfügt über eine Bibliothek mit vorgefertigten Farbschemata. Mit dem einzigartigen 3D-Tool können Sie auch Ihr eigenes Schema erstellen. Das Farbschema kann mit dem ColoRotate-Plugin direkt in Photoshop und Fireworks verwendet werden.

Mit dem Farbschema-Designer können Sie die Art des Farbschemas auswählen (Mono, Komplementär, Triade, Tetrade, Analog). Dann ist es möglich, die Farben anzupassen und die Wirkung des Schemas an einem Beispiel zu sehen.

ColorSchemer verfügt über eine große Bibliothek mit benutzerdefinierten Farbschemata. Sie können sie nach Veröffentlichungsdatum, Bewertung oder Anzahl der Downloads sortieren.

Pictaculous ist ein einfaches Online-Tool zur Erstellung von Farbschemata. Sie können ein Bild hochladen und der Dienst generiert ein Diagramm zur Verwendung mit dem Bild.

Farbturm

Color Spire ist ein sehr einfach zu bedienender Dienst. Sie wählen eine Grundfarbe und es schlägt ein Farbschema vor. Sie können auch das Aussehen des Schemas auf einer einfachen Vorlage sehen.

Ein kleiner, eleganter und übersichtlicher Farbwähler für das Design von HTML-Seiten und andere Aufgaben, die übereinstimmende Farben erfordern.

Mal sehen, was dieses Programm kann.

Farbpunkteinstellung

Da das Programm keine Installation erfordert, speichern Sie einfach das Archiv auf Ihrer Festplatte, entpacken es an einem geeigneten Ort, öffnen den Ordner und führen die Datei mit der Erweiterung .exe aus. Standardmäßig startet das Programm als kleiner Button:

Arbeiten mit dem Programm

Wir klicken auf dieses Symbol und das Programmfenster öffnet sich vor uns:

Bildschirm

Auf dieser Registerkarte ermöglicht Ihnen das Programm, jede Farbe direkt vom Bildschirm zu "nehmen". Das heißt, von jedem Teil des Bildschirms, der zum Zeitpunkt des Programmstarts sichtbar war. Im Fenster Select Area wird der gesamte Bildschirm verkleinert dargestellt.

Wenn Sie in diesem Fenster auf irgendein Teil klicken, erscheint es im nächstkleineren Fenster "Wählen Sie eine Farbe". Hier können Sie bereits genauer zielen und die Farbe von einem bestimmten Punkt aus aufnehmen.

Außerdem befinden sich im rechten Teil dieses Fensters Hilfsschaltflächen zum Kopieren in die Zwischenablage und darunter die Schaltflächen "Aktualisieren" (aktualisiert den Bildschirminhalt) und "Übernehmen" (speichert die ausgewählte Farbe und schaltet das Fenster auf "Auswahl "Registerkarte).

Auswahl

Hier sind die wichtigsten Werkzeuge für die einfache Farbanpassung: "Tile", "Circle", "Web" und "Win", die über zusätzliche Registerkarten umgeschaltet werden.

Die Arbeit mit diesen Tools ist nicht schwierig. Klicken Sie einfach auf die gewünschte Farbe, passen Sie sie mit den RGB-Schiebereglern (oder HSV - wenn Ihnen dieses Format näher kommt) an und sehen Sie, ob sie passt oder nicht.

Gefällt Ihnen die gewählte Farbe, können Sie deren Code aus der Zeile „Textdarstellung“ kopieren. Darüber hinaus kann der Code auch in einem der Standardformate ausgewählt werden, indem Sie auf den kleinen Pfeil klicken, um die Liste zu erweitern.

Achten Sie auch auf das dritte Farbfenster in der oberen rechten Ecke. Zusätzlich zu der ausgewählten Farbe (vertikaler Streifen) werden drei weitere Farben angezeigt, die gut mit der ausgewählten Farbe harmonieren.

So schlägt das Programm sofort mehrere passende Farben vor, die auf andere Elemente des entworfenen Designs angewendet werden können.

Das Programm hat viele verschiedene Hilfstasten. Um ihren Zweck herauszufinden, fahren Sie einfach mit der Maus darüber und lesen Sie die Tipps, die ganz unten im Programmfenster erscheinen.

Einstellungen

Hier können Sie einige Parameter wie Schriftart und -größe sowie einige kosmetische Eigenschaften des Programms anpassen. Es ist bequemer, mit dem Programm zu arbeiten, wenn Sie die Kontrollkästchen "Auf der Registerkarte "Bildschirm" öffnen" und "Im Minifenstermodus ausführen" deaktivieren.

Über das Programm

Auf dieser letzten Registerkarte können Sie die Kontakte des Entwicklers finden und sehen, ob eine neue Version des Programms veröffentlicht wurde, indem Sie auf seine Website gehen.

Vor- und Nachteile des Programms

es gibt viele verschiedene Werkzeuge zur Farbauswahl (Kreis, Kacheln usw.);
ermöglicht Ihnen einen bequemen Farbvergleich, indem Sie das Programmfenster in die Nähe anderer Elemente des Bildschirms verschieben;
Es gibt Hinweise für alle Schaltflächen.

etwas knifflige Schnittstelle;
Minimiert und auf der Registerkarte "Bildschirm" ausgeführt zu werden, ist nicht sehr praktisch (obwohl Sie es in den Einstellungen deaktivieren können);
Nicht jedem wird die Farbe des Programmfensters gefallen.

Ergebnisse

Das Programm ist ziemlich leistungsfähig für ein kostenloses Programm, es bietet fast alles, was Sie brauchen, um Farben beim Erstellen eines Website-Designs bequem auszuwählen. Es gibt einige kleinere Mängel wie die Farbe des Programmfensters (lila - nicht jedermanns Sache), aber sie stören nicht beim Arbeiten damit.

P.S. Es ist erlaubt, diesen Artikel frei zu kopieren und zu zitieren, sofern ein offener aktiver Link zur Quelle angegeben und die Urheberschaft von Ruslan Bogdanov gewahrt bleibt.

P.S.S. Wenn Ihnen das Programm kompliziert erschien, gibt es einfachere Möglichkeiten:

Farbe ist eines der wichtigsten Elemente in der Arbeit eines Designers. Aber als Konzept ist es ziemlich schwierig, es zu beherrschen: Die vielen Kombinationen von Paletten machen es oft schwierig zu entscheiden, wie man die Oberfläche von Webseiten und Anwendungen am besten gestaltet. Zuvor haben wir Bewertungen von Tools der Wahl und veröffentlicht. Und heute möchten wir das Thema erweitern, indem wir eine Übersetzung des Artikels Essential Color Tools for UX Designers von Nick Babich im Blog veröffentlichen.

Dieser Beitrag enthält eine Liste der besten Farbanpassungsdienste für Websites und UX-Design, mit denen Sie viel Zeit sparen werden. Durch diese Projekte lernen Sie:

wo man sich inspirieren lassen kann;
wie Sie Ihre eigene Palette erstellen;
wie man Design für Menschen mit Farbsehstörungen zugänglich macht.

1. Auf der Suche nach Inspiration

Farben der Natur

Zeichne aus der Welt um dich herum. Sie brauchen sich nur umzusehen. Modische Kleidung, Buchumschläge, Innenarchitektur ... es gibt so viele erstaunliche Dinge um dich herum. Aber die besten Farbkombinationen sind die Farben der Natur. Halten Sie einen schönen Moment fest und versuchen Sie, Ihre eigene Auswahl basierend auf einem bestimmten Bild zu erstellen.

Die besten Farbkombinationen findet man in der Natur. Sie können ein Farbschema von jedem Foto erhalten

Behance

In dem beliebten Service finden Sie interessante Arbeiten, die in den besten Online-Portfolios von echten Profis auf ihrem Gebiet enthalten sind. Diese Seite ist auch eine großartige Quelle der Inspiration. Um neue würdige Projektbeispiele zu sehen, wählen Sie einfach die gewünschte Farbe aus.

Dribbling-Farben

Dribbble ist eines der besten, das sich beim Erstellen einer Benutzeroberfläche als nützlich erweisen wird. Wenn Sie visuell verstehen möchten, wie andere eine bestimmte Farbe verwendet haben, gehen Sie zu dribbble.com/colors und geben Sie den gewünschten Wert ein.

Wenn Sie eine Farbe für die Website auswählen, können Sie hier den Mindestprozentsatz festlegen. Experimentieren Sie beispielsweise mit 30 % Blau.

Versuchen Sie, in Dribbble einen Mindestprozentsatz einer bestimmten Farbe festzulegen

Design-Inspiration

Designspiration ist vor allem für diejenigen ein nützliches Werkzeug, die bereits Ideen für Farbkombinationen haben und Beispiele für solche Kombinationen sehen möchten. Wählen Sie zwischen 1 und 5 Optionen und Sie werden Bilder finden, die den angegebenen Parametern entsprechen.

In Designspiration finden Sie verschiedene Beispiele für Farbkombinationen

Tineye Mehrfarbig

Mit dem Tineye Multicolr-Farbanpassungsdienst können Sie den gewünschten Bildumfang bestimmen und sogar den Prozentsatz für jeden von ihnen (Verhältnis) festlegen. Die Website ist in eine Datenbank mit 20 Millionen Creative-Commons-Fotos von Flickr integriert. Dies ist definitiv einer der schnellsten Wege, um die perfekte Palette zu finden.

Farbzilla

ColorZilla ist eine Erweiterung zur Installation in den Browsern Chrome und Mozilla Firefox. Es enthält Werkzeuge wie Pipette, Durchsuchen von Paletten, Erstellen und mehr.

ColorZilla-Erweiterung verfügbar in Chrome und Firefox

Shutterstock-Spektrum

Eine der besten Möglichkeiten, sich ein Bild davon zu machen, wie die Farbgebung aussehen wird, ist, sich die entsprechenden Bilder anzusehen. Die meisten Lösungen, die eine Farbauswahl für das Website-Design anbieten, beinhalten diese Funktion, aber Shutterstock Spectrum hat eine unglaublich benutzerfreundliche Oberfläche und Vorschau, was wirklich nützlich sein kann.

Außerdem benötigen Sie kein Abonnement, da eine vorläufige Bewertung des Bildes völlig ausreicht (trotz der Tatsache, dass es ein „Wasserzeichen“ hat).

W3Schulen

Kürzlich hat ein Blog eine Auswahl von W3Schools überprüft. Es enthält viele Informationen zum Thema, angefangen von ihren Namen / Farbcodes, der Theorie der Palettenkombinationen bis hin zu einer Beschreibung verschiedener Formate: HEX, RGB, CMYK, HWB usw. Sie finden auch einfache Generatoren und Konverter und ähnliche "Mini-Dienste". Alles in allem interessant zu sehen.

2. Erstellen Sie eine Farbpalette

Materialdesign-Farbwerkzeug

Mit dem Farbauswahldienst der Material Design Color Tool-Site können Sie Farbschemata für Ihre Auswahl erstellen, freigeben und in der Vorschau anzeigen. Eine seiner nützlichen Funktionen besteht darin, den Grad der Zugänglichkeit beliebiger Farbkombinationen zu messen.

Kühler

Coolors ist eine Website zum Erstellen einer mehrfarbigen Palette. Legen Sie einfach eine bestimmte Farbe fest und drücken Sie die Leertaste. Das Tool ist auch insofern gut, als Sie mehr als ein Ergebnis erhalten, aber Sie können mehrere Optionen generieren, indem Sie nur die Anfangsdaten ändern.

Farbschema in Coolors basierend auf Foto

Adobe Color CC

Der Farbanpassungsdienst Adobe Color CC (ehemals Kuler) ist mittlerweile sehr beliebt. Es ist im Internet frei verfügbar, es gibt aber auch eine Deskriptor-Version. Mit dieser Webanwendung erstellen Sie Ihre Palette mit dem Farbkreis:

Oder Sie können ein bestimmtes Ergebnis aus dem fertigen Bild erhalten:

Auswahl der Farbe für die Website gemäß dem Bild

Hier gibt es Hunderte von vorgefertigten Kombinationen, suchen Sie sie im Abschnitt "Beobachten":

Wenn Sie die Desktop-Version verwenden, können Sie das von Ihnen erstellte Farbsystem mit einem Klick nach InDesign, Photoshop und Illustrator exportieren.

Palette

Es wird oft mit dem vorherigen Adobe Color CC verglichen, da diese Designs sehr ähnlich sind. Der einzige Unterschied besteht darin, dass Sie in Paletton nicht auf fünf Optionen beschränkt sind, sondern mit zusätzlichen Oberflächentönen experimentieren können.

Außerdem kann man sich anschauen. Zusammen mit anderen ermöglicht Ihnen die Anwendung, überall zu arbeiten, nur mit Ihrem Smartphone. Neben dem direkten Erstellen / Exportieren von Farbpaletten können Sie hier bestimmte Farben aus Bildern auswählen oder grundlegende Optionen verwenden.

3. Die Palette zugänglich machen

Derzeit sind Farbwahrnehmungsstörungen viel häufiger als wir denken. Etwa 285 Millionen Menschen auf der Welt haben Sehprobleme. Sie sollten immer prüfen, ob die von Ihnen gewählte für solche Benutzer verfügbar ist.

WebAIM-Farbkontrastprüfer

Einige Töne sind perfekt miteinander kombiniert, während andere genau das Gegenteil sind. Eine große Anzahl von Projekten besteht den A / A-Test nicht, und das ist eine Tatsache. Es ist sehr wichtig, das visuelle Design der Benutzeroberfläche und den Kontrast der Töne zu überprüfen, insbesondere wenn die Seite viel Text enthält. Verwenden Sie für diese Zwecke bei der Auswahl der Farben der Website.

WebAIM Color Contrast Checker ist ein webbasiertes Tool, das Farbcodes in Hexadezimalwerten prüft.

Kühler

Diesen Service haben wir oben bereits erwähnt. Coolors hilft Ihnen unter anderem auch dabei, Ihre erfundene Palette auf Farbenblindheit zu überprüfen.

Art der Farbenblindheit in einem Schema

Wählen Sie anstelle des Modus „Normal“ die Art des Sehproblems aus, das Sie simulieren möchten. Dadurch werden Sie genau verstehen, wie eine Person, die bestimmte Farben nicht unterscheiden kann, Ihr Design sehen wird.

So sieht eine Person mit Protanomalie eine Palette

NoCoffee Vision Simulator für Chrome

Mit Hilfe der NoCoffee Vision Simulator-Website können Sie sehen, wie Menschen mit Farbenblindheit oder Sehbehinderung bestimmte Webseiten wahrnehmen. Wenn Sie beispielsweise die Option „Achromatopsie“ im Abschnitt „Farbmangel“ angeben, sehen Sie die Webseite in Grau.

So sieht ein CNN-Projekt für eine Person mit Deuteranopie aus

Fazit

Alle im Artikel erwähnten Farbanpassungsdienste für Websites und UX-Design werden Ihnen auf jeden Fall bei Ihrer Suche nach einem interessanten und effektiven Sortiment helfen. Aber denken Sie daran, dass der beste Weg, um zu lernen, wie man erstaunliche Paletten erstellt, darin besteht, viel zu üben und zu experimentieren.

Farbe ist im Design weit verbreitet - sie ermöglicht es Ihnen, den Inhalt "wiederzubeleben", um eine semantische Verbindung zwischen Elementen herzustellen, um die Arbeit mit Emotionen und Stimmungen zu füllen. Anfänger wählen zufällige Farben aus, aber es gibt Möglichkeiten, Farben sinnvoller einzusetzen. Betrachten Sie 4 solcher Methoden, die nach dem Prinzip von einfach bis komplex organisiert sind.

1. Verwenden Sie einen bekannten Farbumfang

Mehr als 500 Farbkombinationen bekannter Marken wurden auf der Website brandcolors.net gesammelt. Yandex, Google, Burger King verwenden in all ihren Produkten dieselbe Palette. Diese Marken und ihre Farben sind vielen bekannt und beliebt. Geben Sie den Namen in die Suchleiste ein oder scrollen Sie durch die Seite, klicken Sie auf die gewünschte Marke und Farbe: Der Code wird in die Zwischenablage kopiert.

2. Wählen Sie eine fertige professionelle Palette

Am einfachsten ist es, eine fertige Farbkombination zu nehmen. Dabei muss das Rad nicht jedes Mal neu erfunden werden, denn harmonische Kombinationen kennt man schon lange. Gehen Sie zu colordrop.io und wählen Sie aus. Es gibt Hunderte von professionellen 4-Farben-Paletten auf der Website. Nachdem Sie den gewünschten ausgewählt haben, klicken Sie auf die Farbcodes und kopieren Sie sie aus dem Bereich, der sich auf der rechten Seite öffnet.

Darüber hinaus enthält der Service eine fertige Auswahl von 24 Flat-Design-Farben. Klicken Sie links unter dem Namen "Flat Colors" und nehmen Sie den Code des gewünschten Farbtons.

3. Bestimmen Sie die Farbpalette des Fotos oder Bildes, das Ihnen gefällt

Diese Methode ist etwas schwieriger. Aber auch effektiver.

Suchen Sie auf der Website coolors.co im oberen Bereich links das Kamerasymbol und klicken Sie darauf. Ein Fenster zum Hochladen von Bildern wird geöffnet.
Sie können ein Foto oder Bild mit dem gewünschten Farbschema von Ihrem Computer auswählen oder den Link in eine leere Spalte kopieren.
Der Dienst bestimmt die Farbkombination (unten unter dem hochgeladenen Bild).
Sie können die einzelnen Farben dieser Palette ändern, indem Sie sie markieren und einen Punkt im Foto auswählen, von dem Sie die Farbe übernehmen möchten.
Die Schaltfläche "Collage" speichert die resultierende Palette mit Farbcodes auf dem Computer.
Die Schaltfläche "Auto" generiert neue Kombinationen basierend auf demselben Foto.
Klicken Sie auf "OK" und gehen Sie zur Hauptseite der Site, um mit der Palette weiter zu arbeiten.

Die Hauptseite der Website ist nicht weniger funktional. Hier können Sie Schattierungen einzelner Farben aufnehmen oder durch Austausch einzelner Farben eine neue Palette zusammenstellen.

4. Erstellen Sie Ihr eigenes Farbschema online

Durch das Hochladen eines Fotos auf derselben Seite coolors.co können Sie nicht nur den Farbcode bestimmen, sondern auch Ihre eigenen Kombinationen erstellen. Drücken Sie dazu die Leertaste - der Dienst erstellt automatisch eine Kombination aus 5 Farben.

Auf jeder Farbe 4 Schaltflächensymbole:

Alternative Farbtöne - Farbschattierungen (dunkler und heller),
Ziehen (Farbe auf der Palette nach rechts oder links verschieben),
Anpassen (Farbton, Sättigung, Helligkeit usw. anpassen),
Sperren (feste Farbe).