Jak utworzyć niestandardową paletę z niestandardowym kolorem dla aplikacji do projektowania materiałów?

Dokładnie przeanalizowałem paletę kolorów Material Design i wyciągnąłem pewne wnioski.

W zalecanej przez Google palecie kolorów nie ma logiki programowej, jest ona absolutnie ręcznie robiona. Próbki zostały dobrane ręcznie przez projektanta, ale mają jakiś wzór. Pokrótce opowiem o tej magii.

Mamy Niestandardowy podstawowy kolor bazowy (indeks 500). Aby wygenerować niestandardową paletę, zmieszaj kolor podstawowy z białym (#FFFFFF) w stopniach koloru podstawowego: 12%, 30%, 50%, 70%, 85% (indeksy 50-400). Następnie wymieszaj kolor bazowy z jakimś "głębokim ciemnym kolorem" w kolorach bazowych zbliżonych do: 87%, 70%, 54%, 25%. W palecie kolorów materiału ten" głęboki ciemny kolor " jest wybierany ręcznie przez projektanta, ale obliczam ten kolor, mnożąc kolor bazowy dla siebie, o ile wynik ma akceptowalną różnicę kontrastu.

Dla kolorów podstawowych accent (index A200) należy użyć koloru w harmonii kolorów triad do koloru podstawowego (index 500). Inne kolory akcentu mają wysokie nasycenie (0,75

Zaimplementowałem tę logikę w darmowej aplikacji na Androida Material Palette Generator , która może tworzyć i demonstrować niestandardową paletę kolorów w rzeczywistym interfejsie aplikacji.

Istnieje strona internetowa możesz użyć do wygenerowania palety materiałów projektowych.

Aby go najpierw użyć wybierz dwa kolory:

Następnie sprawdź sugerowaną paletę:

Znalazłem, że tutaj można wygenerować paletę kolorów z całym kolorem akcentu (pominięty w oryginalnej odpowiedzi)

Paleta Kolorów

Należy sprawdzić API palety , Dostarczone przez Google. Jest on zawarty w support library . Z tego, co zrozumiałem z twojego pytania, Ta biblioteka robi dokładnie to, czego szukasz.

Jeśli używasz android studio, możesz znaleźć najbliższy kolor materiału danego koloru.

Jeśli chcesz próbkę kodu do tego, możesz użyć tego kodu:

public int[] GetMaterialColors(String color){
    int[] result = new int[14];

    result[0] = shadeColor(color, 0.9   ); //----> 50
    result[1] = shadeColor(color, 0.7   ); //----> 100
    result[2] = shadeColor(color, 0.5   ); //----> 200
    result[3] = shadeColor(color, 0.333 ); //----> 300
    result[4] = shadeColor(color, 0.166 ); //----> 400
    result[5] = shadeColor(color, 0     ); //----> 500
    result[6] = shadeColor(color, -0.125); //----> 600
    result[7] = shadeColor(color, -0.25 ); //----> 700
    result[8] = shadeColor(color, -0.375); //----> 800
    result[9] = shadeColor(color, -0.5  ); //----> 900

    result[10] = shadeColor(color, 0.7  ); //----> A100
    result[11] = shadeColor(color, 0.5  ); //----> A200
    result[12] = shadeColor(color, 0.166); //----> A400
    result[13] = shadeColor(color, -0.25); //----> A700

    return result;
}

private static int shadeColor(String color, double percent) {
    long f = Long.parseLong(color.substring(1), 16);
    double t = percent < 0 ? 0 : 255;
    double p = percent < 0 ? percent * -1 : percent;
    long R = f >> 16;
    long G = f >> 8 & 0x00FF;
    long B = f & 0x0000FF;
    int red = (int) (Math.round((t - R) * p) + R);
    int green = (int) (Math.round((t - G) * p) + G);
    int blue = (int) (Math.round((t - B) * p) + B);
    return Color.rgb(red, green, blue);
}

Kompletne narzędzie do generowania pełnej palety z wartości szesnastkowej jest tworzone przez Mikel Bitson . Wystarczy kliknąć na jego nazwę, aby link do narzędzia.

Oto narzędzie do stosowania palet kolorów do interfejsu użytkownika.

Material UI Color Tool