Как создать пользовательскую палитру с пользовательским цветом для приложения Material Design?

Ответ 1

Кажется, кто-то спросил об этом в графическом дизайне: здесь.

принятый ответ приведет вас к сайту автора, который является тем, что я ( инструмент, который генерирует вам вашу палитру, GG к нему!).

Кроме того, ответ с максимальным голосом очень хорошо объясняет, как создается палитра, ИМХО.

Оба они удовлетворили мое любопытство.

ОБНОВЛЕНИЕ 22/06/2016

Теперь есть новая опция эта ссылка.

ОБНОВЛЕНИЕ 03/08/2016

Я думаю, что этот ответ и относительное приложение заслуживают упоминания тоже.

ОБНОВЛЕНИЕ 07/04/17

Через 2 года Big G выпустил этот инструмент: https://material.io/.

Ответ 2

Я внимательно проанализировал Color Design Palette и сделал некоторые выводы.

В цветовой палитре, рекомендованной Google, нет программной логики, она абсолютно ручная. Образцы были выбраны вручную дизайнером, но у них есть образец. Я кратко расскажу об этой магии.

У нас есть пользовательский основной базовый цвет (индекс 500). Чтобы создать пользовательскую палитру, смешайте базовый цвет с белым цветом (#FFFFFF) в цвете базового цвета: 12%, 30%, 50%, 70%, 85% (индексы 50-400). Затем смешайте базовый цвет с некоторым "глубоким темным цветом" в темпах базового цвета, близких к: 87%, 70%, 54%, 25%. В Material Color Palette этот "глубокий темный цвет" выбирается дизайнером вручную, но я вычисляю этот цвет, умножая базовый цвет на себя, пока результат имеет приемлемую разницу в контрасте.

Для цветов базового цвета (индекс A200) вы должны использовать цвет в цветовой гармонии триады базовому цвету (индекс 500). Другие цвета акцентов имеют высокую насыщенность (0,75 < S <= 1) и индивидуально выбирают в вариациях Lightness.

Я реализовал эту логику в бесплатном приложении Android Material Palette Generator, который может создавать и демонстрировать пользовательскую цветовую палитру Material Design на реальном пользовательском интерфейсе приложения.

Ответ 3

Существует веб-сайт, который вы можете использовать для создания палитры материалов.

Чтобы использовать его, сначала выберите два цвета:

Затем проверьте вашу предложенную палитру:

Ответ 4

Я обнаружил, что здесь вы можете создать цветовой палитру со всем цветом акцента (пропущен в исходном ответе)

Цветовой палитр

Ответ 5

Если вы используете Android-студию, вы можете найти ближайший цвет материала вашего цвета.

Ответ 6

Вы должны проверить API палитры, предоставленный Google. Он включен в библиотеку поддержки . Из того, что я понял из вашего вопроса, эта библиотека делает именно то, что вы ищете.

Ответ 7

если вам нужен образец кода для этого, вы можете использовать этот код:

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

Ответ 8

Полный инструмент для создания полной палитры из шестнадцатеричного значения создается Mikel Bitson. Просто нажмите на его имя, чтобы перейти к инструменту.

Ответ 9

Вот инструмент, чтобы применить цветовые палитры к пользовательскому интерфейсу.

Средство отображения пользовательского интерфейса материала

Ответ 10

На самом деле есть подходящий инструмент Google для этого: https://material.io/inline-tools/color/

Он использовался как iFrame, похороненный в их документах, здесь: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

Ни один из других ответов здесь или о графическом дизайне, кажется, не упоминает об этом.