Wie erzeugt man eine Palette, die der im Materialdesign von Google ähnelt?

62

Die Materialdesignspezifikationen von Google enthalten eine Reihe von Farbpaletten :

Bildbeschreibung hier eingeben

Ausgehend von einer Grundprimärfarbe, die sie als "500" bezeichnen, haben sie dann eine Reihe von inkrementellen Farbstufen, die heller und dunkler sind, um einen Bereich von etwa 10 Farben zu erstellen. Das hellste ist mit "50" bezeichnet und ist in der Nähe von Weiß, und das dunkelste mit "900" ist in der Nähe von Schwarz, aber beide behalten einen Teil der Grundfarbe bei.

Ich kann nicht genau bestimmen, wie die Inkremente berechnet werden. Ich habe diesen Online-Farbfeldgenerator ausprobiert , kann mich aber nicht in den Bereich einwählen.

Ich denke, es ist nur eine Frage der Helligkeitsanpassung von der Basisfarbe "500" nach oben und unten, und ich vermute, dass ein Wert von "0" reinweiß und "1000" reinschwarz wäre, aber die Bereiche in Googles Paletten scheinen mehr Sättigung zu haben als ein einfacher Helligkeitsbereich.

Weiß jemand, welchen Algorithmus oder Prozess ich verwenden kann, um eine Grundfarbe zu verwenden und eine Palette zu generieren, die mit den Google-Paletten übereinstimmt?

Fragesteller
quelle
Sie scheinen die Grundfarbe zu sein, wobei die Sättigung und der Wert umgekehrt erhöht oder verringert werden, wenn die Zahl steigt oder fällt
Supuhstar
1
Eigentlich einen Schritt vom Bildschirm zurück, scheint es einen ähnlichen Algorithmus wie Phong Shading zu verwenden ... Ich werde dies berücksichtigen müssen
Supuhstar
Haben Sie eine Lösung gefunden, um die Palette zu generieren?
MrBrightside
@ MrBrightside Grüß dich! Sie können mit der ausgewählten Antwort eine Palette erstellen , hier: mcg.mbitson.com - Beachten Sie, dass die Farben nicht exakt mit den Materialdesign-Paletten übereinstimmen. Sie können jedoch die genauen Paletten importieren oder enge Darstellungen mit benutzerdefinierten Farben erstellen . Mehr darüber, warum sie nicht die genauen Farben hier sind: stackoverflow.com/questions/32942503/…
Mikel Bitson
1
Das Material ist NUR einfarbig für den Bereich 50-500, siehe codepen.io/sebilasse/pen/GQYKJd?editors=1010 für dunklere Farben und Akzente…
sebilasse

Antworten:

41

Ich habe dieses kleine CSS3 / AngularJS-Tool für ein Projekt zum Generieren von Materialfarben-Paletten erstellt. Sie können Ihre 500-Sechseck-Farbe eingeben und ein externes Tool wie ColorZilla verwenden, um die Farbwerte von dort zu erhalten. Auch die helleren sind genau die, die von Google verwendet werden, aber die dunkleren sind ein bisschen anders.

mcg.mbitson.com

Dave
quelle
Ihr Palettengenerator funktioniert sehr gut und entspricht meines Erachtens in etwa den Google Material Design-Standards. Eine Sache: Sie möchten möglicherweise mehr Kontrast für den Text auf der Seite erstellen. Der schwarze Text auf dem dunkelgrauen Hintergrund ist sehr schwer zu lesen.
Fragesteller
2
Hallo Leute! Ich bin der Entwickler der aktualisierten Version des Tools. Ich habe kürzlich die Art und Weise geändert, wie ich mit der Farbgenerierung umgehe. Wenn jemand ein direktes Feedback zu diesem Tool hat - es ist die Farbgenerierungstechnik oder zusätzliche Funktionen, die er möchte, lassen Sie es mich bitte wissen! Ich entwickle immer noch Verbesserungen in meiner Freizeit und befürchte, dass die Farbgenerierung ausgeschaltet sein könnte, obwohl sie immer noch sehr hilfreich ist. Ich werde es weiter untersuchen.
Mikel Bitson
1
@MikelBitson Der Palettengenerator ist in der Tat ausgeschaltet (geben Sie einfach 500 Farben aus dem Materialdesign-Standard ein und vergleichen Sie sie, um zu sehen), aber er funktioniert fantastisch mit vielen anderen Grundfarben. Mach weiter so!
Chris Bornhoft
1
@ MikelBitson Fantastische Erklärung danke. Ich dachte, es wäre so etwas, noch bevor ich meinen ursprünglichen Kommentar gepostet habe. Ich frage mich, wie viel Googles "Official Color Picker" verdient. Was für ein Titel :)
Chris Bornhoft
1
Aktualisierter Link für diejenigen unter Ihnen, die nach der neuen Version suchen: mcg.mbitson.com/#
Mikel Bitson
18

Die Google-Paletten sind einfarbig . Dadurch wird das gleiche RGB-Verhältnis beibehalten, wodurch die Helligkeit und die Sättigung nach oben oder unten verschoben werden. Dazu müssen Sie den RGB-Wert in die HSL-Darstellung (Farbton, Sättigung, Helligkeit) konvertieren, die Helligkeit und Sättigung ändern und gegebenenfalls zurückkonvertieren. Es ist möglich, es während der Berechnung im RGB-Raum zu belassen, aber die Mathematik ist zu verwirrend (für mich zu verstehen oder zu erklären). HSL wurde für die traditionelle Farbmischung entwickelt (es ist für uns einfacher, darüber nachzudenken).

Wenn Sie CSS-Paletten erstellen möchten, können Sie die Farbe in HSL beibehalten background-color: hsl(0,100%, 50%);.

