Helle und dunkle Varianten erzeugen

Designer nutzen das Werkzeug, um aus einer Grundfarbe abgestimmte helle und dunkle Töne für ein neues Oberflächenkonzept abzuleiten.

Helle und dunkle Varianten können Sie direkt erzeugen. Alles läuft in Ihrem Browser, ohne Eingaben hochzuladen oder zu speichern.

Bedienung

Gib im Eingabefeld eine Basisfarbe im Hexadezimalformat ein.
Führe den Generator aus, um hellere und dunklere Varianten zu erzeugen.
Prüfe die Vorschläge und wähle Töne, die zu deiner Oberfläche passen.
Probiere eine andere Basisfarbe aus, wenn die vorgeschlagene Palette nicht zu deinem Ziel passt.
Kopiere die ausgewählten Werte in dein Designsystem oder Stylesheet.

Beispiel

Sieh beim bereitgestellten blauen Beispiel, wie sich der Farbton in hellere und dunklere Töne ausdehnt. Das hilft, Hover-, Aktiv- oder Deaktiviert-Zustände aufzubauen, ohne mit einer leeren Seite zu beginnen.

Eingabe

#2563EB

Ergebnis

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Grenzen und Formate

Das Werkzeug schlägt Varianten aus einer Farbe vor, prüft aber nicht die Barrierefreiheit.
Generierte Töne ersetzen keine geprüfte Markenpalette.
Teste jeden Wert in der echten Oberfläche, da Anzeigebedingungen das Aussehen verändern können.
Eine helle oder dunkle Variante kann auf manchen Hintergründen versagen, selbst wenn sie in der Liste korrekt aussieht.

Wo die Verarbeitung stattfindet

Die Generierung erfolgt in deinem Browser. Die Basisfarbe wird nicht nach außen gesendet, und die Seite speichert keine Palette. Du kannst während derselben Sitzung mehrere Basisfarben ausprobieren.

Häufige Fragen

Kann ich von einer bestimmten Farbe ausgehen?

Ja, gib die Basisfarbe in hexadezimaler Form ein. Das Werkzeug verwendet sie, um eine Reihe hellerer und dunklerer Varianten zu berechnen.

Sind die Varianten barrierefrei?

Sie bieten Kontrastideen, aber das Werkzeug misst keine Konformität. Prüfe Text- und Hintergrundpaare mit einem geeigneten Kontrastprüfer.

Wie viele Farben kann ich erzeugen?

Der Prozess startet mit einer Farbe und liefert mehrere Töne. Wiederhole ihn für eine vollständige Palette mit jeder Hauptfarbe in deinem Projekt.

Kann ich die Palette nach dem Erzeugen noch verändern?

Ja, die erzeugten Varianten sind Vorschläge. Prüfen Sie die helleren und dunkleren Töne und wählen Sie diejenigen aus, die zu Ihrer Oberfläche passen. Sie können auch mit einer anderen Basisfarbe neu starten, wenn die Palette nicht Ihrem Ziel entspricht. Kopieren Sie erst danach die ausgewählten Werte in Ihr Designsystem oder Stylesheet.

Werden meine Farben auf einem Server gespeichert?

Nein, die Erzeugung erfolgt im Browser. Die Basisfarbe wird nicht nach außen gesendet, und die Seite speichert keine Palette. Sie können während derselben Sitzung mehrere Basisfarben ausprobieren. Ein Server ist nicht beteiligt. Prüfen Sie die Töne trotzdem in der echten Oberfläche, weil Anzeigebedingungen den Eindruck verändern können.