Kostenloser Online-Farbpaletten-Generator

So geht's

• Wähle einen Harmoniemodus (Analog, Komplementär, Triadisch usw.) oder belasse ihn auf Zufällig.
• Klicke auf Generieren oder drücke Leertaste für neue Paletten.
• Klicke auf das Schloss-Symbol, um eine Farbe zu sperren, damit sie beim Neugenerieren erhalten bleibt.
• Klicke auf einen HEX-Code, um ihn in die Zwischenablage zu kopieren.
• Nutze CSS kopieren, um CSS-Custom-Properties zu erhalten, oder lade sie als Bild herunter.

Farbtheorie & Harmoniemodi

Dieser Generator unterstützt 7 Harmoniemodi basierend auf der Farbtheorie. Analog-Paletten verwenden Farben, die im Farbkreis weniger als 30° voneinander entfernt sind · sie wirken ruhig und stimmig. Komplementär-Paletten kombinieren Farben, die 180° voneinander entfernt sind, für maximalen Kontrast. Triadische Paletten verwenden drei gleichmäßig verteilte Farbtöne (je 120° Abstand) für lebendige Vielfalt. Split-Komplementär nimmt eine Basisfarbe plus zwei Farben neben ihrer Komplementärfarbe · kräftig, aber nuancierter. Monochrome Paletten variieren nur Helligkeit und Sättigung eines Farbtons · elegant und minimalistisch. Quadratisch verwendet vier Farben im Abstand von 90° für eine ausgewogene, farbenfrohe Palette.

Häufig gestellte Fragen

Wie verwende ich diese Farben in meinem Projekt?

Klicke auf "CSS kopieren", um einfügefertige CSS-Custom-Properties zu erhalten. Du kannst auch einzelne HEX-Codes anklicken, um sie zu kopieren, oder die gesamte Palette als PNG-Bild exportieren, um sie in Design-Tools wie Figma oder Canva als Referenz zu nutzen.

Wie viele Farben sollte eine Palette haben?

Die meisten Designs funktionieren am besten mit 3-5 Farben: eine Primärfarbe, eine Sekundärfarbe, eine Akzentfarbe und 1-2 Neutralfarben. Nutze die Schaltfläche "+ Farbe hinzufügen", um deine Palette zu erweitern, oder entferne Farben, indem du mit weniger generierst.

Kann ich Farben sperren, die mir gefallen?

Ja! Klicke auf das Schloss-Symbol bei einem beliebigen Farbfeld. Wenn du neue Paletten generierst, bleiben gesperrte Farben erhalten, während die entsperrten zufällig geändert werden. Das ist ideal, um eine Palette rund um eine bestimmte Markenfarbe aufzubauen.

Was sind die Harmoniemodi?

Harmoniemodi erzeugen Paletten basierend auf Farbtheorie-Beziehungen. Analog verwendet benachbarte Farbtöne für eine beruhigende Palette. Komplementär nutzt gegenüberliegende Farbtöne für starken Kontrast. Triadisch, Split-Komplementär und Quadratisch verteilen die Farbtöne gleichmäßig um den Farbkreis. Monochrom behält einen Farbton bei und variiert die Helligkeit · perfekt für klare, minimalistische Designs.

Was ist ein Farbpaletten-Generator?

Ein Farbpaletten-Generator waehlt eine Reihe von Farben aus, die visuell zusammenarbeiten, basierend auf den Regeln der Farbtheorie. Sie geben ihm einen Starthinweis (eine Basisfarbe, einen Harmoniemodus oder reine Zufaelligkeit), und er gibt drei bis fuenf hexadezimale Codes zurueck, die an bewussten Positionen auf dem Farbrad sitzen. Die Ausgabe ist bereit, in CSS-Variablen, eine Figma-Datei, eine Markenrichtlinie oder ein Foliendeck eingefuegt zu werden.

