Farbpalettengenerator

Ein Farbpalettengenerator erzeugt Farbsätze, die zusammenwirken – komplementäre Paare, analoge Verläufe, Schattierungen einer Basis – mit Hex-Codes, die in CSS oder ein Design-Tool kopiert werden können. Es automatisiert den Schritt der Farbtheorie: Farben harmonieren durch ihre Beziehungen im Farbkreis, und generierte Paletten kodieren diese Beziehungen, anstatt zu hoffen.

Das praktische Problem, das es löst: Eine schöne Farbe auszuwählen ist einfach; Fünf zusammengehörige Elemente auszuwählen, ist eine Designkompetenz, über die die meisten Projekte nicht verfügen. Eine generierte Palette beginnt kohärent – ​​der Unterschied zwischen einer Benutzeroberfläche, die thematisch aussieht, und einer, die zusammengesetzt aussieht.

Generieren Sie Paletten und kopieren Sie die Hex-Codes, die zu Ihrem Projekt passen – als vollständiges Schema oder als Ausgangspunkt, den Sie anpassen.

Umwandeln einer Palette in ein verwendbares System: Wenden Sie die 60-30-10-Regel an (dominant neutral ~60 % der Benutzeroberfläche, sekundär ~30 %, Akzent ~10 % – der Akzent sind Ihre Schaltflächen und Hervorhebungen, nicht Ihre Hintergründe); Leiten Sie funktionale Farben aus der Temperatur der Palette ab (Erfolgsgrün, Warnbernstein, Gefahrenrot, die der Sättigung des Schemas entsprechen); und erzeugen Sie Farbtöne/Schattierungen jeder Farbe für Hover-Zustände, Rahmen und den Dunkelmodus, anstatt neue Farbtöne einzuführen.

Die beiden Prüfungen vor dem Versand: Kontrast – Text-auf-Hintergrund-Paare benötigen das WCAG-Verhältnis von 4,5:1 (eine schöne Palette, bei der der Kontrast versagt, ist eine Neugestaltung, die darauf wartet, umgesetzt zu werden); und Kontext – Farben verändern sich wahrnehmungsmäßig vor unterschiedlichen Hintergründen, also prüfen Sie die Palette auf Weiß, Dunkel und ihre eigenen Farben. Koppeln Sie es mit unserem Farbkonverter für Formatänderungen (Hex↔RGB↔HSL), wenn Werte zwischen Werkzeugen verschoben werden.