Як генерується палітра, схожа на таку, яка є в матеріальному дизайні Google?

У специфікаціях матеріального дизайну Google є набори кольорових палітр :

Починаючи з основного основного кольору, який вони позначають як "500", тоді вони мають діапазон покрокових кроків відтінку, яскравішого і темнішого, щоб створити діапазон близько 10 кольорів. Найсвітліший позначається "50" і знаходиться біля білого, а найтемніший - "900" - майже чорний, але обидва зберігають частину основного кольору.

Я не можу повністю визначити, як збільшується приріст. Я спробував цей онлайн-генератор swatch , але я не можу набрати в діапазоні.

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

Хтось знає, який алгоритм чи процес я можу використовувати, щоб взяти базовий колір та створити палітру відповідно до палітри Google?

Я створив цей маленький інструмент CSS3 / AngularJS для проекту по створенню палітри «Кольорові кольори». Ви можете ввести свій шістнадцятковий колір і використовувати зовнішній інструмент, наприклад 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. Шестизначний 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 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.