Farbpaletten-Generator – kostenlos

Beispiel

Öffnen Sie die Seite, und das Feld „Basisfarbe“ enthält bereits #14b8a6, mit ausgewählter „Markenpalette“. Unter „Markenpalette · 7 Farben“ erscheinen sieben Farbfelder: #14B8A6 (Basis), #EE66BA (Akzent), #E5FAF8 (Helle Abstufung), #14524A (Dunkle Abstufung) und drei Neutraltöne im selben Farbton, #F3F6F6, #63837F und #1A2322. Die Karte der Basis zeigt „Auf Weiß 2.5“ mit „Nicht bestanden“ und „Auf Schwarz 8.4“ mit „AAA“. Klicken Sie auf „Komplementär“, und der Streifen schrumpft auf zwei Farben, #14B8A6 und #EF7381. Wählen Sie unter „Kopierformat“ RGB und klicken Sie dann auf „Alle kopieren“. Eine Einblendung sagt „2 Farben kopiert“, und die Zwischenablage enthält rgb(20, 184, 166), rgb(239, 115, 129). In der „Text-und-Hintergrund-Prüfung“ beginnt die Textfarbe als #000000 auf dem Hintergrund #14B8A6 und zeigt 8.44:1, „Normaler Text AAA“, „Großer Text AAA“.

Welche Einstellungen zu verwenden sind, und die Grenzen

• Geben Sie die Farbe in der Form ein, in der Sie sie haben. Das Feld „Basisfarbe“ akzeptiert einen Hex-Code mit oder ohne #, mit 3 oder 6 Stellen, einen CSS-Namen wie teal oder tomato, einen rgb()- oder hsl()-Wert (ein Alpha-Wert wird ignoriert) oder bloße Zahlen wie 20 184 166. Leerzeichen in Namen werden ignoriert, „rebecca purple“ funktioniert also. Ein vollständiger Hex-Code mit 6 Stellen wird beim Tippen übernommen. Alles andere wird übernommen, wenn Sie Enter drücken oder das Feld verlassen. Hex mit 8 Stellen und oklch() werden nicht gelesen. Die runden Punkte setzen eine von acht Startfarben, und das Quadrat öffnet die Farbauswahl Ihres Systems.
• Wählen Sie den Palettentyp passend zur Aufgabe. Die „Markenpalette“ liefert 7 Farben mit Rollen: Basis, Akzent, Helle Abstufung, Dunkle Abstufung und drei Neutraltöne. „Komplementär“ liefert 2, „Analog“ 4, „Triadisch“ 3, „Geteilt-komplementär“ 3, „Tetradisch“ 4, „Monochrom“ 5 und „Schattierungen“ 7. Monochrom behält Ihre Farbe und stuft die Helligkeit ab. Schattierungen ist eine feste Leiter von 10 bis 90 Prozent Helligkeit bei Ihrem Farbton und Ihrer Sättigung und enthält Ihre genaue Farbe nicht. Die Typen, die den Farbton drehen (Komplementär, Analog, Triadisch, Geteilt-komplementär, Tetradisch), streben eine ähnliche wahrgenommene Helligkeit an, die in einem mittleren Bereich gehalten wird.
• Sperren Sie, was Ihnen gefällt, und mischen Sie dann neu. Klicken Sie bei einem Farbfeld auf „Diese Farbe sperren“ und dann auf „Mischen“ oder wählen Sie eine neue Basis. Gesperrte Farbfelder behalten ihre Farbe, die übrigen ändern sich. „Mischen“ wählt eine zufällige Basis mit HSL-Sättigung 50 bis 84 und Helligkeit 40 bis 57 und landet daher bei mittleren Tönen. Sperren folgen der Position des Farbfelds, nicht der Farbe: Sperren Sie Farbfeld 1, ändern Sie die Basis, und Farbfeld 1 behält die alte Farbe. „Diese Farbe bearbeiten“ öffnet eine Farbauswahl für ein Farbfeld und fügt der Überschrift „(bearbeitet)“ hinzu. Ein bearbeitetes Farbfeld, das Sie nicht gesperrt haben, wird beim nächsten Neuerzeugen der Palette ersetzt.
• Prüfen Sie den Kontrast, bevor Sie veröffentlichen. Jede Karte zeigt die Verhältnisse „Auf Weiß“ und „Auf Schwarz“ mit einem Abzeichen: „AAA“ ab 7:1, „AA“ ab 4.5:1, „AA groß“ ab 3:1, sonst „Nicht bestanden“. Die Verhältnisse verwenden die WCAG-Formel für die relative Luminanz. In der „Text-und-Hintergrund-Prüfung“ wählen Sie eine Textfarbe und einen Hintergrund aus der Palette sowie Weiß und Schwarz. Die Zeile „Normaler Text“ bewertet AAA ab 7 und AA ab 4.5. Die Zeile „Großer Text“ bewertet AAA ab 4.5 und AA ab 3. Testen Sie genau die Paare, die Sie verwenden wollen, denn eine Palette ist nicht allein deshalb lesbar, weil es jede Farbe für sich ist.
• Wählen Sie das Kopierformat, dann den Export. „Kopierformat“ legt fest, was ein Klick auf ein Farbfeld, einen Chip für Hell- oder Dunkelstufen und „Alle kopieren“ kopiert: Hex, RGB, HSL oder OKLCH. Für die Basis lautet das #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) und oklch(70.4% 0.123 182.5). Unter „Exportieren:“ speichern die Schaltflächen palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js („Tailwind 50–950“), palette.json, palette.png, palette.svg, palette.gpl, palette.ase und palette.aco. Textdateien enthalten Hex-Werte, und JSON ergänzt RGB-, HSL- und OKLCH-Zeichenketten. PNG ist 200 px breit pro Farbfeld, SVG 160 px. „Hex-Beschriftungen auf PNG/SVG“ ist standardmäßig angehakt.
• Teilen Sie den Link oder beginnen Sie mit einer Vorlage. „Ergebnis teilen“ erstellt einen Link, der Basisfarbe, Typ, Änderungen und Sperren hinter dem # in der Adresse enthält; auf einem Touch-Gerät, das dies unterstützt, öffnet es das Teilen-Menü. Eine geteilte Palette kann 1 bis 12 Farben enthalten. Unter „Probieren Sie diese aus“ laden „Pastell“, „Erdtöne“, „Neon“ und „Markensicher (AA)“ jeweils 5 Farben als „Eigene“ Palette, und eine spätere Änderung der Basis schaltet zurück auf „Markenpalette“. „Vom Bildschirm wählen“ erscheint nur in Browsern mit der EyeDropper-Funktion, vor allem in Chromium-basierten.