Moderne Web-Tools druecken Farben in Hexadezimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) oder OKLCH (51.3% 0.066 233.4) aus. Hex ist am bequemsten zum Kopieren und Einfuegen; HSL ist am intuitivsten zum Anpassen (verringern Sie die Helligkeit fuer eine dunklere Variante); OKLCH (eingefuehrt in CSS Color 4, in Browsern seit 2023 unterstuetzt) ist wahrnehmungsmaessig uniform, was fuer Design-Tokens wichtig ist. Dieses Tool gibt standardmaessig hex aus und laesst Sie CSS-Custom-Properties fuer Variablen und OKLCH-freundliche Farbtonabstufungen kopieren.

Die gesamte Erzeugung geschieht in Ihrem Browser. Die Harmoniemodi werden aus einer Basisfarbe ueber HSL-Farbtonrotation berechnet und dann zurueck in hex konvertiert. Die Sperrtaste behaelt Ihre Favoriten waehrend der Rest der Palette neu gemischt wird. Die Leertaste loest eine neue Generierung aus, ohne die Seite zu verlassen, was die Erkundung schnell macht.

Was im Generator steckt

Die obere Leiste gruppiert die drei Knoepfe, die die Generierung aendern: einen Generieren-Knopf, der eine neue Palette erzeugt, ein Modus-Dropdown mit sieben Harmonieregeln (Zufall, Analog, Komplementaer, Triadisch, Split-Komplementaer, Monochromatisch, Quadrat) und eine Basisfarbenauswahl zum Saatmittel fuer nicht-zufaellige Modi. Der Farbe hinzufuegen-Knopf erweitert die Palette ueber die fuenf Standardproben hinaus, nuetzlich fuer Designsysteme, die mehr Toene benoetigen.

Jede Probe zeigt ihren Hex-Code auf einer dunklen Pille, die gegen jeden Hintergrund lesbar bleibt. Klicken Sie auf den Hex, um ihn zu kopieren. Klicken Sie auf das Schloss, um die Probe ueber zukuenftige Generationen einzufrieren, so bauen Sie eine Palette um eine Markenfarbe: sperren Sie die Marke, regenerieren Sie, erhalten Sie drei passende Begleiter. Die Aktionsleiste innerhalb jeder Probe haelt die Sperr-, Kopier- und Entfernen-Symbole innerhalb von 32-Pixel-Beruehrungszielen, um die Target-Size-Regel von Lighthouse zu erfuellen.

Unterhalb der Palette aktualisiert sich der CSS-Variablen-Export-Block live mit Ihren aktuellen Farben als :root-Custom-Properties. Der Bild exportieren-Knopf serialisiert die Palette ueber einen versteckten Canvas zu PNG, was praktisch ist zum Teilen in Design-Reviews oder Anpinnen an ein Moodboard. Die Tastenkombination Leertaste regeneriert sofort, ohne dass ein Fokuswechsel erforderlich ist.

Geschichte und Hintergrund

Isaac Newton spaltet weisses Licht (1666)

Isaac Newtons Prisma-Experimente von 1666 in Cambridge zeigten, dass weisses Licht aus einem kontinuierlichen Spektrum von Farben besteht. In Opticks (1704) legte er ein Sieben-Farben-Rad mit Rot, Orange, Gelb, Gruen, Blau, Indigo und Violett dar, das so positioniert war, dass die diametral gegenueberliegenden Farben harmonische Komplementaerfarben bildeten. Jedes moderne Farbrad stammt von diesem einen Diagramm ab.

Goethes Farbtheorie (1810)

Johann Wolfgang von Goethes Farbenlehre (1810) reformulierte Newtons Physik im Hinblick auf menschliche Wahrnehmung. Goethe war der Erste, der systematisch Nachbilder, simultane Kontraste und die psychologische Waerme von Rot gegenueber der Kuehle von Blau beschrieb. Sein Werk beeinflusste Turner, Schopenhauer und das gesamte Feld der Farbpsychologie, das Kunstschulen heute lehren.

Johannes Itten formalisiert Harmonieregeln (1961)