Sie können dies manuell in Photoshop mit dem Farbwähler tun. Der HSB steht für Hue Saturation Brightness (Gleichbedeutend mit HSL). Wählen Sie einen Farbton und ändern Sie die Sättigung und Helligkeit durch einen konsistenten Wert. Verschieben Sie im Bild unter S = 54 und B = 77 mit 54 + 54 * 0.05und um 5% nach oben 77 + 77 * 0.05. Oder runterschaltenS - S * 0.05

Photoshop-Farbwähler

Randnotiz zur Verdeutlichung zwischen Hex & RGB. Die 6-stellige HEX # FFEB3B besteht eigentlich aus 3 separaten Zahlen, die RGB darstellen.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3BWenn Sie die HEX-Werte in Dezimalwerte konvertieren, erhalten Sie red:255 green:235 blue:59 OR rgb(255,235,59).

Es gibt Algorithmen, mit denen Sie RGB in HSL konvertieren können, wenn Sie diese wirklich in Wikipedia haben möchten. Am einfachsten ist es jedoch, eine Farbbibliothek zu verwenden. In diesem Beispiel wird eine monochromatische Palette mit please.js erstellt. Es stehen auch andere Algorithmen zum Erstellen komplementärer oder ansprechender Paletten zur Verfügung. Ähnlich wie kuler.adobe, das auch rockt.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]
Lex
quelle
4
Googles eigene Paletten weisen keinen gleichmäßigen Helligkeitsgradienten über HSV / HSB auf. Ich habe eine Illustration erstellt, damit Sie sehen können, wovon ich spreche. Auf dieser Basis ist es wahrscheinlich besser, mit einem der anderen Farbmodelle zu spielen. Darüber hinaus scheinen sie ihren Farbton für die dunkleren Schattierungen einiger Farben ein wenig verändert zu haben , um zu verhindern, dass sie matschig werden.
Tess
Ich möchte hier noch ein bisschen hinzufügen, dass Sekunden @ Tess Antwort. Ich habe die verbesserte Version des MCG-Generators entwickelt und dabei ein paar Dinge bemerkt. Jede Google-Palette folgt einem anderen Farbverlauf, sie ist nicht einfarbig. Es gibt keine Formel oder Methode, um die Farben genau zu imitieren, da die Formel für jede Palette völlig unterschiedlich ist. Weitere Details und ein Beispiel dafür finden Sie hier: github.com/mbitson/mcg/issues/19
Mikel Bitson
@MikelBitson Aber in der Antwort auf die Frage ‚was Algorithmus oder Prozess , den ich verwenden kann‘ ich für monochromatische oder eine Version davon stimmen en.wikipedia.org/wiki/Monochromatic_color Aber Sie und Tess sind Recht , seine nicht streng mono, sie weichen von der Farbton.
Lex
1
@ Lex - Ich stimme Ihnen zu, ich würde monochromatische verwenden, um eine Palette zu schätzen. Ich habe nur Tess 'Antwort unterstützt, weil in Ihrer Antwort steht, dass "die Google-Paletten einfarbig sind." und ich habe in letzter Zeit viel Zeit damit verbracht, mit diesen Farben zu kämpfen. :)
Mikel Bitson
1
HSB / HSV ist nicht dasselbe wie HSL de.wikipedia.org/wiki/HSL_and_HSV
Kevin Thibedeau
1

Haben Sie versucht, mit dem Farbrad von Adobe zu arbeiten? Ich denke, es ist etwas flexibler als das von Ihnen verwendete SlayerOffice-Tool.

https://color.adobe.com/

Wählen Sie für Ihren genauen Fall "Shades" und versuchen Sie, von dort aus herumzuspielen. Es wird kein Materialdesign wie Farbfelder erzeugen, aber es ist ein Anfang.

sharedphysics
quelle
0

Sie könnten einfach die Paletten herunterladen, auf die Google auf der Website einen Link gibt? Da gibt es dir alle Farben?

Google Color Swatches Zip

McIvor
quelle
12
Ich denke, OP wollte wissen, wie man mit seiner eigenen Farbe beginnt und ein ähnliches Farbfeld erzeugt
Supuhstar
0

Um einen Farbverlauf / eine Farbpalette aus einer bestimmten Farbe zu generieren, können Sie im Wesentlichen den folgenden Algorithmus verwenden.

  1. Legen Sie den gewünschten minimalen und maximalen Farbton für Ihre Palette fest
  2. Teile den 'Farbraum' zwischen diesen Farben in gleiche Teile auf (siehe unten)
  3. Farben in diesen Schritten ausgeben

Um den Farbraum aufzuteilen, können Sie zuerst die Farbe Ihres HEX in RGB konvertieren. Wählen Sie Werte in jedem Kanal. Angenommen , Sie haben color1 (r1, g1, b1) und color2 (r2, g2, b2). Und Sie möchten 3 Farben zwischen color1 und color2 , dann können Sie so etwas wie Folgendes tun

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

Denken Sie daran, RGB-Werte zwischen (0 bis 1) zu konvertieren.

In Ihrem Fall können Sie die Grundfarbe verwenden und den Farbraum zwischen white to basecolorund aufteilen basecolor to black. Sie können Ihre Schritte an Ihre Bedürfnisse anpassen.

Schließlich mache ich eine schamlose Promotion der von mir erstellten Python-Bibliothek, nur weil sie für diese Frage in Bezug auf die Farbpalettengenerierung relevant ist. Es heißt SecretColors . Sie können eigene Farbpaletten, Verläufe oder Standardfarbpaletten wie IBM, Material Design, ColorBrewer oder Clarity erstellen.

Dexter
quelle