Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

  • Aktualisiert am 10. Januar 2023
  • Denis Potschien von Denis Potschien
  • Design, Webdesign
  • 7 Kommentare

Color-Morph

Tool um Farbverläufe zu generieren: Color Morph.

Wenn du auf der Suche nach bunten CSS- oder SVG-Verläufen bist, hilft dir Color-Morph weiter. Wähle eine Grundfarbe und schon hast du unzählige Farbverlaufsvarianten zur Hand.

Experte.de: Farbkontrast-Test

Farbkontrast-Test-Experte

Unter den Experten sind automatisierte Accessibility-Tests von Websites zwar umstritten. In der automatisierten Erfassung von zu behebenden Problem leisten sie aber eine großartige Arbeit. Allen voran wäre hier der Farbkontrast-Check von Experte.de zu nennen, der Deine Zielseite auf die WCAG 2.1 Richtlinien hin überprüft. So stellst Du sicher, dass auch Menschen mit Seheinschränkungen die Zielseite problemlos nutzen können.

Neumorphism

Computer Programm - Produktdesign
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 1

„Neumorphism“ ist tolles und einfach zu bedienendes Tool zum Erstellen von neumorphischen Effekten und Elementen.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Neumorphische Designs sind eine Kombination aus „Flat“ und skeuomorphen Designs.

Die Komponenten haben dann bspw. unten einen dunklen Schatten und oben einen hellen Schatten. Die Kombination aus beidem erzeugt den Effekt, dass die Elemente täuschen echt aussehen.


Calcolor

Computer Programm - Linie
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 2

Ohne jegliche Inhalte und Kontext ist es immer problematisch, über Farben zu sprechen. Aus diesem Grund stellt Calcolor für jeden Farbcode eine eigene Seite zur Verfügung, die man dann mit Kunden und Kollegen teilen kann.


Happy Hues

Design: 11 Web-Apps, die Farbpaletten aus Bildern erstellen - Ein Screenshot eines Handys - Papier
Bei Happy Hues kannst du mehrere verschiedene Farpaletten durchklicken, und sie sofort im Zusammenspiel mit Überschriften, Bildern, Hintergrund, Buttons, usw. sehen.

Wenn du nicht weisst, wie du eine Farbpalette auf deine Designs konkret anwenden sollst, hilft dir Happy Hues weiter. Es gibt dir nicht nur Inspiration für eine neue Farbpalette, sondern zeigt dir auch in einem realen Beispiel, wie du die Farben für deine Hintergründe, Überschriften, Illustrationen usw. einsetzen kannst.


WhoCanUse.com

Farben finden: 5 Tools für gute Farbkombinationen - Ein Screenshot eines Handys - Computer Programm
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 3

Farben spielen auch im Gebiet Barrierefreiheit eine immens wichtige Rolle. Mit whocanuse.com bekommst du ein besseres Verständnis dafür, welchen Einfluss Farbkontraste auf Menschen mit Sehbehinderungen haben können.


Accessible Colors

Linie - Winkel
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 4

Wie der Name schon suggerriert geht es bei Accessible Colors ebenfalls um Farbkombinationen im Webdesign, welche auch gut lesbar sind, wenn z.B. die Sonne auf den Bildschirm scheint. Praktisch: Das Tool empfiehlt auch bestimmte Farbkombinationen, um den „WCAG 2.0-Richtlinien für die Barrierefreiheit“ zu genügen.


Contrast-ratio.com

Farben finden: 7 Tools für gute Farbkombinationen - Ein Screenshot eines Handys - Kontrast
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 5

Auch das contrast-ratio.com Tool von Lea Verou tut einen fantastischen Job, wenn es um die Analyse von barrierefreien Farbkontrasten geht. Ein tolles Werkzeug, auf das kein Webdesigner verzichten sollte!


Farbverläufe finden mit Grab A Gradient

Farben finden: 8 Tools für gute Farbkombinationen - Eine Nahaufnahme von einem Logo - Grafik
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 6

Wer nach harmonischen Farbverläufen sucht, der wird auf grabient.com (kurz für „grab a gradient“) auf jeden Fall fündig. Die auf der Seite angebotenen Farbverläufe kann man sich wahlweise als CSS oder als Sketch-Datei herunterladen.


CSS Color Gradient Generator

farb verlauf generator Farben finden: 16 Tools für Farbverläufe und Farbkombinationen
Farben finden: 16 Tools für Farbverläufe und Farbkombinationen 7

Die Auswahl von Farben zur Erstellung eines Farbverlaufs erfordert Designerfahrung und ein gutes Verständnis der Farbenlehre und Farbpsychologie.