Häufige Probleme und wie man sie behebt

Es heißt: „Diese Farbe kennen wir nicht. Versuchen Sie #14b8a6, teal oder rgb(20, 184, 166).“

Der Text konnte nicht als Farbe gelesen werden, und das Feld springt auf die aktuelle Basis zurück. Häufige Ursachen sind Hex mit 4 oder 8 Stellen wie #14b8a680, ein oklch()-Wert, ein Farbname, der kein CSS-Name ist, und Zahlen außerhalb des Bereichs wie rgb(300, 0, 0) oder hsl(10, 120%, 50%). Geben Sie sie erneut als Hex mit 3 oder 6 Stellen, als CSS-Namen oder als rgb() oder hsl() mit Werten im Bereich ein und drücken Sie dann Enter.

Sie haben eine neue Basisfarbe gewählt, aber ein Farbfeld hat die alte Farbe behalten.

Dieses Farbfeld ist gesperrt. Die Sperrschaltfläche auf der Karte wird petrolfarben, und ihr Tooltip lautet „Diese Farbe entsperren“. Gesperrte Farbfelder bleiben bei jedem Neuerzeugen der Palette erhalten, auch nach einer neuen Basis, einem neuen Typ oder „Mischen“. Klicken Sie erneut auf die Sperre, um sie zu lösen. Sperren sind an die Position des Farbfelds gebunden, eine Sperre auf Farbfeld 1 gilt also auch noch, nachdem Sie von „Markenpalette“ auf „Triadisch“ gewechselt haben.

Eine Einblendung sagt „Kopieren fehlgeschlagen“.

Beide Wege zur Zwischenablage sind fehlgeschlagen: die Zwischenablage-API des Browsers und danach ein verstecktes Textfeld mit einem Kopierbefehl. Die Zwischenablage-API fehlt auf Seiten, die nicht sicher sind, und in manchen abgeschotteten Frames, und ein Browser kann sie auch ablehnen, wenn die Seite nicht den Fokus hat. Klicken Sie einmal auf die Seite und versuchen Sie es erneut oder öffnen Sie die Seite in einem normalen Browser-Tab. Bleibt das Kopieren blockiert, speichern Sie mit den Export-Schaltflächen für CSS, JSON oder Tailwind stattdessen eine Datei.

Es gibt keine Schaltfläche „Vom Bildschirm wählen“.

Die Schaltfläche wird nur hinzugefügt, wenn der Browser die EyeDropper-Funktion hat, und laut den FAQ der Seite sind das vor allem Chromium-basierte Browser. Wo sie fehlt, verwenden Sie das quadratische Farbfeld neben dem Textfeld oder geben Sie den Hex-Code ein, den Sie in einer anderen App abgelesen haben. Esc während einer Auswahl bricht sie stillschweigend ab, und eine Auswahl, die aus anderem Grund fehlschlägt, zeigt auf der Seite keine Meldung.

Das gespeicherte PNG oder SVG hat keine Hex-Codes auf den Farbfeldern.

Das Kästchen „Hex-Beschriftungen auf PNG/SVG“ ist nicht angehakt. Beim Öffnen der Seite ist es angehakt, jemand hat es also abgewählt. Bei angehaktem Kästchen trägt jedes Farbfeld seinen Hex-Code in Großbuchstaben, in dunkler oder heller Tinte, je nach Kontrast. Das Kästchen betrifft nur die PNG- und SVG-Dateien. Die anderen Exporte enthalten die Farbwerte selbst und haben keine Beschriftungen. Haken Sie das Kästchen an und klicken Sie dann erneut auf PNG oder SVG.

Wie es im Vergleich abschneidet

Diese Seite erstellt aus einer Farbe eine Palette nach festen Farbkreis-Regeln, bewertet den Kontrast mit WCAG-Verhältnissen und exportiert in Code- und Designdateien. Sie entnimmt keine Farben aus einem Foto (dafür verlinkt die Seite auf die Bildfarben-Extraktion), zeigt keine Vorschau für Farbfehlsichtigkeit, benennt keine Farben und speichert keine Paletten in einem Konto. Ihre Arbeit wird in der Adressleiste hinter dem # festgehalten, sodass ein Neuladen oder ein Lesezeichen sie zurückbringt. Harmonieregeln liefern einen Ausgangspunkt, keine fertige Marke. Eine Design-App oder ein Markenhandbuch bleibt der Ort, um Rollen festzulegen und die Palette an echten Layouts zu testen.