Farbpaletten-Generator

Erstelle aus einer Farbe eine stimmige Palette mit fünf Farben – analog, komplementär, triadisch und mehr. Sieh sofort, wie sie als helles und dunkles Farbschema wirkt, und übernimm sie für CSS, Tailwind oder als Bild.

Deine Daten bleiben bei dir: Alles wird in deinem Browser berechnet. Deine Farben werden weder übertragen noch gespeichert.

Deine Palette

Harmonie

Nachbarn im Farbkreis – ruhig und harmonisch

Basisfarbe anpassen

HEX, RGB, HSL oder ein CSS-Farbname.

183°
0.101
63 %

Änderst du die Basisfarbe, passen sich die anderen Farben an.

Gut lesbare Kombinationen

Diese Farben deiner Palette eignen sich als Schrift auf Hintergrund (Kontrast nach WCAG).

Keine zwei Farben erreichen gemeinsam 3 : 1 – für Text sind sie zu ähnlich hell. Probier „Schattierungen“ oder „Monochrom“, oder nimm Weiß bzw. Schwarz für die Schrift.

So wirkt deine Palette

Aus deiner Palette entsteht ein fertiges Farbschema für Webseite, Präsentation oder Flyer. Schrift und Schaltflächen sind dabei immer gut lesbar.

Schema
Musikverein LindenauTermine

Sommerkonzert im Park

Samstag, 18 Uhr · Eintritt frei

Ein Abend mit Blasmusik, Jazz und Liedern zum Mitsingen. Bring eine Decke mit – für Getränke ist gesorgt.

Platz reservierenProgramm ansehen
Neu

Proben für Einsteiger

Jeden Dienstag – Instrumente zum Ausprobieren sind da.

  • Hintergrund#f6fbfa
  • Fläche#e7f3f1
  • Rand#cadcd9
  • Text#0d2421
  • Nebentext#455e5a
  • Akzent#2a9d8f
  • Schrift auf Akzent#000000
  • Link#007a6e · angepasst
  • Zweitfarbe#1383a1
  • Schrift auf Zweitfarbe#000000

„Angepasst“ heißt: Die Farbe aus deiner Palette wurde etwas heller oder dunkler gemacht, damit Schrift darauf oder daneben gut lesbar ist.

Das ganze Schema mit hellen und dunklen Werten bekommst du unten unter „Farbschema CSS“ oder „Farbschema Tailwind“.

So sehen Menschen mit Farbsehschwäche deine Palette

  • Rotschwäche (Protanopie)

    Alle Farben bleiben gut unterscheidbar.

  • Grünschwäche (Deuteranopie)

    Alle Farben bleiben gut unterscheidbar.

  • Blauschwäche (Tritanopie)

    Alle Farben bleiben gut unterscheidbar.

Vereinfachte Darstellung der vollständigen Ausprägung. Wichtige Informationen sollten nie nur über die Farbe vermittelt werden.

Palette übernehmen

Format
#2a9d8f
#72a86f
#4ea47e
#06929b
#1383a1

Hinweis: Die Paletten werden im OKLCH-Farbraum berechnet, in dem gleiche Helligkeit auch gleich hell wirkt. Bildschirme zeigen Farben unterschiedlich; für Druck gelten die Farbwerte deiner Druckerei. Die Kontrastwerte folgen WCAG 2.2 und sind ohne Gewähr. Einzelne Farben umrechnen und genauer prüfen kannst du unter Farben umrechnen & Kontrast prüfen.

Alle Ergebnisse ohne Gewähr. Bitte prüfe wichtige Ergebnisse selbst. Mehr dazu in den Nutzungshinweisen.

Ist dir ein Fehler aufgefallen oder hast du eine Idee für dieses Werkzeug? Wir freuen uns über dein Feedback.

Fragen & Antworten

Welche Harmonie soll ich wählen?

Analog und Monochrom wirken ruhig und eignen sich gut für Webseiten und Präsentationen. Komplementär und Triadisch sind kräftiger – gut für Akzente, etwa eine Schaltfläche. Schattierungen liefern Hell-Dunkel-Stufen einer Farbe für Hintergründe und Schrift.

Was bedeuten Farbton, Buntheit und Helligkeit?

Der Farbton ist die Position im Farbkreis, etwa Rot oder Blau. Die Buntheit sagt, wie kräftig die Farbe ist; 0 ist Grau. Die Helligkeit reicht von dunkel bis hell und wirkt bei allen Farbtönen gleich, weil das Werkzeug im OKLCH-Farbraum rechnet.

Wie verwende ich die Palette?

Kopiere sie als CSS-Variablen, für Tailwind oder als Liste von HEX-Codes, oder speichere sie als Bild. Für gut lesbaren Text zeigt das Werkzeug, welche Farben deiner Palette zusammenpassen.

Was ist das helle und dunkle Farbschema?

Aus deiner Palette werden Farben für Hintergrund, Text, Schaltflächen und Links abgeleitet – einmal hell, einmal dunkel. Text erreicht dabei mindestens 7 : 1, Schaltflächen und Links mindestens 4,5 : 1. Als „Farbschema CSS“ bekommst du beide Varianten; der Browser wählt dann automatisch passend zur Einstellung des Geräts.

Passt dazu