Material Design Farbpalette

8

Google hat eine Farbpalette entworfen. Angesichts einer Farbe möchte ich dynamisch die Palette in Android erstellen.

Es gab eine ähnliche Frage in der Grafikdesign-Website und eine Open-Source-JavaScript-Lösung , die ein ähnliche Farbpalette. Die Faktoren für jede Farbe werden hier und die Funktion die Farbe zu erzeugen, ist in diese Stackoverflow beantworten .

Ich habe diese Antwort und mein Projekt verwendet, um eine Palette zu erzeugen, die der von Google ähnelt. Ich möchte jedoch einen Algorithmus, der die genauen Werte zurückgibt, die Google generiert hat (siehe den ersten Link).

Frage: Wie funktioniert Google die Palettenfarben für Materialdesign berechnen

Was ich bisher versucht habe:

Basierend auf den obigen Informationen habe ich dieses Beispiel erstellt, um zu zeigen, wie ich eine ähnliche Palette erzeugt habe. Auch hier möchte ich die genauen Werte.

%Vor%

Aufrufen des AsynTask :

%Vor%

Aus dem obigen Code erstellter Dialog:

    
Jared Rummler 05.10.2015, 06:30
quelle

1 Antwort

6

Unter der Zeile können Sie keine Palette mit einer einzelnen Farbe erstellen, die immer genau der entsprechenden Google Material Design-Palette entspricht .

Dies liegt daran, dass die Paletten alle einem anderen Farbverlauf folgen. Zum Beispiel wird die rote Palette mit der folgenden Progression erzeugt (JS-Code mit TinyColor.js, aber Sie können immer noch die HSL-Modifikationen sehen):

%Vor%

Wenn Sie jedoch dieselbe Progression auf die Indigo-Grundfarbe (500) anwenden, können Sie sehen, dass die Paletten überhaupt nicht übereinstimmen. Im folgenden Bild ist die Palette ganz links die Standard-MD-Palette und die zweite links ist die Palette, die mit dem obigen Verlauf erzeugt wurde. Diese beiden Paletten stimmen genau überein. Wenn ich die MD Indigo-Palette (dritte Palette) einlege und dann eine Palette mit dem Indigo 500-Wert und dem roten Paletten-Progressionscode erzeuge, wird die vierte Palette erstellt. Wie Sie sehen können, ist diese Progression genau für Rot, aber für andere Farben ist es weit weg:

Mehr zu diesem Thema finden Sie hier . Es ist sehr wahrscheinlich, dass die von Google ausgewählten Farben von einem Designer ausgewählt und nicht programmgesteuert generiert wurden.

EDIT: Auch der Code für diesen MCG wurde komplett überarbeitet. Die neue Logik für die Farben findet sich hier und wird verwendet tinycolor.js für die Modifikationsfunktionen.

    
Mikel Bitson 02.11.2015, 21:40
quelle

Tags und Links