TanodTools
DE

Farbpaletten-Generator

Starten Sie mit einer Farbe und erhalten Sie passende Paletten, jedes Farbfeld mit HEX- und RGB-Wert und seinem Kontrast zu Weiß und Schwarz.

Läuft vollständig in Ihrem Browser

Zufällige Palette

Fünf Farben aus dem Zufallszahlengenerator Ihres Browsers. Sperren Sie die, die Sie behalten möchten, und ziehen Sie erneut. Drücken Sie die Leertaste zum Ziehen, wenn kein Textfeld den Fokus hat.

Export

Format

Die Paletten werden im Farbraum OKLCH erzeugt und als sRGB-HEX angezeigt; Farben, die für einen Bildschirm zu kräftig sind, werden in der Buntheit (Chroma) abgeschwächt. Die Kontrastwerte verwenden die WCAG-2-Formel, die nur den Helligkeitskontrast misst.

So erstellen Sie eine Farbpalette

  1. Wählen Sie eine Basisfarbe mit dem Farbwähler oder geben Sie einen Wert wie #1636a3 oder f60 in das HEX-Feld ein.
  2. Sehen Sie sich die Harmonie-Paletten darunter an. Jedes Farbfeld zeigt HEX, RGB und ob schwarzer oder weißer Text darauf WCAG AA oder AAA besteht.
  3. Wählen Sie unter Export eine Palette und kopieren oder laden Sie sie als CSS Custom Properties, JSON-Array oder einfache Liste herunter. Mit Zufällige Palette und den Sperr-Schaltflächen können Sie experimentieren.

Wie die Farbharmonien entstehen

Eine Farbharmonie ist eine Gruppe von Farben, deren Farbtöne in festen Winkeln auf dem Farbkreis liegen. Analoge Farben sind Nachbarn, 30 Grad voneinander entfernt. Eine Komplementärfarbe liegt 180 Grad entfernt, ein geteilt komplementäres Paar bei 150 und 210 Grad, eine Triade hat 120 Grad Abstand, und eine Tetrade verwendet vier Farbtöne im Abstand von 90 Grad. Die monochrome Palette behält den Farbton und stuft die Helligkeit von zarten Aufhellungen bis zu dunklen Abtönungen ab.

Der hier verwendete Farbkreis ist OKLCH, die zylindrische Form des OKLab-Farbraums von Björn Ottosson. Die Umrechnung führt von sRGB zu linearem Licht, dann durch die OKLab-Matrizen und mit einer Farbraumprüfung wieder zurück. Fällt eine gedrehte Farbe aus dem Bereich, den sRGB zeigen kann, wird ihre Buntheit in kleinen Schritten verringert, bis sie hineinpasst; so bleiben die gewählte Helligkeit und der Farbton erhalten.

Der Kontrast wird für jedes Farbfeld gegenüber Weiß und Schwarz angegeben, denn die erste Frage zu einer Palettenfarbe ist meist, welcher Text darauf stehen kann. Das Verhältnis und die Angabe AA oder AAA werden immer ausgeschrieben, damit die Information nicht davon abhängt, Farbe sehen zu können.

Tipps

Häufige Fragen

Warum OKLCH statt HSL?

In HSL wirken ein Gelb und ein Blau mit demselben Helligkeitswert sehr unterschiedlich hell. OKLCH ist so aufgebaut, dass gleiche Helligkeitsschritte gleich aussehen, wodurch die Farbfelder einer Palette gleichmäßig gewichtet bleiben. Der Farbton ist der Winkel, der für die Harmonien verwendet wird; eine Komplementärfarbe liegt also in OKLCH 180 Grad von Ihrer Basis entfernt, nicht in HSL.

Was passiert, wenn sich eine Farbe auf einem Bildschirm nicht darstellen lässt?

Wird ein Farbton bei gleicher Helligkeit und Buntheit gedreht, landet er manchmal außerhalb des sRGB-Bereichs, den ein normales Display zeigen kann. Das Tool senkt dann die Buntheit, bei gleicher Helligkeit und gleichem Farbton, bis die Farbe hineinpasst. Deshalb kann ein gedrehtes Farbfeld etwas weniger kräftig wirken als die Basis.

Was bedeuten die Kennzeichnungen AA und AAA?

Sie geben das WCAG-2-Kontrastverhältnis von weißem oder schwarzem Text auf diesem Farbfeld an. Ein Verhältnis von 4,5 oder mehr ist AA für normalen Text, 7 oder mehr ist AAA, und 3 bis 4,5 besteht AA nur für großen Text. Ein Farbfeld, das weder mit Schwarz noch mit Weiß besteht, ist ein schlechter Hintergrund für Text.

Wie funktioniert die zufällige Palette?

Fünf Farben werden mit dem sicheren Zufallszahlengenerator des Browsers gezogen: Die Farbtöne verteilen sich über den Farbkreis, mit zufälliger Helligkeit und Buntheit in einem Bereich, der fast Schwarz und fast Weiß vermeidet. Sperren Sie ein Farbfeld, um es zu behalten, und drücken Sie dann auf Zufällige Palette oder die Leertaste, um die anderen zu ersetzen.

Welches Exportformat sollte ich verwenden?

CSS Custom Properties lassen sich direkt in den :root-Block eines Stylesheets einfügen. Das JSON-Array eignet sich für Design-Tokens oder Skripte, und die einfache Liste enthält einen HEX-Wert pro Zeile für Tools, die eingefügte Farben annehmen. Alle drei verwenden die angezeigten HEX-Werte.

Versteht das Tool Kurzschreibweise und Großbuchstaben?

Ja. #abc, abc, #AABBCC und aabbcc werden alle gelesen. Werte mit einem Alpha-Paar, etwa mit acht Stellen, werden hier nicht akzeptiert; entfernen Sie den Alphawert zuerst mit dem Farbkonverter und Kontrastprüfer.