Как создать палитру, аналогичную палитре в дизайне материалов Google?

62

Спецификации дизайна материалов Google имеют наборы цветовых палитр :

введите описание изображения здесь

Начиная с основного основного цвета, который они обозначают как «500», они затем имеют диапазон постепенных шагов оттенка, ярче и темнее, чтобы создать диапазон около 10 цветов. Самый светлый обозначен как «50» и почти белый, а самый темный «900» почти черный, но оба сохраняют часть основного цвета.

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

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

Кто-нибудь знает, какой алгоритм или процесс я могу использовать, чтобы взять базовый цвет и создать палитру в соответствии с палитрами Google?

интервьюер
источник
Они кажутся базовым цветом с насыщенностью и значением, соответственно увеличиваемыми или уменьшающимися обратно по мере увеличения или уменьшения числа
Supuhstar
1
На самом деле, делая шаг назад от экрана, он, похоже, использует алгоритм, аналогичный затенению
фонга
Нашли ли вы какое-либо решение для создания палитры?
MrBrightside
@MrBrightside Привет! Вы можете создать палитру, используя выбранный ответ, здесь: mcg.mbitson.com - обратите внимание, что цвета не совсем совпадают с палитрами Material Design, хотя вы можете импортировать точные палитры или создавать близкие представления с пользовательскими цветами. Подробнее о том, почему они не являются точными цветами здесь: stackoverflow.com/questions/32942503/…
Микель Битсон
1
Материал является ТОЛЬКО монохроматическим для диапазона 50-500, см. Codepen.io/sebilasse/pen/GQYKJd?editors=1010 для более темных и акцентных цветов…
sebilasse

Ответы:

41

Я сделал этот маленький инструмент CSS3 / AngularJS для проекта, чтобы генерировать палитры цветов материала. Вы можете ввести свой 500 шестнадцатеричный цвет и использовать внешний инструмент, такой как ColorZilla, чтобы получить значения цвета оттуда. Также более светлые - именно те, что использовал Google, но более темные немного выключены.

mcg.mbitson.com

Дейв
источник
Ваш генератор палитры работает очень хорошо и, насколько я вижу, приближается к стандартам Google Material Design. Одна вещь: вы можете захотеть создать больше контраста для текста на странице. Черный текст на темно-сером фоне очень плохо читается.
Вопрос
2
Привет ребят! Я разработчик обновленной версии инструмента. Я недавно изменил способ обработки цвета. Если у кого-то есть какие-либо прямые отзывы об этом инструменте - это техника генерации цвета или какие-либо дополнительные функции, которые им нужны, пожалуйста, дайте мне знать! Я все еще разрабатываю улучшения в свободное время и боюсь, что генерация цветов может быть выключена, хотя все еще очень полезна. Я буду продолжать изучать это.
Микель Битсон
1
@MikelBitson Генератор палитр действительно выключен (просто введите любой 500 цветов из стандарта дизайна материала и сравните, чтобы увидеть), тем не менее, он отлично работает со многими другими базовыми цветами. Продолжайте в том же духе!
Крис Борнхофт
1
@MikelBitson Фантастическое объяснение, спасибо. Я подумал, что это было что-то подобное еще до того, как опубликовал свой оригинальный комментарий. Интересно, сколько зарабатывает Google "Официальный сборщик цветов"? Какой титул :)
Крис Борнхофт
1
Обновленная ссылка для тех, кто ищет новую версию: mcg.mbitson.com/#
Mikel Bitson
18

Палитры Google являются однотонными . Который сохраняет тот же коэффициент RGB, сдвигая яркость и насыщенность вверх или вниз. Для этого вам необходимо преобразовать значение RGB в представление HSL (Hue, Saturation, Lightness), изменить яркость и насыщенность, а затем преобразовать обратно, если это необходимо. Можно сохранить его в пространстве RGB при расчете, но математика слишком запутанная (для меня, чтобы понять или объяснить). HSL был создан для традиционного смешения цветов (нам проще об этом думать).

Если вашей целью является создание CSS-палитр, вы можете сохранить цвет в HSL, используя background-color: hsl(0,100%, 50%);.

Вы можете сделать это вручную в Photoshop, используя палитру цветов. HSB предназначен для яркости насыщенности оттенка (синоним HSL, тоже самое). Выберите понравившийся оттенок и измените насыщенность и яркость на постоянное значение. На изображении ниже S = 54 и B = 77, смещение вверх на 5% с помощью 54 + 54 * 0.05и 77 + 77 * 0.05. Или сдвинуться внизS - S * 0.05