Wenn Sie einen Farbverlauf für einen Hintergrund oder für UI-Elemente benötigen, sind Sie mit diesem Farbverlaufsgenerator auf der sicheren Seite.

Der CSS Gradient Generator basiert auf Farbverlaufsalgorithmen und erstellt ausgewogene Farbverläufe basierend auf einer von Ihnen ausgewählten Farbe. Es gibt vier verschiedene Arten von Verläufen, die von subtil zu einem Perlmutt-Effekt und einem intensiven, tiefen Farbverlauf reichen.

Sie können den Verlauf mit Schiebereglern anpassen und, wenn Sie mit dem Ergebnis zufrieden sind, den generierten CSS-Code kopieren und in Ihrem eigenen Projekt einfügen.


Adobe Color CC

adobe-color-cc


Das bekannteste Farbtool ist sicher Adobe Color CC, welches jeder kostenfrei nutzen kann – auch ohne Anmeldung per Adobe ID. Zunächst entscheidest du dich für eine Farbregel. Damit legst du fest, ob du beispielsweise monochromatische oder komplementäre Farben nutzen möchtest. Insgesamt gibt es sieben Regeln, die Farben nach unterschiedlichen Ansätzen miteinander kombinieren.

Je nach Farbregel erscheinen verschieden viele bewegbare Punkte auf einem Farbkreis. Diese Punkte lassen sich nur abhängig voneinander bewegen. Bei einer Triade sind die Punkte beispielsweise so angeordnet, dass der Winkel zwischen den Punkten immer gleich ist. Bei Komplementärfarben stehen sich die Punkte immer gegenüber.

Jede Farbe lässt such auch über Schieberegler oder die Eingabe von RGB- oder Hexadezimalwerten festlegen. Die anderen Farben werden dann entsprechend der Farbregel angepasst. Als angemeldeter Nutzer speicherst du Farbthemen auch ab und hast somit immer Zugriff auf einmal definierte Kombinationen.


Paletton

paletton


Ganz ähnlich funktioniert die Webanwendung Paletton. Auch hier wählst du zunächst eine Regel aus. Neben monochromatischen Farben wählst du zwischen benachbarten Farben und einer Triade – in beiden Fällen bestimmst du jeweils drei Grundfarben – sowie einer Tetrade, bei der du vier Grundfarben vorgibst.

Der Farbkreis ist bei Paletton zweigeteilt. Auf dem äußeren Ring definierst du die Grundfarben und im Inneren definierst du die Helligkeit der Grundfarben sowie den Kontrast der Sekundärfarben zu den Grundfarben. Ausgegeben wird dir ein Farbkonzept mit den jeweiligen Grundfarben und jeweils passenden zusätzlichen Sekundärfarben.

Für jedes Farbthema wird eine individuelle URL erstellt, sodass du deine zusammengestellten Farben jederzeit wieder aufrufen und auch bearbeiten kannst.


Coolors

coolors


Auch Coolors kommt ohne Farbkreis aus. Stattdessen werden Farben per Schieberegler festgelegt. Es werden dir dabei fünf Farben dargestellt, die du individuell anpassen kannst. Anschließend hast du die Möglichkeit, den Farbton, Sättigung, Helligkeit und Temperatur aller fünf Farben zu verändern.

Außerdem besteht die Möglichkeit, einzelne Farben vor Veränderung zu schützen. Diese bleiben dann unverändert, während du beispielsweise die Sättigung der anderen Farben veränderst.

Während die anderen Tools komplette Farbthemen vorschlagen, musst du bei Coolors selbst eigene Farben definieren. Allerdings ist es mit Coolors einfach, diese zu verändern und das Thema zum Beispiel insgesamt heller oder dunkler darzustellen.

Dein Farbthema exportierst du als SVG-, PNG, PDF- oder SCSS-Datei. Auch das Speichern als URL ist möglich.


Multicolr Search Lab

multicolr-earch-ab


Einen gänzlich anderen Ansatz verfolgt Multicolr Search Lab. Hierbei definierst du bis zu fünf Farben und das Tools sucht dir aus 20 Millionen Creative-Commons-Bildern jene aus, die zu den vorgegebenen Farben passen.

Das Tool stellt eine interessante Ergänzung zu den anderen Anwendungen dar. So findest du zu deinem Farbthema nämlich auch gleich die passenden Fotos – beispielsweise für einen Seitenhintergrund.


Alle Farb-Tools im Überblick

  • Neumorphism
  • Calcolor
  • Happy Hues
  • Barrierefreiheit
  • contrast-ratio.com
  • grabient.com
  • Adobe Color CC
  • Paletton
  • Coolors
  • Multicolr Search Lab

