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

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

mcg.mbitson.com

Палитры Google монохромны . Что сохраняет то же соотношение RGB, сдвигая яркость и насыщенность вверх или вниз. Для этого вам нужно преобразовать значение RGB в представление HSL (оттенок, насыщенность, яркость), изменить яркость и насыщенность, а затем преобразовать обратно, если это необходимо. Можно оставить его в пространстве 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 Color Wheel? Я думаю, что он немного более гибкий, чем инструмент SlayerOffice, который вы используете.

https://color.adobe.com/

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

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

Образцы цветов Google ZIP

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

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

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

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.