фотошоп палитра цветов

Примечание для уточнения между Hex и RGB. 6-значный HEX # FFEB3B - это фактически 3 отдельных числа, представляющих RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bпреобразование значений HEX в десятичную дает вам red:255 green:235 blue:59 OR rgb(255,235,59).

Существуют алгоритмы для преобразования RGB в HSL, если вы действительно хотите их в Википедии, но самый простой способ - использовать цветную библиотеку. Этот пример создает монохроматическую палитру с please.js, в ней также есть другие алгоритмы для создания дополнительных или приятных палитр. Очень похоже на kuler.adobe, который также качается.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]
закон
источник
4
Собственные палитры Google не показывают устойчивый градиент яркости по HSV / HSB. Я создал иллюстрацию, чтобы вы могли видеть, о чем я говорю. Исходя из этого, вам, вероятно, будет лучше поиграть с одной из других цветовых моделей. Кроме того, они, кажется, немного изменили свой оттенок для более темных оттенков некоторых цветов, чтобы они не запачкались.
Тесс
Я хотел бы добавить сюда несколько секунд ответа Тесс ... Я разработал улучшенную версию генератора MCG, и в процессе я заметил несколько вещей. Каждая палитра Google имеет различную последовательность цветов, она не монохроматическая. Не существует формулы или метода, которые бы точно имитировали цвета, поскольку формула для каждой палитры в итоге оказывается совершенно другой. Более подробную информацию и пример этого можно найти здесь: github.com/mbitson/mcg/issues/19
Mikel Bitson
@MikelBitson Но в ответ на вопрос «какой алгоритм или процесс , который я могу использовать» Я бы голосовать за монохромные или версию программы en.wikipedia.org/wiki/Monochromatic_color Но вы и правы Tess его строго не моно, они отклоняются от оттенок
Lex
1
@Lex - Я согласен с тобой, я бы использовал монохроматический для оценки палитры. Я только поддержал ответ Тесс, потому что ваш ответ гласит, что «палитры Google монохромные». и я провел много времени в последнее время борясь с этими цветами. :)
Микель Битсон
1
HSB / HSV не то же самое , как HSL en.wikipedia.org/wiki/HSL_and_HSV
Кевин Thibedeau
1

Вы пробовали работать с цветным колесом Adobe? Я думаю, что он немного более гибкий, чем инструмент SlayerOffice, который вы используете.

https://color.adobe.com/

Для вашего точного случая выберите «Оттенки» и попробуйте дурачиться оттуда. Он не будет генерировать материальный дизайн, как образцы, но это только начало.

sharedphysics
источник
0

Вы могли бы просто загрузить палитры, на которые Google дает ссылку на сайте? Так как он дает вам все цвета?

Google Color Swatches Zip

McIvor
источник
12
Я думаю, что ОП хотел знать, как начать с его собственного цвета и создать аналогичный образец
Supuhstar
0

Для создания цветового градиента / палитры из данного цвета, по сути, вы можете использовать следующий алгоритм.

  1. Определите минимальный и максимальный оттенок, который вы хотите в своей палитре
  2. Разделите «цветовое пространство» между этими цветами в равном разделе (см. Ниже)
  3. Выведите цвета на этих шагах

Для разделения цветового пространства, во-первых, вы можете преобразовать цвет вашего HEX в RGB. Выберите значения в каждом канале. Допустим, у вас есть color1 (r1, g1, b1) и color2 (r2, g2, b2). И вы хотите , 3 цвета между цвет1 и цвет2 , то вы можете сделать что - то вроде следующего

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

Не забудьте преобразовать значения RGB между (от 0 до 1).

В вашем случае вы можете взять базовый цвет и разделить цветовое пространство между white to basecolorи basecolor to black. Вы можете настроить ваши шаги в соответствии с вашими потребностями.

Наконец, я собираюсь сделать бесстыдное продвижение созданной мной библиотеки python только потому, что она имеет отношение к этому вопросу относительно генерации цветовой палитры. Это называется SecretColors . Вы можете создавать собственные цветовые палитры, градиенты или использовать стандартные цветовые палитры, такие как IBM, Material Design, ColorBrewer или Clarity.

правый
источник