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

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

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

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

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

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

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

mcg.mbitson.com

Палитры 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"]

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

https://color.adobe.com/

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

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

Google Color Swatches Zip

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

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.