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

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?

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

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

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"]

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.

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

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.