Johannes Itten, ein Bauhaus-Lehrer, veroeffentlichte 1961 Kunst der Farbe. Sein zwoelfspeichiges Farbrad und die sieben Kontraste (Farbton, Helligkeit, Temperatur, Komplementaer, simultan, Saettigung, Ausdehnung) wurden zum Standardlehrplan in Kunst- und Designschulen. Die Harmoniemodi in diesem Tool (Analog, Komplementaer, Triadisch, Split-Komplementaer, Quadrat) stammen direkt aus Ittens Kapiteln.

Pantone Matching System (1963)

Lawrence Herbert bei Pantone, einem M. Harris and Sons Handelsdrucker, startete das Pantone Matching System 1963. Das Chip-Buch gab Designern und Druckern eine gemeinsame numerische Referenz, sodass eine Markenfarbe ueberleben konnte, ueber Papierarten, Bildschirme und Stoffe hinweg reproduziert zu werden. Die Farbe des Jahres, gestartet im Jahr 2000, treibt jetzt Paletten-Trends ueber Mode, Inneneinrichtung und Webdesign hinweg.

Web-Safe-Palette und die 216 Farben (1996)

Als 8-Bit-Displays das fruehe Web dominierten, kodifizierte Lynda Weinman 1996 eine 216-Farben-Web-Safe-Palette, um konsistentes Rendering ueber Mac und Windows zu gewaehrleisten. Die Palette wurde obsolet, sobald 24-Bit-Farbe ubiquitaer wurde (um 2000), aber die Hex-Syntax, die sie popularisierte (#RRGGBB), bleibt die dominante Methode, Farben in CSS, HTML und Design-Tools zu schreiben.

OKLCH und wahrnehmungsmaessig uniforme Farbe (2020)

Bjoern Ottossons OKLab-Papier von 2020 fuehrte einen wahrnehmungsmaessig uniformen Farbraum ein, der nicht die Helligkeitsinkonsistenzen von HSL hat. CSS Color Level 4 (Browser ab Chrome 111, Safari 15.4, Firefox 113) fuegte oklch()-Syntax hinzu. Die Zukunft von Design-Tokens, barrierefreiem Farbkontrast und Palettenerzeugung lebt zunehmend in OKLCH, weil wahrnehmungsmaessige Uniformitaet bedeutet, dass zwei Farben mit dem gleichen L-Wert wirklich gleich hell aussehen.

Praktische Workflows

Aufbau einer Markenidentitaet aus einer Farbe

Setzen Sie die Basisfarbe auf Ihren Marken-Hex, sperren Sie die erste Probe, wechseln Sie den Modus zu Analog oder Split-Komplementaer und klicken Sie auf Generieren, bis sich die vier Begleitfarben richtig anfuehlen. Kopieren Sie die CSS-Variablen und fuegen Sie sie in Ihre Designsystem-Tokens ein. Das Ergebnis ist eine an Ihre Marke verankerte Palette mit theoriegestuetzten Harmonien.

Design von Dark-Mode-Paaren

Waehlen Sie eine monochromatische Palette mit Ihrem Dark-Mode-Hintergrund als Basis. Die fuenf Proben geben Ihnen Hintergrund, Oberflaeche, Trennlinie, sekundaeren Text und primaeren Text in abgestufter Helligkeit. Fuer Light-Mode generieren Sie eine separate monochromatische Palette mit einer hellen Basis. Die beiden Paletten ueber prefers-color-scheme gepaart decken die meisten Themenbeduerfnisse ohne Ad-hoc-Anpassungen ab.

Farben fuer Datenvisualisierung auswaehlen

Fuer kategoriale Daten (Balkendiagramme, Kreissegmente) geben Triadische oder quadratische Paletten Ihnen drei oder vier unterschiedliche Farbtoene, die getrennt auf einem beschaeftigten Diagramm lesbar sind. Fuer sequentielle Daten (Heatmaps, Choroplethkarten) verwenden Sie Monochromatisch, um die Helligkeit zu variieren, waehrend der Farbton konstant gehalten wird. Pruefen Sie den Kontrast gegen den Diagrammhintergrund; Datenvisualisierungs-Tools wie Vega-Lite erwarten mindestens 3:1 zwischen benachbarten Kategorien.

Barrierefreiheits-Erstpalettenentwurf

Generieren Sie eine Palette und fuegen Sie dann jedes Paar in einen Kontrast-Pruefer ein (WebAIM, Tanaguru). Fuer Textkoerper auf einem Hintergrund wollen Sie mindestens 4.5:1 (WCAG AA). Fuer grossen Text oder UI-Komponenten ist 3:1 die Schwelle. Wenn eine Palette fehlschlaegt, generieren Sie eine neue oder sperren die Markenprobe und lassen die anderen sich neu mischen, um einen konformen Satz zu finden.

Moodboard-Erkundung

Druecken Sie wiederholt die Leertaste, um durch Dutzende von zufaelligen Paletten zu blaettern. Wenn eine Ihr Auge faengt, sperren Sie die beste Probe, wechseln Sie zu Analog und generieren Sie weiter, um Variationen zu finden, die darauf aufbauen. Die Leertasten-Schleife ist schneller als Klicken, was es Ihnen ermoeglicht, im Rechtshirn-Erkundungsmodus zu bleiben, ohne den Fluss zu brechen.

Druck-zu-Bildschirm-Farbabgleich

Wenn Sie eine gedruckte Referenz haben (einen Pantone-Chip oder ein Stoffmuster), pipettieren Sie das naechste digitale Aequivalent und verwenden Sie es als Basisfarbe. Die Harmoniemodi faechern sich dann um Ihre Referenz herum aus. Beachten Sie, dass Druck CMYK ist und Bildschirm RGB, sodass eine exakte Uebereinstimmung unmoeglich ist; das Ziel ist eine Palette, die nahe genug ist, um als die gleiche Marke gelesen zu werden.

Haeufige Fallstricke

WCAG-Kontrast ist nicht automatisch

Eine theoretisch huebsche Palette kann immer noch die Barrierefreiheit verfehlen. Pastell-auf-Pastell-Paare (ein helles Gelb auf einem hellen Rosa) sehen angenehm aus, haben aber weniger als 2:1 Kontrast. Testen Sie immer die vorgeschlagenen Text-auf-Hintergrund-Paare in einem WCAG-Pruefer. Wenn die Palette fuer Textkoerper funktionieren muss, bauen Sie sie zuerst um die Kontrastanforderung, Harmonie als Zweites.

Farbenblindheit betrifft 8% der Maenner

Rot-Gruen-Deuteranopie ist die haeufigste Form der Farbsehschwaeche und betrifft etwa 8% der Maenner und 0.5% der Frauen. Eine Rot-Gruen-Komplementaerpalette wird fuer einen deuteranopischen Betrachter zu einem einzigen braunen Schmierer. Fuer kategorialen Einsatz (Diagramme, Statusabzeichen, Ampeln) paaren Sie Farbe mit Form, Beschriftung oder Muster, und testen in einem Simulator wie Stark oder Sim Daltonism.

HSL ist nicht wahrnehmungsmaessig uniform

In HSL sieht Gelb bei 50% Helligkeit viel heller aus als Blau bei 50% Helligkeit. Das HSL-Modell behandelt alle Farbtoene numerisch gleich, aber menschliche Augen tun das nicht. Der Generator arbeitet intern in HSL fuer die Farbtonrotation, sodass zwei Proben mit aehnlichem S und L immer noch ein merklich unterschiedliches Wahrnehmungsgewicht haben koennen. Fuer wahrnehmungsmaessig ausgeglichene Paletten wechseln Sie zu OKLCH-bewussten Tools (Leonardo, Open Color).

Gamut-Unterschiede zwischen sRGB und Display P3

Moderne Apple-Displays (seit iMacs von 2015, MacBook Pros von 2016, allen iPhones seit dem 7) verwenden Display P3, einen breiteren Farbumfang als sRGB. Ein gesaettigtes Rot, das auf Display P3 leuchtend aussieht, kann auf einem aelteren, nur-sRGB-Monitor stumpfer aussehen, wenn das gleiche Hex gerendert wird. Fuer Markenfarben, die ueberall identisch aussehen muessen, bleiben Sie im kleineren Gamut von sRGB.

Hex-Codes tragen standardmaessig kein Alpha

Dreistellige (#abc) und sechsstellige (#aabbcc) Hex sind undurchsichtig. Achtstellige Hex (#aabbcc80, wo 80 50% Alpha ist) wird in CSS Color 4 und modernen Browsern unterstuetzt, aber nicht in Legacy-Tools. Wenn Sie Transparenz brauchen, verwenden Sie stattdessen rgba() oder hsla(), oder bleiben Sie bei undurchsichtigen Farben und lassen die Opazitaet des Elterns die Mischung handhaben.

Farb-Picker-Kalibrierungsdrift

Ein unkalibrierter Monitor kann mehrere Delta-E-Einheiten von einer Referenz abweichen, was bedeutet, dass eine Palette, die auf Ihrem Bildschirm makellos aussieht, auf dem eines anderen schlammig oder uebersaettigt aussehen kann. Fuer markenkritische Arbeit kalibrieren Sie mit einem Spyder- oder i1Display-Geraet. Fuer die meisten Webdesigns ist Bildschirmvarianz unvermeidlich; waehlen Sie Farben, die im mittleren Bereich funktionieren.

Datenschutz und Datenverarbeitung

Alles laeuft in Ihrem Browser. Die Harmoniemathematik ist JavaScript, der Canvas-Export ist lokal, und die Clipboard-API erfordert eine Benutzergeste. Wir senden Ihre Hex-Codes nirgendwohin, verfolgen nicht, welche Paletten Sie generieren, und speichern nichts in Cookies oder localStorage. Laden Sie die Seite neu und die vorherige Palette ist weg.

Sobald die Seite geladen ist, funktioniert der Generator offline. Sie koennen ihn in einem Flug, innerhalb eines Unternehmens-Proxys oder in einer Air-Gap-Umgebung verwenden. Die einzige netzwerkberuehrende Aktion ist der optionale Export Image, der ueber eine Blob-URL herunterlaedt, und der Download selbst sendet Ihre Farben nirgendwohin.

Wann dieser Generator nicht zu verwenden ist

Aufbau eines Designsystems mit semantischen Tokens

Designsysteme brauchen benannte, semantische Tokens (color-primary-500, color-error, color-warning) mit gepaarten Hell- und Dunkelmodus-Werten, Kontrastgarantien und benannten Skalenstufen. Verwenden Sie ein dediziertes Tool (Material Color Tool, Open Color, Adobe Leonardo) oder ein Token-Verwaltungssystem (Style Dictionary, Tokens Studio). Dieser Generator ist fuer Erkundung, nicht fuer Systemdesign.

Druckfarbverwaltung (CMYK, Pantone)

CMYK-Farbtrennungen fuer Offsetdruck erfordern professionelle Werkzeuge (Adobe Illustrators Mustertafel, Pantone Connect). RGB-zu-CMYK-Konvertierung ist verlustbehaftet, und Tintenbedeckungs-Limits sind wichtig. Wenn Ihre Palette im Massstab gedruckt wird, arbeiten Sie von Anfang an mit der Farbspezifikation des Druckers, nicht mit einem Hex-Generator nur fuer den Bildschirm.

Barrierefreie Paletten fuer Textkoerper erzeugen

Fuer Paletten, die WCAG AA oder AAA-Kontrast ueber jede Paarung garantieren muessen, verwenden Sie ein kontrast-zuerst-Tool wie Tanaguru Contrast-Finder, Adobe Leonardo oder APCA-basierte Tools. Dieser Generator folgt Harmonieregeln, nicht Kontrastregeln, sodass eine schoene analoge Palette ein 1.5:1 Text-auf-Hintergrund-Paar haben kann, das die Barrierefreiheit nicht besteht.

Animationen und Farbinterpolation

Fuer Verlaufsstops oder Farbanimationen brauchen Sie eine wahrnehmungsmaessig uniforme Interpolation in OKLCH oder LCH, nicht rohes HSL oder Hex. CSS-Verlaufsinterpolation standardmaessig in sRGB produziert schlammige Mittelpunkte (der beruehmte graue Mittelpunkt zwischen Gelb und Blau). Verwenden Sie Farbinterpolations-Tools (Erin Kissanes chroma.js, oklch.com) fuer animierte Uebergaenge.

Weitere Fragen

Wann sollte ich Hex vs RGB vs HSL verwenden?

Hex ist am kompaktesten und am haeufigsten kopiert, super fuer Design-Uebergaben. RGB ist am einfachsten im Code zu berechnen (jeder Kanal 0-255). HSL ist am einfachsten von Hand zu manipulieren: Aendern Sie den Farbton, um die Farbe zu verschieben, die Helligkeit fuer Varianten. Fuer modernes CSS ist OKLCH am zukunftssichersten fuer Designsysteme, weil es wahrnehmungsmaessig uniform ist.

Welchen Harmoniemodus sollte ich waehlen?

Beginnen Sie mit Analog fuer ruhige, zusammenhaengende Paletten (Schnittstellen, Blogs). Verwenden Sie Komplementaer fuer kontrastreiche Call-to-Action-Paare. Triadisch und Quadrat geben lebendige kategoriale Paletten fuer Diagramme oder spielerische Marken. Monochromatisch ist am besten fuer Dark-Mode und tonale Designsysteme. Split-Komplementaer ist die sicherste «kuehne aber nicht schroffe» Wahl.

Wie pruefe ich die Barrierefreiheit?

Fuegen Sie jedes Text-auf-Hintergrund-Paar in WebAIM Contrast Checker, Tanaguru oder APCA Contrast Tool ein. Zielen Sie auf mindestens 4.5:1 (WCAG AA) fuer Textkoerper, 3:1 fuer grossen Text und UI-Komponenten, 7:1 (WCAG AAA) fuer prosaintensive Lese-Apps. Testen Sie mit Farbenblindheitssimulatoren (Stark, Sim Daltonism) fuer kategoriale Nutzung.

Kann ich nach Figma oder Sketch exportieren?

Copy CSS gibt Ihnen einfuegefertige Custom Properties. Sowohl Figma als auch Sketch importieren Hex-Codes direkt ueber ihren Farbpicker. Der Export Image-Knopf gibt Ihnen ein PNG, das fuer Moodboards oder Screenshots geeignet ist. Fuer einen Token-freundlichen Export (W3C Design Token Community Group Format) kopieren Sie die Hex-Codes und passen sie in Tokens Studio oder Style Dictionary an.

Wie viele Farben sollte eine Palette haben?

Drei bis fuenf fuer die meisten Websites und Apps: eine primaere Markenfarbe, ein Akzent oder eine sekundaere Farbe, eine neutrale fuer Text und ein oder zwei Hilfsneutralen (Rand, Hintergrund). Groessere Designsysteme verwenden 9 bis 12 benannte Tokens (primaer, sekundaer, Erfolg, Warnung, Fehler, Info, plus Neutralen). Das Tool beginnt bei fuenf, aber Farbe hinzufuegen erweitert es.

Was ist OKLCH und sollte ich es verwenden?

OKLCH ist ein wahrnehmungsmaessig uniformer Farbraum, der 2023 zu CSS hinzugefuegt wurde. Im Gegensatz zu HSL sehen zwei OKLCH-Farben mit dem gleichen L-Wert wirklich gleich hell aus. Fuer Designsysteme und konsistente tonale Skalen ist es die neue beste Praxis. Browser-Unterstuetzung ist in aktuellen Versionen universell (Chrome 111+, Safari 15.4+, Firefox 113+). Fuer eine grazioese Rueckfallregelung in aelteren Browsern liefern Sie einen sRGB-Hex-Wert neben dem oklch().

Verwandte Werkzeuge