FARBE, MIT ZWECK
Von einer einzelnen Markenfarbe bis hin zu praktischen Web-Farbschemata. Wählen Sie passende Paletten aus, zeigen Sie eine Vorschau der Seiteneffekte an und exportieren Sie Ihre Designvariablen.
IHRE PALETTE
Farbpalettenkarten werden vorbereitet. Aktivieren Sie JavaScript, um mit der Verwendung zu beginnen.
Klicken Sie auf einen Farbwert, um seinen Hexadezimalwert präzise zu bearbeiten, oder auf ein großes Farbfeld, um ihn zu kopieren. Die Markenfarbe bleibt unverändert; Andere Farbfelder können gesperrt werden.
Nur die letzten 50 Schritte werden beibehalten. Durch das Erfrischen wird der Verlauf gelöscht.
11 Helligkeitsstufen für Status und Hierarchie
SEHEN SIE ES IM KONTEXT
Organisieren Sie Projekte, vernetzen Sie Teams und verwandeln Sie großartige Ideen in nächste Schritte in einem aufgeräumten Arbeitsbereich.
Teilen Sie Fortschritte von täglichen Aufgaben bis hin zu neuen Durchbrüchen mit Ihrem Team und konzentrieren Sie Ihre Energie auf das, was wirklich wichtig ist.
Beispieltext und -zahlen dienen nur der Vorschau von Farbschemata. Beim Wechseln der Modi werden Hintergrund-, Oberflächen- und Textfarben neu angeordnet. Funktionsfarben können von den Original-Farbkarten abweichen.
DESIGN-TOKENS
KONTRASTPRÜFUNG
Normaler Text ≥ 4,5:1, großer Text ≥ 3:1. Kontrollgrenzen, die auf Farberkennung basieren, erfordern typischerweise ≥ 3:1; Zierlinien sind ausgenommen. Der Bericht prüft angegebene Farbpaare; Für vollständige Seiten ist weiterhin eine Überprüfung der Schriftgröße, des Status und des Hintergrunds erforderlich.
Klicken Sie auf die Verhältnisse in der Matrix, um Vorder- und Hintergrund zu vergleichen.
Kontrastverhältnisse zwischen Farbfeldern helfen bei der Bewertung von Kandidatenkombinationen. Die Eignung für Textkörper, UI-Steuerelemente oder Grafiken hängt vom jeweiligen Anwendungsfall ab.
BEREIT FÜR IHREN NÄCHSTEN SCHRITT
Semantische Rollenfarben, Akzentfarbpaletten und Primärfarbskalen für den aktiven Designmodus exportieren.
Legen Sie nach dem Kopieren in Ihr Stylesheet Hintergrund- und Textfarben für die tatsächlichen Komponenten fest und überprüfen Sie dann die Status „Hover“, „Deaktiviert“ und „Fokus“.
Farbschemata werden nicht standardmäßig hochgeladen oder gespeichert. Verwenden Sie Paletten-Links oder laden Sie Dateien herunter, um Ihre Ergebnisse zu behalten. Drücken Sie die Leertaste im leeren Bereich der Werkbank, um zwischen den Sets zu wechseln. Sperren Sie Farbkarten, um sie aufzubewahren. Diese Seite enthält Website-Anzeigen.
Verbinden Sie diesen Schritt mit Ihrem Ziel
Fahren Sie nach der Verwendung dieses Tools mit den entsprechenden Schritten fort. Bei Checklistennoten handelt es sich um Ihre eigenen Notizen, nicht um eine bestandene Prüfung oder Geschäftsgenehmigung.
Alle Geschäftsziele anzeigenFür KI-Schritte gelten gemeinsame Nutzungsbeschränkungen und eine menschliche Überprüfung. Sie werden nur ausgeführt, wenn Sie sie übermitteln, und empfangen nicht automatisch Eingaben oder Berichte aus vorherigen Schritten.
IHR NÄCHSTER SCHRITT
Verwenden Sie Bild- und Dokumentfunktionen im Rahmen der angegebenen kostenlosen Limits. Erstellen Sie ein Firmenkonto für Website-Überwachung, Geschäftsanfragen und Teambenachrichtigungen oder besprechen Sie Ihren Workflow mit uns.
Neue Unternehmen erhalten eine 14-tägige Pro-Testversion, für die keine Karte erforderlich ist. Bei Testversionen ist der bezahlte monatliche Kreditzuschuss nicht inbegriffen.
Sie haben bereits ein Konto? Öffnen Sie Ihren Arbeitsbereich → (English)Die Auswahl einer Markenfarbe ist einfach, aber die Anwendung auf Webseiten erfordert mehr Urteilsvermögen. Schaltflächen müssen hervorstechen, der Fließtext muss klar sein und Karten benötigen eine visuelle Hierarchie; Die Wirkung derselben Farbe ändert sich, wenn sie auf hellem oder dunklem Hintergrund platziert wird. Dieses Web-Farbpaletten-Tool vereint Primärfarben, passende Paletten, kontinuierliche Farbverläufe und Live-Seitenbeispiele in einer einzigen Workbench und hilft Ladenbetreibern, Produktmanagern, Designern und Entwicklern dabei, gemeinsam praktikable Lösungen zu diskutieren.
Ein schöner Satz Farbfelder bedeutet nicht, dass alle Farben für Fließtext oder Schaltflächen geeignet sind. Die Workbench erstellt Rollen für Hintergrund, Oberfläche, Körper, sekundären Text, primäre Schaltfläche, Akzent und Rahmen aus Primär- und Sekundärfarben und wählt Textfarben für Schaltflächen aus. Der helle Modus erfordert einen klaren Textkontrast, während der dunkle Modus Hintergründe von Karten unterscheiden muss. Die beiden Probleme können nicht allein durch einfache Farbumkehr gelöst werden.
Wenn die Primärfarbe sehr hell ist, kann sie in der Markenpalette verbleiben, während sie mit einer passenderen Textfarbe für Schaltflächen kombiniert wird. Akzentfarben werden am besten sparsam eingesetzt; Große Hintergrundbereiche erfordern normalerweise eine geringere Sättigung. Das Tool bietet einen vergleichbaren Ausgangspunkt, während das endgültige Layout, die Bildsprache und die Inhaltsdichte Ihnen überlassen bleiben.
Die 11-stufige Farbskala ist hier mit 50, 100, 200 bis 950 beschriftet und zeigt Helligkeitsänderungen von hell nach dunkel. OKLCH trennt Helligkeit von Chroma und Farbton und ist somit ideal für die Suche nach Kandidaten für helle Hintergründe, ausgewählte Zustände, Hover-Zustände und dunklen Text. Bei Kandidaten außerhalb des sRGB-Farbraums wird die Chroma vor der Zuordnung und Konvertierung in HEX reduziert.
Die Nummern der Farbstufen geben die relative Position innerhalb der Farbskala an. Sie bedeuten nicht, dass die Primärfarbe Ihrer Marke bei 500 liegen muss. Helles Gelb, tiefes Blau und Hellrosa haben unterschiedliche Eingabehelligkeitsstufen, aber die Primärfarbe bleibt im primären Farbfeld erhalten. Exportierte Funktionsfarben und Farbstufen sollten auf der Grundlage tatsächlicher Komponenten ausgewählt und innerhalb Ihres Projekts fein abgestimmt werden.
Kontrastverhältnisberichte berechnen die relative Luminanz zwischen undurchsichtigen sRGB-Vordergrund- und Hintergrundfarben. Normaler Text erfordert zur AA-Konformität ein Verhältnis von 4,5:1; Großer Text (mindestens 18pt normal oder 14pt fett) erfordert 3:1. Kontrollgrenzen und aussagekräftige Grafiken zur Identifizierung erfordern normalerweise 3:1, dekorative Trennlinien variieren jedoch. Das Übergeben eines einzelnen Farbpaars bedeutet nicht, dass die gesamte Webseite den WCAG-Konformitäten entspricht.
Transparente Überlagerungen, Farbverläufe und Produktbilder verändern den tatsächlichen Hintergrund; Hover, Fokus, Fehlerwarnungen und deaktivierte Zustände müssen ebenfalls separat überprüft werden. Inhalte können sich nicht allein auf die Farbe verlassen – Fehler sollten beispielsweise auch klaren Text enthalten. Nachdem exportierte Paletten in Live-Seiten eingefügt wurden, sollten Tastaturoperationen, Schriftgrößen und Zustände gemeinsam ausgewertet werden, nicht nur dieser Palettenbericht.
Das Ops-Team kann Kandidaten anhand der Primärfarbe der Marke auswählen. Das Produktteam kann Schaltflächen und Infohierarchien in Web-Mockups vergleichen. Das Designteam kann Lieblingskarten zur Erkundung sperren. Das Entwicklerteam kann CSS-Variablen und JSON exportieren. Teilen-Links laden die Farb- und UI-Einstellungen neu und minimieren so Farbabweichungen in Screenshots.
Dieses Tool verarbeitet nur Farben und Modelle. Es werden weder automatisierte Urteile über Markenpositionierung, Konversionsraten oder Branchenpsychologie gefällt, noch werden unbestätigte Behauptungen unter dem Deckmantel der KI generiert. Die Bereitstellung klarer Nutzungsrichtlinien und überprüfbarer Kontrastverhältnisse für dieselbe Farbpalette ist die umsetzbare Leistung, die Sie als Nächstes direkt anwenden können.
Wählen Sie eine primäre Markenfarbe aus oder geben Sie sie ein und wählen Sie dann angrenzende, komplementäre, geteilte, komplementäre, triadische oder monochromatische Schemata. Das Tool behält die von Ihnen eingegebene Primärfarbe bei, generiert die restlichen passenden Farben im OKLCH-Farbraum und bietet helle und dunkle Webvorschauen, funktionale Farben und Kontrastprüfungen. Farbbeziehungen bieten einen Design-Ausgangspunkt; Bei der endgültigen Entscheidung sollten immer noch Marke, Bilder und tatsächliche Seiten berücksichtigt werden.
Sowohl die Primärfarbe als auch der genaue Editor jedes Farbfelds akzeptieren #RGB und #RRGGBB, z. B. #63F oder #635BFF, und normalisieren sie auf sechsstelliges HEX. Klicken Sie auf den Wert unter einem Farbfeld, um eine Farbe einzufügen, sie mit dem Original zu vergleichen und anzuwenden. Transparenz, Farbnamen und andere Eingabefarbräume werden nicht unterstützt. Sie können Farbfelder weiterhin als HEX, RGB oder OKLCH kopieren; CSS-Exporte verwenden HEX.
Die Schaltflächen „Rückgängig“ und „Wiederherstellen“ über den Farbfeldern stellen die Einstellungen für Farben, Sperren, Harmonie, Stil und Website-Vorschau wieder her. Verwenden Sie außerhalb von Textfeldern Strg / ⌘ + Z zum Rückgängigmachen und Strg / ⌘ + Umschalt + Z zum Wiederherstellen. Windows unterstützt auch Strg + Y. Bei Textfeldern bleibt der native Text des Browsers rückgängig. Auf dieser Seite werden nur die letzten 50 Schritte gespeichert und durch die Aktualisierung gelöscht. Um eine Palette länger aufzubewahren, kopieren Sie den Freigabelink oder laden Sie eine Datei herunter.
OKLCH beschreibt Farben anhand von Helligkeit, Chroma und Farbton und ist daher im Allgemeinen besser für die Generierung visuell einheitlicher Farbskalen geeignet als die direkte Anpassung der HSL-Helligkeit. Bei der Konvertierung in den Webstandard sRGB liegen einige Farben außerhalb des darstellbaren Farbraums. Das Tool reduziert Chroma, um sie in sRGB abzubilden. Die Darstellung kann je nach Bildschirm, Umgebungslicht und Browser variieren.
Analoge Farben verwenden Farbtöne in der Nähe der Primärfarbe, die für zusammenhängende Bilder geeignet sind. Komplementärfarben führen gegensätzliche Farbtöne ein, um wichtige Punkte hervorzuheben. Split-Komplementär sieht neben dem Komplementärfarbton aus, um die Unterscheidung aufrechtzuerhalten. Triadische Farben bilden drei verschiedene Farbtongruppen im Farbkreis, um die Unterscheidung von Modulen zu erleichtern. Monochromatisch passt Helligkeit und Chroma um die Primärfarbe an, sodass die Hierarchie stärker hervorsticht als der Farbton. Dabei handelt es sich nicht um deterministische Regeln für die Branchen- oder Markenpsychologie.
Nicht unbedingt. 50–950 sind Design-Farbton-Tags, die allmähliche Helligkeitsänderungen darstellen; 500 ist nicht für alle Eingaben eine geeignete Helligkeit. Ihre eingegebene Primärfarbe bleibt im Hauptfarbfeld vollständig erhalten, während Schattierungen verwendet werden, um Kandidaten für Hintergründe, Rahmen und Hover-Zustände zu finden. Bitte wählen Sie basierend auf der tatsächlichen Nutzung und den Kontrastanforderungen aus.
Klicken Sie auf die Sperrschaltfläche einer Farbkarte, um das Problem zu beheben. Wenn Sie Kombinationen oder Stile wechseln oder auf „Mischen“ klicken, ändern sich die verbleibenden freigeschalteten Farbkarten weiterhin. Sie können eine Farbkarte einzeln bearbeiten oder als neue Primärfarbe festlegen. Klicken Sie auf „Alle entsperren“, um alle Farbkarten zu entsperren, oder auf „Zurücksetzen“, um die Standardfarbschemata und -einstellungen wiederherzustellen.
Nein. Der Bericht wertet nur den relativen Luminanzkontrast der aufgelisteten undurchsichtigen Vordergrund- und Hintergrundfarben aus. WCAG AA erfordert ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text; UI-Steuerelementgrenzen und Grafiken, die eine Farbidentifizierung erfordern, erfordern normalerweise 3:1. Als großer Text gilt mindestens 18pt normaler oder 14pt fetter Text. Transparenz, Farbverläufe, Hintergrundbilder, Hover-/Fokuszustände, Schriftgrößen und andere Barrierefreiheitsregeln müssen auf tatsächlichen Seiten separat geprüft werden; dekorative Trennwände erfordern nicht einheitlich 3:1.
Dunkle Webseiten erfordern eine Neuordnung der Hierarchie von Hintergrund, Oberfläche, Textkörper und Akzentfarben. Das Tool generiert funktionale Farben basierend auf dem ausgewählten Modus und wählt geeignete Textfarben für primäre Schaltflächen aus, während primäre Farbpaletten weiterhin Ihre Eingabe speichern. Verschiedene Vorlagen stellen denselben Satz funktionaler Farben dar, um einen einfachen Vergleich realer Effekte auf SaaS-, Produktpräsentations- und B2B-Seiten zu ermöglichen.
Farbberechnungen werden standardmäßig lokal in Ihrem Browser durchgeführt, ohne dass Farben an diese Site übermittelt oder Schemata im lokalen Speicher gespeichert werden. Sie können CSS oder JSON herunterladen, bevor Sie die Seite schließen. Kopierte Paletten-Links enthalten Farben und UI-Einstellungen zum erneuten Öffnen oder Teilen mit Kollegen; Bitte geben Sie in Links keine persönlichen oder Kundeninformationen an. Die Seite enthält Site-Anzeigen, die ihre eigenen Netzwerkdienste nutzen.
Der CSS-Export umfasst Farbpaletten, eine 11-stufige Primärfarbskala und semantische Variablen für aktuelle Hell-/Dunkelmodi als Ausgangspunkt für Webstile. JSON eignet sich ideal zum Speichern von Farbschemata und Einstellungen zur Überprüfung durch Designer oder Entwickler. Das Kopieren von Stilen garantiert nicht automatisch die Einhaltung der Barrierefreiheit; Bitte überprüfen Sie den tatsächlichen Inhalt und den Zustand der Komponenten.
Berechnungs- und Farbreferenzen:WCAG 2.2 Textkontrasthinweise、Details zum Nicht-Text-Kontrastund CSS Color 4 OKLab / OKLCH. Dieses Tool ordnet sich durch Reduzierung der Chroma dem sRGB-Farbraum zu und erhebt nicht den Anspruch, alle Farbzuordnungsalgorithmen des Browsers zu reproduzieren.
Eine Website-Palette erweitert eine Primärfarbe in Hintergrund-, Text-, Akzent- und Statusrollen, um Hierarchien und lesbare Komponenten zu erstellen.
Design- und Produktteams wählen Farben für eine Marke, Website oder Landingpage aus.
Geben Sie eine Primärfarbe ein, vergleichen Sie Paletten und Schnittstellenvorschauen, überprüfen Sie den Textkontrast und kopieren Sie dann Farben oder Designvariablen.
Überprüfen Sie echte Hell-/Dunkel-Vorschauen, einschließlich Schaltflächen, Textkörper und Statusfarben. Um die Markenfarbe beizubehalten, sind möglicherweise unterschiedliche Text- und Rahmenfarben auf verschiedenen Oberflächen erforderlich.
Paletten, Skalen, Kontrast und Vorschauen werden in Ihrem Browser generiert. Das Kopieren, Exportieren und Teilen eines Palettenlinks sind bewusste Aktionen.