Du hast ein bestimmtes Foto, aus welchem du die Kernfarben extrahieren willst? Hier wirst Du fündig: Web-Apps, die Farbpaletten aus Bildern erstellen.

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Inhaltsverzeichnis

Agenturpartner in München

Edit Content

Timo Specht

Drei Dinge, die dich bislang vom SEO Erfolg abhalten, sind entweder:

  1. lückenhafte Umsetzung der Basics
  2. sprunghafter Aktionismus ohne Durchhaltevermögen
  3. oder zahlreiche Optimierungsversuche ohne klare Zielsetzung.

Es ist 2023 und SEO funktioniert besser denn je — dazu stehe ich aus eigener Erfahrung und an eigenem Exempel.

Meine Anfragen generiere ich verlässlich, qualitativ und hoch frequentiert durch 100% organische Reichweite. Wir, mein Team & ich, haben unsere Strategie die letzten 5 Jahre präzise verfeinert und erfolgreich umgesetzt. Diese Präzision sorgt bei hunderten Kundenprojekten für gewünschte Resultate, vor allem dann wenn die Zielsetzung klar ist.

Unser Vertrauen ziehen wir aus messbaren Tatsachen & wiederkehrenden Ergebnissen — nicht aus Behauptungen von Google darüber, wie es scheinbar zu funktionieren hat.

Wenn du dir deiner Zielsetzung jetzt bewusst bist, dann kontaktiere mich zum unverbindlichen Erstgespräch. Gemeinsam finden wir heraus ob wir dir mit SEO helfen können.

Ich freue mich dich kennenzulernen.

— Timo Specht,
Geschäftsführer der Specht GmbH
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

Broschüre drucken: So präsentieren Sie Ihr Unternehmen oder Ihr Projekt professionell

Broschüren können ein hochwirksames Werbemittel sein, und Ihr Unternehmen oder Ihre Praxis dabei unterstützen, Kunden zu gewinnen. In diesem Text erfahren Sie, wie Sie Ihre Broschüre planen, gestalten und drucken lassen können.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

7 Antworten

  1. Karsten sagt:
    20. Januar 2020 um 19:45 Uhr

    Hallo,
    die hier genannten Tools machen zweifelsfrei einen guten Eindruck.
    Mit Adobe Color habe ich vor der CC Generation auch gearbeitet.
    Seit mind. 2 Jahren erstelle und verwalte ich meine Farbpaletten sehr bequem, komfortabel und unabhängig irgendeiner App mit der Mac App “Spectrum”. Für mich bietet diese App alles, was man zum Bearbeiten eines Farbspektrums benötigt. Vielleicht ist mein Link ja eine sinnvolle Ergänzung zu den oben genannten Anbietern.
    Bei dem Besuch der Website zur App sah ich eben, dass es auch eine IOS-App von Spectrum gibt. Diese kenne ich (noch) nicht. Aber da ich einige Arbeiten auch auf einem iPad Pro durchführe, sollte ich mir die Version wohl mal näher ansehen 😉
    Gruss aus dem windigen Ostholstein

    Antworten
    1. Heinz sagt:
      29. Mai 2020 um 20:03 Uhr

      unabhängig irgendeiner App mit der Mac App „Spectrum“
      Und MAC muss es halt schon sein?

  2. MLS-WORLD sagt:
    21. Januar 2020 um 6:56 Uhr

    Für Offline-Farbbearbeitung ist die kostenlose App “ColorSchemer Studio”, im AppStore erhältlich, auch sehr hilfreich!

    Antworten
    1. Mario sagt:
      13. Februar 2020 um 10:29 Uhr

      ColorSchemer Studio war früher auch meine erste Wahl, funktioniert aber schon seit Mojave nicht mehr zuverlässig und läuft als 32bit-App unter Catalina gar nicht mehr. Im AppStore ist die App auch nicht mehr. Es gibt nur noch ein ColorSchemer (ohne Studio) für 10,99 Euro.

  3. Frank sagt:
    2. März 2020 um 13:58 Uhr

    Guten Tag,
    gibt es denn keine Software für die Erstellung von Farbverläufen, die man auf dem eigenen PC erstellen kann? Meinetwegen auch käuflich zu erwerben.
    Ich arbeite mittlererweile gerne mit Farbverläufen, will das aber nicht alles online machen. Ob Vertikal, Horizontal oder Radial, ich arbeite mit allen Farbverläufen. Kann mir da jemand weiterhelfen?

    Antworten
    1. Carsten Thumulla sagt:
      17. Juli 2021 um 14:33 Uhr

      http://thumulla.com/home/farbverlaeufe_berechnen.html

  4. Vitalii sagt:
    26. April 2020 um 0:27 Uhr

    Kann man die Links im neuen Tab öffnen lassen??

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen