Jak wygenerować paletę podobną do palety materiałów Google?

Specyfikacje projektowe Google dotyczące materiałów zawierają zestawy palet kolorów :

Zaczynając od podstawowego koloru podstawowego, który określają jako „500”, mają następnie szereg stopniowych stopni odcienia, jaśniejszych i ciemniejszych, aby stworzyć zakres około 10 kolorów. Najjaśniejszy jest oznaczony jako „50” i jest prawie biały, a najciemniejszy, „900”, jest prawie czarny, ale oba zachowują część podstawowego koloru.

Nie mogę do końca ustalić, w jaki sposób obliczane są przyrosty. Próbowałem tego internetowego generatora próbek , ale nie mogę wybierać w tym zakresie.

Myślę, że to tylko kwestia dostosowania jasności w górę i w dół od podstawowego koloru „500”, i domyślam się, że wartość „0” byłaby czystą bielą, a „1000” byłaby czystą czernią, ale zakresy w Google paleta wydaje się mieć większe nasycenie niż prosty zakres jasności.

Czy ktoś wie, jakiego algorytmu lub procesu mogę użyć, aby przyjąć kolor podstawowy i wygenerować paletę zgodną z paletami Google?

Zrobiłem to małe narzędzie CSS3 / AngularJS dla projektu generowania palet kolorów materiałów. Możesz wpisać 500 kolorów heksadecymalnych i użyć zewnętrznego narzędzia, takiego jak ColorZilla, aby uzyskać wartości kolorów. Jaśniejsze są również te, których używał Google, ale te ciemniejsze są nieco wyłączone.

mcg.mbitson.com

Palety Google są monochromatyczne . Co utrzymuje ten sam współczynnik RGB, przesuwając jasność i nasycenie w górę lub w dół. Aby to zrobić, musisz przekonwertować wartość RGB na reprezentację HSL (Barwa, Nasycenie, Jasność), zmienić jasność i nasycenie, a następnie w razie potrzeby dokonać ponownej konwersji. Możliwe jest trzymanie go w przestrzeni RGB podczas obliczania, ale matematyka jest zbyt myląca (dla mnie do zrozumienia lub wyjaśnienia). HSL został stworzony do tradycyjnego mieszania kolorów (łatwiej nam o tym pomyśleć).

Jeśli Twoim celem jest tworzenie palet CSS, możesz zachować kolor w HSL za pomocą background-color: hsl(0,100%, 50%);.

Możesz to zrobić ręcznie w Photoshopie za pomocą próbnika kolorów. HSB jest dla jasności nasycenia odcienia (synonim HSL, to samo). Wybierz odcień, który ci się podoba i zmień nasycenie i jasność o stałą wartość. Na obrazku poniżej S = 54 i B = 77, przesuń w górę o 5% za pomocą 54 + 54 * 0.05i 77 + 77 * 0.05. Lub zmniejszyćS - S * 0.05

Uwaga dodatkowa do wyjaśnienia między Hex i RGB. 6-cyfrowy HEX # FFEB3B to tak naprawdę 3 osobne liczby, reprezentujące RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3BKonwersja wartości HEX na dziesiętne daje red:255 green:235 blue:59 OR rgb(255,235,59).

Istnieją algorytmy do konwersji RGB na HSL, jeśli naprawdę chcesz ich na Wikipedii, ale najprostszym sposobem jest użycie lib kolorów. Ten przykład tworzy monochromatyczną paletę z please.js , posiada także inne algorytmy do tworzenia palet uzupełniających lub przyjemnych. Podobnie jak kuler.adobe, który również kołysze.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

Czy próbowałeś już pracować z kołem kolorów Adobe? Myślę, że jest nieco bardziej elastyczny niż narzędzie SlayerOffice, którego używasz.

https://color.adobe.com/

W swoim dokładnym przypadku wybierz „Cienie” i spróbuj wygłupiać się stamtąd. Nie generuje materiałów, takich jak próbki, ale to początek.

Możesz po prostu pobrać palety, do których Google podaje link na stronie? Ponieważ daje ci wszystkie kolory?

Próbki kolorów Google Zip

Aby wygenerować gradient kolorów / paletę na podstawie podanego koloru, zasadniczo można użyć następującego algorytmu.

1. Wybierz minimalny i maksymalny odcień, jaki chcesz w swojej palecie
2. Podziel „przestrzeń kolorów” między tymi kolorami w równej partycji (patrz poniżej)
3. Kolory wyjściowe na tych etapach

Aby podzielić przestrzeń kolorów, najpierw możesz przekonwertować swój HEX na RGB. Wybierz wartości w każdym kanale. Powiedzmy, że masz kolor1 (r1, g1, b1) i kolor2 (r2, g2, b2). I chcesz 3 kolory między color1 i color2 , a następnie możesz zrobić coś takiego

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)) 

Pamiętaj, aby przekonwertować wartości RGB między (0 a 1).

W twoim przypadku możesz wziąć kolor podstawowy i podzielić przestrzeń kolorów pomiędzy white to basecolori basecolor to black. Możesz dostosować swoje kroki do swoich potrzeb.

Na koniec zrobię bezwstydną promocję utworzonej przeze mnie biblioteki python, tylko dlatego, że ma ona znaczenie dla tego pytania dotyczącego generowania palet kolorów. Nazywa się SecretColors . Możesz generować własne palety kolorów, gradienty lub używać standardowych palet kolorów, takich jak IBM, Material Design, ColorBrewer lub Clarity.