Die Materialdesignspezifikationen von Google enthalten eine Reihe von Farbpaletten :
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?
quelle
Antworten:
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
quelle
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.05
und um 5% nach oben77 + 77 * 0.05
. Oder runterschaltenS - S * 0.05
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:3B
Wenn Sie die HEX-Werte in Dezimalwerte konvertieren, erhalten Siered: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.
quelle
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.
quelle
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
quelle
Um einen Farbverlauf / eine Farbpalette aus einer bestimmten Farbe zu generieren, können Sie im Wesentlichen den folgenden Algorithmus verwenden.
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
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 basecolor
und aufteilenbasecolor 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.
quelle