Материал дизайн цвета: Color — Style — Material Design

Материальный дизайн — Цвет — CSS-LIVE

Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.

Цвет в материальном дизайне пропитан духом смелых оттенков, стоящих бок о бок с приглушенным окружением, глубокими тенями и яркими светлыми участками. В качестве примеров использовались современная архитектура, дорожные знаки, маркировочная лента тротуаров и спортивные площадки. Используйте неожиданные и полные жизни цвета.

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

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.

Скачать цветовые образцы

Использование цветов в UI

Выберите палитру

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

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста. 

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

Прочие элементы, такие как иконки и разделители, тоже выигрывают, если в качестве величины цвета используют шестнадцатеричное значение черного или белого, поскольку это гарантирует, что они дадут желаемый результат на фоне любого цвета.

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

В плавающей кнопке действия используется акцентный цвет.

Переключатель, использующий акцентный цвет.

Правильно.

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

Неправильно.

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

Неправильно.

Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

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

Темы

Темы позволяют вам задать приложению единый тон. Тема определяет, насколько темными будут поверхности, задает уровень тени и подходящую непрозрачность для элементов краски. Для продвижения идеи большей гармоничности приложений предложены две темы: Светлая и Темная.

Скачать темы

Светлая тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра светлой темы

Применение в UI

Темная тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра темной темы

Применение в UI

9 Инструментов для подбора material цветовых схем

Одна из самых больших вещей, заметная невооруженным глазом, в material design — это использование ярких и смелых цветов.

Если вы решили выбрать палитру для своего проекта в стиле материального дизайна от гугл, то вам помогут эти инструменты.

1. Material Palette

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

Перейти к инструменту

2. Material UI’s Material Design Colors

Это довольно-таки простая шпаргалка, которая представляет на своей странице все цвета материального дизайна.

Перейти к инструменту

3. Random Material Generator

Если вы хотите жоверить подбор цветовой схемы для вашего проекта случайным числам, то этот инструмент для вас.

Перейти к инструменту

4. Material Design Palette Generator

Если вы заинтересованы в создании собственной палитры материального дизайна — попробуйте этот интсрумент. В первую очередь вы должны выбрать свой цвет, отличный от официальных цветов палитры material design, а инструмент, в свою очередь, предложит вам палитру на основе выбранного цвета.

Перейти к инструменту

5. Material Mixer

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

Перейти к инструменту

6. Material Colors

Этот инструмент отображает только 500 и А200 цвета materila design.

Перейти к инструменту

7. MaterialUp’s Material Design Colors

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

Перейти к инструменту

8. Tint UI’s Material Design

Данный инструмент показывает только 500 цвета

Перейти к инструменту

9. designskilz’s Material Design Colors

Этот простой инструмент поможет вам визуализировать все конструкции материальных цветов вместе с их официальными названия (например Pink, Light Blue, Cyan и др.)

Перейти к инструменту

Если веб-инструменты  не для вас, то можете попробовать цветовую палитру для Photoshop/Illustrator (.aco) Скачать палитру

Отличным дополнением к использованию цветов в стиле material design, будут отличные иконки, исполненные в таком же стиле, недавно мы показывали пример иконок

10 веб-инструментов, которые помогут вам быстро подобрать цветовые схемы Material Design

В процессе проектирования Material Design вы обнаружите большую проблему в том, как смело и гибко использовать цветовые комбинации.

Инструмент «Палитра» в Material Design описывает цвет как «вдохновленный смелым расположением цветовых пятен в сочетании с мягкой средой, глубокими тенями и яркими бликами».

На этой неделе мы обновили 10 инструментов соответствия цветов для Google Material Design специально для категории соответствия цветов в навигации по дизайну. Если вам нужна палитра дизайна материалов, эти веб-инструменты могут вам помочь.

Вот 10 веб-инструментов для цветовой схемы Material Design, помните Mark, если вам это нравится!

1、Material Palette

В этом инструменте вы можете сначала выбрать основной цвет и цвет акцента. После выбора инструмент автоматически сгенерирует мгновенный предварительный просмотр и предоставит различные методы загрузки.

2、Material UI

Это красивая «шпаргалка», которая собирает все цвета, доступные вам на одной странице, на ваш выбор. отлично!

3、Random Material Generator

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

4、Material Design Palette Generator

Если вы заинтересованы в пользовательских образцах, попробуйте инструмент, подобный материалу. Прежде всего, вам нужно вручную установить цвет — системный цвет или цвет — и затем найти свой любимый графический редактор в диалоговом окне выбора цвета той же цветовой системы. Генератор панели дизайна материала сгенерирует ваш образец на основе выбранного вами цвета.

5、Material Mixer

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

6、Material Colors

Этот инструмент отображает только цвета образцов 500 и A200. Там не обязательно много вариантов, просто хорошие!

7. Материал дизайн инструмента UPlabs

Это еще один простой инструмент визуального дизайна материалов. Он отображает три основных цвета на боковой панели. И нажмите «Цветная полоса», чтобы отобразить все соответствующие цвета. Операция также очень гибкая!

8、Tint UI’s Material Design

Подобно шестому инструменту, он отображает только 500 цветов в Material Design. Блаженны дизайнеры с избирательным синдромом!

9、Designskilz’s Material Design Colors

Девятый инструмент также очень прост, он помогает нам визуализировать все цвета в образцах вместе с их официальными названиями (например, розовый, голубой и т. Д.). Таким образом, нам не нужно думать о названии выбранного цвета.

10、MATERIAL @ COLORION

Помимо совместного использования сотен образцов, десятый инструмент также предоставляет любимую функцию: когда вы видите вашу любимую цветовую схему, пользователи также могут сохранить ее для будущего использования.

Хорошие инструменты проектирования позволяют нашей работе добиться вдвое большего результата при минимальных усилиях и быстро улучшить нашу работу. Для некоторых вспомогательных инструментов дизайна вы можете выбирать в соответствии с вашими потребностями. Позвольте нашей работе повысить эффективность при достижении лучших результатов.

Каковы цвета темной темы Material Design?

Я ищу цветовую палитру, используемую темной темой Material Design, как показано на этой странице:
http://developer.android.com/обучение/материал/тема.html

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

android

material-design

Поделиться

Источник

REJH    

28 апреля 2016 в 13:01

2 ответа

• Получите цветовую палитру material design для моего цвета

  Я пытаюсь достичь той цветовой палитры, которую material design имеет для своих различных цветов. Но мой конкретный цвет не является частью цвета material design. Как мне получить различные сорта моего конкретного цвета, например material design?

• Изменение цвета темы Material Design Lite в scss

  Я установил модуль material design lite через npm, но я хочу изменить его с другими цветами и предпочтительно с цветами, которые не включены в цветовую палитру Material Design. Я читал здесь, на GitHub, как это сделать . Но это не работает для меня,когда я пытаюсь изменить цвет, я получаю белый /…

84

Обновление: ответ ниже содержит ссылку на архив документов материала. Ознакомьтесь с текущими документами для получения самой актуальной информации.

Прокрутите до нижней части цветовых документов , чтобы увидеть темные цвета темы.

Вот информация о цвете текста из тех же документов:

См. Эту ссылку , чтобы преобразовать эти процентные значения в hex.

Поделиться

Suragch    

07 сентября 2017 в 05:11

33

Эта страница на официальном сайте material design посвящена темной теме (включая ее цвета). Вот цвета:

На изображении ниже сравниваются светлые и темные цвета темы (Светлые цвета слева, темные цвета справа):

Кредиты на изображение: официальный сайт material design

Поделиться

Mahozad    

12 июня 2019 в 20:56

Похожие вопросы:

Android Material Design

Поддерживает ли новый Android Material Design старую версию android, такую как 3.0 или 2.1? если он поддерживает, как бы это выглядело? как настоящий material design или такой же старый дизайн? Я…

Найдите темные / светлые цвета темы

Каковы цвета по умолчанию для темной или светлой темы? То, что я ищу, это следующее: Светлая тема-Производная от https://material.io/guidelines/style/color.html#color-color-system * Primary: Indigo…

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

Я начинаю экспериментировать с Angular Material (версия 0.8.3, если быть точным). Из кода директив, связанных с тематизацией, и исходного кода mdThemingProvider я обнаружил, что светлый передний…

Получите цветовую палитру material design для моего цвета

Я пытаюсь достичь той цветовой палитры, которую material design имеет для своих различных цветов. Но мой конкретный цвет не является частью цвета material design. Как мне получить различные сорта…

Изменение цвета темы Material Design Lite в scss

Я установил модуль material design lite через npm, но я хочу изменить его с другими цветами и предпочтительно с цветами, которые не включены в цветовую палитру Material Design. Я читал здесь, на…

Как установить первичные и вторичные цвета в компонентах Material Design для Web?

Подробности Я пошел искать материальные компоненты (MDC) для интернета и приземлился на использование CDN (размещенных библиотек CSS и JavaScript):…

Список стилей в Material Design цветах и темах

Я пытаюсь создать свой первый проект c#/wpf/xalm, используя Material Design цвета и темы. У меня есть какой-то учебник, где определены некоторые стили, например, для checkboxes :…

Material Design наложение темных цветов темы

Я хочу использовать Material Design dark theme guidelines ( https://material.io/design/color/dark-theme.html ) в коде HTML, но я не могу найти информацию, как наложить цвета для получения более…

Новые темы значков Material Design — настройка цвета

Я ищу портативное решение для раскрашивания некоторых иконок. Моя первоначальная проблема, описанная ниже, проявляется в Chrome и Firefox на моем MacBook, в Safari цвета работают так, как ожидалось….

Поддержка темной и светлой темы в AndroidX

В настоящее время я использую следующую родительскую тему Theme.MaterialComponents.Light.NoActionBar и только что обновил свою библиотеку material design до implementation…

Material Design: не лучший, а другой

Когда был анонсирован Material Design, меня впечатлили намерения Google начать свою собственную игру на поле дизайна. В этом смысле Apple всегда был впереди. Но теперь все иначе. Я помню все эти жалобы по поводу непостоянства в дизайнах Android, недостатка коммуникации, непривлекательной темной темы и чрезмерного злоупотребления гамбургер-меню. Material Design помог решить многие из этих проблем. Теперь он предлагает слаженный язык для дизайна, более легкий и красочный, усиленный точными, хорошо продуманными стандартами.

Несмотря на то, что красивые цвета и использование карточек дают отличное чувство глубины и тактильности, я часто раздумывал, действительно ли это лучше, чем Apple iOS Design, как считают многие дизайнеры? Я бы хотел поделиться своими мыслями на этот счет. В моем понимании он просто другой, а не лучше.

Сходства с iOS

Начнем с 3 ключевых принципов в iOS: чистота, пиетет и глубина.

Онлайн-стажировка по UI/UX дизайну

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

Присоединиться

Чистота касается разборчивости текста, понятных иконок и хорошего контраста. Чистота также может быть платформо-зависимой. Очевидность элементов для пользователей iOS или Android очень зависит от того, с чем они хорошо знакомы. Одна и та же иконка может быть легко распознаваема пользователями iOS, но совсем не понятна пользователям Android, и наоборот.

Глубина – еще один принцип, который разделяет обе платформы. Но они по-разному подходят к этому понятию. iOS пропагандирует размытие и градиенты, а Android отдает предпочтение падающим теням и бумажному концепту.

Скевоморфизм 2.0

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

Дизайн в стиле скевоморфизма отлично помогал представить новые концепты через знакомые метафоры, но чрезмерно детализированные текстуры и 3D-эффекты определенно себя изжили. Мы их переросли как пользователи, потому что технология больше не представляет для нас что-то незнакомое. Сейчас мы на той стадии, когда кожаный календарь или виниловый диск кажутся менее уместными, чем цифровой концепт.

Цифровизация дизайна делает старые концепты неактуальными и откровенно сложными.

Никто не использует больше такие календари.

В обоих языках дизайна есть свои слабые стороны.

Например, множество размытых слоев поверх друг друга выглядят отталкивающе. Также яркость выглядит слегка чересчур.

Карточный концепт смотрится совершенно иначе на круглом экране. Карточка занимает всю ширину. Выравнивание текста усложняется, потому что есть масса ненужного негативного пространства. На круглом экране также сложно использовать списки, поскольку углы скрывают основную часть контента.

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

Контент не на первом месте в Material Design

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

FAB (кнопка с астатическим действием) прячет контент и мешает взаимодействиям.

Сделан сильный акцент на цветах, навигации и призывам к действиям (это новый Material Design Lite, созданный для Веб-а)

С iOS все наоборот – фокус сделан больше на контенте. Цвет интерфейса более нейтральный и контекстный (меняется в зависимости от контента). Яркие цвета используются по минимуму, в основном, для элементов с привязанным действием.

Беглое сравнение Apple Music и Google Music показывает, что Material Design использует яркие цвета и иллюстрации гораздо больше. В Apple Music яркий цвет используется только для кнопки “Try Now”.

Вкладки против гамбургер-меню

О целесообразности использования гамбургер-меню ходит масса споров. И однозначного мнения нет. Даже Apple частично использует его в своих дизайнах.

Google Inbox использует гамбургер-меню.

Но справедливости ради стоит сказать, что гамбургер-меню гораздо чаще можно увидеть на Android, так как Material Design поощряет его использование.

iOS отдает предпочтение панели вкладок в роли навигации. Интересно, LukeW обратил внимание на то, что очевидное всегда побеждает. Facebook переключился на панель вкладок для iOS, и в результате активность пользователей значительно возросла.

Но бывают ситуации, когда гамбургер-меню – действительно удачное решение. Например, когда самый главный контент – это ваша главная страница. Опции внутри нее, такие как логин или настройки, должны быть вторичными.

Использование цветов

В Material Design цвета на видном месте. Да, они красивые, как и в палитре Flat UI. Согласитесь, что пастельные тона смотрятся очень хорошо в большинстве случаев, в отличие от ярких оттенков, стандартных для CSS или Xcode.

Цвета iOS (слева), Flat UI (посередине), палитра Material Design (справа)

Но Material Design использует эти цвета в своем хедере, иногда даже для замены контента. Когда у вас масса конкурирующих друг с другом цветов, они смещают приоритет других элементов.

Хедер кликабельный, так как он очень яркий? Может, было бы лучше использовать картинку вместо ярких цветов, чтобы выразить идею, о чем мой продукт? Почему заголовок “Goals” такого же цвета, что и ссылки?

Цвета имеют свой смысл, но этот смысл может быть несколько ограничен (например, красный традиционно обозначает опасность, желтый – предупреждение и т.д.). Цвета также отображают бренд, но брендинг не должен быть центром интерфейса вашего приложения. На самом деле, иконка приложения – то место, где брендинг более всего уместен. Перед тем, как вы захотите использовать один цвет в заголовке, нужно рассмотреть более выразительные варианты. Что-то, что точно поясняет, о чем ваше приложение. Опять же, это имеет смысл в Android, но не в iOs.
Если картинка стоит тысячи слов, то цвет стоит десяти.

Платформо-зависимость против кроссплатформенности

Стоит отметить, я привык думать, что язык дизайна един для всех платформ, и это лучший подход. Но, к сожалению, такой подход приведет к дизайну приложения под Android с помощью языка дизайна под iOS. С моей точки зрения это имело смысл, но для пользователей это не очень хорошо. Пользователи Android попросту не знакомы с iOS.

Цель Material Design унифицировать все платформы – очень смелая, лучшее из того, что мне приходилось видеть в этом направлении. Но действительно ли это лучший способ?

Действительно ли астатические кнопки хороши для веб-а? Подходит ли карточный дизайн под мелкие экраны? Работает ли карточный макет на круглых экранах?

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

Если вы посмотрите на Apple Watch, дизайн полностью переосмыслен специально под часы. Это означает, что есть новые парадигмы UI, которые рассматривались специально под Force Touch, Digital Crown, распознавание запястья и черные скосы.

Material Design более определенный

Все, начиная от того, как внедрять Material в дизайн, и до того, как комбинировать цвета, пояснено в их подробном руководстве.

Как возводить каждый элемент для создания стабильной структуры.Есть определенная палитра цветов и способ их комбинирования.

Material Design даже предоставляет полный набор системных иконок.

Сильная сторона использования строгих стандартов стиля заключается в сложности сделать что-то не так. Это как Bootstrap. Он предоставляет постоянную и удобную систему. Слабой стороной является ограничение креативности. Есть риск, что все приложения станут похожими друг на друга.

Material Design во всей красе

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

Дизайн – это постоянно меняющаяся среда, которая отражает изменения человеческой жизни. Пока наши жизни меняются, дизайн также будет меняться.

Прежде всего, новые спецификации Design дают четкое руководство по самым разнообразным темам дизайна, их польза выходит далеко за рамки использования Material Design.

Руководства по цвету и анимации в Material Design действительно впечатляют.

Карточный концепт – одно из решений, хорошо работающих везде. Он гибкий и модульный. Он отлично подходит для Веб-а – дизайнеры пользовались им задолго до появления мобильных дизайнов. Но, на мой взгляд, чем меньше экран, тем менее он пригоден.

Как я уже упоминал, пастельные цвета также сложно назвать инновацией. Но тренд Flat UI и Material Design действительно популяризировали их использование. Вернемся к истокам, чтобы достичь цветовой гармонии и красивой типографики. Это действительно отлично. Чем больше мы знаем об основах дизайна, тем лучше мы сможем творить.

Анимации в Material Design элегантные и приятный глазу, но в то же время, не настолько инновационные, как люди их представляют. Перед появлением iOS 7, переходные интерфейсы были довольно новым понятием. Я рад, что обе технологии поддерживают более плавные, более прогрессивные анимации, направленные на помощь пользователю, а не на отчаянные попытки привлечь внимание.

Осмысленные анимации в Material Design.

Идеального языка дизайна не существует

Идеального языка дизайна или шаблона не будет никогда. Я не преследую цель раскритиковать один или другой язык, я лишь хотел проанализировать их сильные и слабые стороны. Дизайн всегда подразумевает выбор лучшего инструмента для достижения конкретной цели. Так что вперед, экспериментируйте, и оценивайте, что лучше работает для вашего продукта. Не забывайте учитывать людей и устройства, для которых вы создаете дизайн.

Импорт цветовой палитры Material Design в Sketch 3

Насколько я знаю, пока не существует способа поделиться родными цветовыми палитрами Sketch 3, так что я поделюсь простым способом использования родного селектора цвета Mac OS color Material Design в Sketch 3.

Инструкции

• Откройте окно Colors Window в Sketch из меню View > Show Colors

• Выберите вкладку Color Palettes:

• Кликните на иконку с шестеренкой в верхнем правом углу, кликните Open (открыть) и затем выберите файл Material Design Color Palette.clr, который можно скачать здесь.

• Теперь все цвета Material Design на месте! Наслаждайтесь!

Вы также можете переместить файл CLR в папку вашего пользователя Library > Colors (Кликните Go в десктопном меню, удерживайте кнопку Alt и выберите Library > Colors) Палитра появится после перезапуска Sketch.

Как создать палитру и делиться ей с другими

Онлайн-стажировка по UI/UX дизайну

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

Присоединиться

Чтобы создать собственную палитру, откройте Colors Window в Sketch из меню View > Show Colors. Кликните на иконку с шестеренкой и выберите New. По умолчанию будет имя “Unnamed”, так что нажмите снова на иконку с шестеренкой и выберите опцию Rename (переименовать).

Вы можете ввести шестнадцатеричные числа во вкладке Sliders (внизу справа):

Затем вернитесь во вкладку Color Palette и кликните на иконку “+” под шестеренкой. (Вы также можете кликнуть и перетянуть свотч цвета в список):

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

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

Чтобы поделиться палитрой, откройте папку Library > Colors (Кликните Go в десктопном меню, удерживайте Alt и выберите Library > Colors). Файл .clr должен быть уже там, вы можете отправить его другим пользователям или опубликовать в интернете!

Надеюсь, кому-то мои советы помогут спать более спокойно 🙂

Перевод статьи с medium.com автора hannah lee.

Методы построения гибкой цветовой палитры для вашей дизайн-системы

Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:

color palette — «цветовая палитра»;  color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.

Mineral UI  это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

• У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА.

• Mineral предназначена для последовательного моделирования, и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.

• Впоследствии Mineral будет поддерживать тёмный (ночной) режим, и мы хотим, чтобы цвета из созданных схем цветовых переходов выглядели визуально привлекательными как в темном, так и в светлом режиме.

• Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.

mineral-ui.com

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

Одна из самых первых вещей, о которых мы подумали, создавая дизайн-систему, — это создание цветовой палитры (color palette), ведь она имеет столь важное значение в принятии решений в области дизайна и разработки. Мы постоянно учимся — и часто видим очевидные ошибки уже оглядываясь назад. Наше желание развиваться подтолкнуло нас исследовать то, как другие команды принимают решения — и только потом принимать свои собственные.

Контроль за изменениями это непростая работа, потому что цвет — очень  масштабное понятие. Мы уже знаем, что даже внесение безобидных на вид изменений в цвета может создать проблемы командам, которые уже начали делать продукты на основе Mineral. Поэтому недавняя цветовая ревизия показывает нашу цель — отказаться от критических изменений.

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.

Анализируя цветовые схемы во время ревизии, мы определили, что наша цветовая палитра должна содержать следующие характеристики:

• Темы: они обеспечивают последовательные ощущения и внешний вид во всех продуктах, избавляя от необходимости работать наугад.

• Тематическая гармония: в каждой цветовой теме должно быть одно значение тона.

• Четкие контрольные точки цвета (hue breakpoints): у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.

• Маштабирование и дополняемость: цветовая палитра должна иметь систематический паттерн, которую можно расширять по мере роста потребностей дизайн-системы.

• Никаких фундаментальных перемен: развиваясь, мы хотели, чтобы наша цветовая система работала в любой ситуации, поэтому мы отказались от каких-либо критических изменений в дизайнах, которые на данный момент используются в Mineral.

• Доступность: наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.

Исследование

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов —  исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

• Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

• Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?

• Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?

RGB, HSB, HSL, или HEX?

Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения  и настройки цвета. Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).

HSB — хороший инструмент для изучения цвета, но чтобы избежать проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для проектирования, дисплеями и т. д.), окончательное определение цвета наиболее точно записывается как значения в RGB или HEX. Еще одно важное замечание: HSL и HSB — это две разные модели, имеющие разные принципы, и их не следует путать. Примеры в этой статье приведены в HSB.

В качестве примера я взял схему цветовых переходов из каждой дизайн-системы и сопоставил каждый образец со шкалами насыщенности и яркости. Также я отслеживал тональные сдвиги в рамках схемы переходов.

IBM Design

Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.

https://www.ibm.com/design/language/resources/color-library

Material Design

Значения в Material Design быстро изменяют свое направление на графике, когда  значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.

https://material.io/guidelines/style/color.html#color-color-palette

Open Color

Палитры Open Color построены на отточенных кривых. Посмотрите на расположение цвета на сетке HSB: кажется, что эту кривую намеренно строили такой аккуратной. Корректный выбор цветов отражает современные тренды веб-дизайна. Коэффициент контрастности несколько ниже, поэтому эти палитры не совсем помогут нам сделать продукты компании доступными по умолчанию.

https://yeun.github.io/open-color/

Анализ

• С IBM можно использовать цвет и не волноваться о доступности, потому что каждую схему цветовых переходов можно последовательно применить к разнообразным продуктам. Они провели хорошую работу над последовательным различением пропорций цветового контраста для каждого значения (подробнее об этом позже).

• В Open Color прослеживается наиболее определяемый паттерн, палитра была разработана так, чтобы её масштаб легко менялся при добавлении других цветов.

• Интересно, что в большинстве цветовых палитр тональный сдвиг используется для определения значений цвета на схеме цветовых переходов — особенно у IBM.

Дизайн цветовой палитры

Система тем в Mineral содержит серую схему (она используется во многих темах) и ещё несколько тематических схем. Когда мы говорим о «цветовой палитре», мы имеем в виду тематические схемы.

Первое, что я сделал — создал набор правил, основанных на требованиях проекта. Эти правила можно расширять, поэтому есть четкое руководство по увеличению цветовых палитр с большим количеством опций в будущем.

Как определить смену в теме за три простых шага

1. Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

Метод для создания первой версии палитры

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

Мы начали с выбора базового цвета. Это решение может быть весьма произвольным, хотя мы целенаправленно искали цвета высокой насыщенности с коэффициентом контрастности 4,5:1 или выше. Здесь мы еще думали, что у нас не будет темной темы, и что цвет текста будет меняться через код с черного на белый и обратно в зависимости от контрастности.

В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.

После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.

Примечание: сравните цвета первой версии с цветами второй.

Первое заметное отличие — это отсутствие некоторых цветов. Так и есть: лимонный, желтый и оранжевый исчезли, и появился бронзовый цвет. Вот почему:

• Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).

• С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.

• Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».

Возвращаясь к методу первой версии:

Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).

Наконец, мы перечисляем значения каждого цвета. Разрывы между средними значениями намного шире, чем между остальными, поскольку яркость должна распределяться вдоль кривой более равномерно.

Вот несколько примеров из палитры первой версии:

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

Цветовая палитра первой версии первоначально удовлетворяла большинство наших требований — по крайней мере так мы думали. Когда мы начали использовать цветовую палитру в реальных проектных работах, возникло несколько проблем:

1. Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
2. Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.

На изображении выше, помимо базовых цветов, значения большинства цветов не совпадают со значениями оттенков серого между темами. Поэтому сложно сменять темы, сохраняя точность и единообразную контрастность.

Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.

После того, как мы обнаружили эти трудности, у нас появилось основание для новой гипотезы: можем ли мы создать систему, которая поддерживает равномерные контрастные переходы между соседствующими (от тема-10 до темы-20 и т. д.) цветами на каждой схеме переходов?

Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:

У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)

Интересненько…

Чтобы изучить значения серого, я воспользовался приложением Sketch, в котором можно манипулировать цветами, и Фотошопом с его проверенными значениями преобразования в HSB. 

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

• Каковы преимущества наличия последовательных значений серого?

• Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?

На первый вопрос трудно ответить, пока не попробуешь реальные UI сценарии. На второй вопрос ответить немного легче.

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.

Для второй версии палитры мы дополнили предыдущую версию несколькими дополнительными шагами и новой цветовой кривой, благодаря которой тёмная тема стала возможной:

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

После тестирования некоторых ключевых цветов нашей системы мы поняли, что этот подход хорош для начала, но все же не идеален.

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных  увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.

Подход, который мы использовали, похож на первую версию палитры , с одной большой разницей: мы использовали овальную кривую для уменьшения насыщенности более темных значений, чтобы они выглядели естественно в тёмном интерфейсе.

При создании каждой кривой мы тестировали некоторые существующие компоненты интерфейса как для светлой, так и для темной тематической среды. Это помогло нам быстро определить, помогали кривые создавать последовательный внешний вид в разных тематических схемах переходов или нет.

В большинстве цветовых тем используются круговые схемы, но для красного, мадженты и бронзового используются овальные, потому что из-за значения яркости цветности, круговые узоры закрепляют насыщенность на 100%, что выглядит ужасно в тёмном интерфейсе.

Мой монитор довольно-таки большой и широкий 😉

Чтобы создать такой «идеальный паттерн», необходима непрерывная проверка согласованности в градациях серого в процессе создания. Мы решили скопировать и вставить значение каждого цвета в Photoshop, чтобы убедиться, что они точно соответствуют значениям оттенков серого, установленным ранее.

Мы упростили себе работу, записав каждое значение цвета в одном месте — так делать особенно удобно, когда есть вероятность, что другим людям нужно будет ссылаться на вашу работу. На этом этапе мы также решили, что было бы неплохо записать точное значение RGB или HEX для разработки. Мы решили использовать HEX.

Повторите этот процесс для каждого цвета темы — и получите удобную и гибкую систему тем, как показано ниже.

Конвертируем в оттенки серого

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

Заключение

• Это только начало работы со сложностями цвета, доступностью и последовательностью в интерфейсе Mineral. Сейчас мы потратили время на создание масштабируемой системы цветов — и считаем, что в будущем будет проще решать неизвестные проблемы по мере их поступления. Оглядываясь назад, можно сказать, что абсолютно точно стоило тратить на это время именно на ранней стадии процесса.

• Процесс, описанный в этой статье от начала до конца, занял около шести месяцев. За это время команды начали использовать Mineral и оспаривали некоторые из наших ранних додумок относительно урегулирования доступности и темных тем. Мы открываем для себя то, что дизайн-системы формируются как под действием культуры, так и под действием самих продуктов.

• В этой статье мы ничего не сказали о валидации (подтверждении работоспособности) дизайна. Но мы провели много времени за обсуждением применимости тем и за их тестированием на мокапах реально существующих продуктов.

Особая благодарность:

Быстрые и простые решения для цвета

Если перед вами не стоит большая проблема, связанная с подбором цвета, можно попробовать использовать один из множества генераторов цветовых палитр. Вот несколько полезных ссылок:

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

Больше статей о цвете:

Color — MUI

Передайте смысл через цвет. По умолчанию вы получаете доступ ко всем цветам в руководстве по материальному дизайну.

Цветовую систему Material Design можно использовать для создания цветовой темы, отражающей ваш бренд или стиль.

Выбор цветов

Официальный инструмент цвета

Команда Material Design также создала замечательный инструмент настройки палитры: material.io/resources/color/.
Это может помочь вам создать цветовую палитру для вашего пользовательского интерфейса, а также измерить уровень доступности любой цветовой комбинации.

Вывод может быть передан в функцию createTheme () :

  импортировать {createTheme} из '@ mui / material / styles';

const theme = createTheme ({
  palette: {
    начальный: {
      свет: '# 757ce8',
      основная: '# 3f50b5',
      темно: '# 002884',
      ContraText: '#fff',
    },
    вторичный: {
      свет: '# ff7961',
      основная: '# f44336',
      темно: '# ba000d',
      ContraText: '# 000',
    },
  },
});
  

Детская площадка

Для тестирования материала.io / дизайн / цветовая схема с документацией MUI, просто выберите цвета с помощью палитры и ползунков ниже.
Кроме того, вы можете ввести шестнадцатеричные значения в основные и дополнительные текстовые поля.

 {
  palette: {
    основной: синий,
    вторичный: розовый,
  },
} 

Установить цвета документов Сбросить цвета документов

Результат, показанный в образце цвета, можно вставить непосредственно в функцию createTheme () (для использования с ThemeProvider ):

  импортировать {createTheme} из '@ mui / material / styles';
импортировать {фиолетовый} из '@ mui / material / colors';

const theme = createTheme ({
  palette: {
    начальный: {
      основной: фиолетовый [500],
    },
    вторичный: {
      основная: '# f44336',
    },
  },
});
  

Необходимо предоставить только основных оттенков (если вы не хотите дополнительно настроить светлый , темный или ContrastText ), так как другие цвета будут рассчитаны с помощью createTheme () , как описано в настройке темы раздел.

Если вы используете основные и / или второстепенные оттенки по умолчанию, то, предоставляя цветной объект, createTheme () будет использовать соответствующие оттенки из цвета материала для основного, светлого и темного.

• create-mui-theme: это онлайн-инструмент для создания тем MUI с помощью Material Design Color Tool.
• mui-theme-creator: инструмент, помогающий разрабатывать и настраивать темы для библиотеки компонентов MUI. Включает в себя базовые шаблоны сайтов, чтобы показать различные компоненты и то, как на них влияет тема
• Генератор палитры материалов: Генератор палитры материалов можно использовать для создания палитры для любого цвета, который вы вводите.

2014 Цветовые палитры Material Design

Эти цветовые палитры, изначально созданные Material Design в 2014 году, состоят из цветов, которые гармонично сочетаются друг с другом, и могут использоваться для разработки палитры вашего бренда. Чтобы создать свои собственные гармоничные палитры, используйте инструмент создания палитры.

Важные термины

• Палитра : Палитра — это совокупность цветов, то есть оттенков и их оттенков. MUI предоставляет все цвета из руководств по материальному дизайну.Эта цветовая палитра была разработана с использованием цветов, которые гармонично сочетаются друг с другом.
• Оттенок и оттенок : один цвет в палитре состоит из оттенка, например «красный», и оттенка, например «500».
  «красный 50» — самый светлый оттенок красного ( розовый! ), а «красный 900» — самый темный.
  Кроме того, большинство оттенков имеют «акцентные» оттенки с префиксом A .

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

Дана HUE (красный, розовый и т. Д.) И SHADE (500, 600 и т. Д.).) вы можете импортировать цвет следующим образом:

  импорт {красный} из '@ mui / material / colors';

const color = красный [500];
  

• красный

  500 # f44336

• 50 # ffebee

• 100 # ffcdd2

• 200 # ef9a9a

• 300 # e57373

# e57373

# f44336

• 600 # e53935

• 700 # d32f2f

• 800 # c62828

• 900 # b71c1c

• A100 # ff8a80

  00

• A100 # ff8a80

  00

• # ff8a80

  00

• # ff8a80

200

• # ff8a80

200

• ff1744

• A700 # d50000

• розовый

  500 # e91e63

• 50 # fce4ec

• 100 # f8bbd0

• 100 # f8bbd0

• 300 # f8bbd0

• 200

• 400 # ec407a

• 500 # e91e63

• 600 # d81b60

• 700 # c2185b

• 800 # ad1457

• 900 # 880e4f

• A100 # ff80ab

• A200 # ff4081

• A400 # f50057

• A700 # c51162

• A700 # c51162

  4 955000

  955

  A700 2

• 50 # f3e5f5

• 100 # e1bee7

• 200 # ce93d8

• 300 # ba68c8

• 400 # ab47bc

• 400 #

• 4e

• 700 # 7b1fa2

• 800 # 6a1b9a

• 900 # 4a148c

• A100 # ea80fc

• A200 # e040fb

• 2 A200 # e040fb

• 3 a500009

000

6

6

• глубокий фиолетовый

  500 # 673ab7

• 50 # ede7f6

• 100 # d1c4e9

• 200 # b39ddb

• 300 # 9575cd

• 400 # 7e57c2

• 500 # 673ab7

• 600 # 5e35b1

• 700 # 512da8

#

• 700 # 512da8

#

• 700 # 311b92

• A100 # b388ff #

• A200 # 7c4dff

• A400 # 651fff

• A700 # 6200ea

• indigo

  f9005

• indigo

  f0005

• 100 # c5cae9

• 200 # 9fa8da

• 300 # 7986cb

• 400 # 5c6bc0

• 500 # 3f51b5

• 500 # 3f51b5

• 600 # 3

• 600000

• 800 # 283593

• 900 # 1a237e

• A100 # 8c9eff

• A200 # 536dfe

• A40 0 # 3d5afe

• A700 # 304ffe

• синий

  500 # 2196f3

• 50 # e3f2fd

• 100 # bbdefb

• 2003

64b5f6

• 400 # 42a5f5

• 500 # 2196f3

• 600 # 1e88e5

• 700 # 1976d2

• 800 # 1565c0

• 2

  800 # 1565c0

• 2

  800 # 1565c0

• 2

  6

• A200 # 448aff

• A400 # 2979ff

• A700 # 2962ff

• lightBlue

  500 # 03a9f4

• f 1000003 50 # e1

• 200 # 81d4fa

• 300 # 4fc3f7

• 400 # 29b6f6

• 500 # 03a9f4

• 600 # 039be5

• 700 # 0288d1

• 800 # 0277bd

• 900 # 01579b

• A100 # 80d8ff

• A200 # 40c4ff

• A200 # 40c4ff

0091

A200 # 40c4ff

0091

• голубой

  500 # 00bcd4

• 50 # e0f7fa

• 100 # b2ebf2

• 200 # 80deea

• 200 # 80deea

• 200 # 80deea

• 300 # 4

• 500 # 00bcd4

• 600 # 00acc1

• 700 # 0097a7

• 800 # 00838f

• 900 # 006064

• A100 # 84ff55

ff

A400 # 00e5ff

• A700 # 00b8d4

• бирюзовый

  500 # 009688

• 50 # e0f2 f1

• 100 # b2dfdb

• 200 # 80cbc4

• 300 # 4db6ac

• 400 # 26a69a

• 500 # 009688

• 500 # 009688

00558

6

5

• 800 # 00695c

• 900 # 004d40

• A100 # a7ffeb

• A200 # 64ffda

• A400 # 1de9b6

• 0055

  0

  0

• A7002 A700 зеленый

  500 # 4caf50

• 50 # e8f5e9

• 100 # c8e6c9

• 200 # a5d6a7

• 300 # 81c784

• 300 # 81c784

• 300 # 81c784

• 400 # 66bb

• 9000a2 400 # 66bb

  600 # 43a047

• 700 # 388e3c

• 800 # 2e7d32

• 900 # 1b5e20

• A100 # b9f6ca 900 03

• A200 # 69f0ae

• A400 # 00e676

• A700 # 00c853

• светозеленый

  500 # 8bc34a

• 56 #

• 509 fced

• 200 # c5e1a5

• 300 # aed581

• 400 # 9ccc65

• 500 # 8bc34a

• 600 # 7cb342

• 7003 # 689f38

  700 # 689f38

  02

  03

  900 # 33691e

• A100 # ccff90

• A200 # b2ff59

• A400 # 76ff03

• A700 # 64dd17

• A700 # 64dd17

• 5000003

• лайм

  # f9fbe7

• 100 # f0f4c3

• 200 # e6ee9c

• 300 # dce775

• 400 # d4e157 90 003

• 500 # cddc39

• 600 # c0ca33

• 700 # afb42b

• 800 # 9e9d24

• 900 # 827717

• 9000ff2

  900 # f4000e

• A400 # c6ff00

• A700 # aeea00

• желтый

  500 # ffeb3b

• 50 # fffde7

• 100000ffd2

• fff9

• 100 # fff9

  300 # fff176

• 400 # ffee58

• 500 # ffeb3b

• 600 # fdd835

• 700 # fbc02d

• 800 # f9a825 9005

  800 # f9a825

A100 # ffff8d

• A200 # ffff00

• A400 # ffea00

• A700 # ffd600

• a mber

  500 # ffc107

• 50 # fff8e1

• 100 # ffecb3

• 200 # ffe082

• 300 # ffd54f

• f

  82 400 # ffd54f

• 82 400 # ffd54f

• 82 400

• 600 # ffb300

• 700 # ffa000

• 800 # ff8f00

• 900 # ff6f00

• A100 # ffe57f

• A2003 # ffd00700

  A20030002 900

0 A4

• A700 # ffab00

• оранжевый

  500 # ff9800

• 50 # fff3e0

• 100 # ffe0b2

• 200 # ffcc80

• 200 # ffcc80

  400 # ffa726

• 500 # ff9800

• 600 # fb8c00

• 700 # f57c00

• 800 # ef6c00

  90 056

• 900 # e65100

• A100 # ffd180

• A200 # ffab40

• A400 # ff9100

• A700 # ff6d00

• 0

  50 # fbe9e7

• 100 # ffccbc

• 200 # ffab91

• 300 # ff8a65

• 400 # ff7043

• 500 # ff5722

  03

700 # e64a19

• 800 # d84315

• 900 # bf360c

• A100 # ff9e80

• A200 # ff6e40

• A400 # ff3d00

• A400 # ff3d00

  коричневый

  500 # 795548

• 50 # efebe9

• 100 # d7ccc8

• 200 # bcaaa4

• 300 # a1887f

• 400 # 8d6e63

• 500 # 795548

• 600 # 6d4c41

• 700 # 5d4037

• 800 # 4e342e

  800 # 4e342e

• A100 # d7ccc8

• A200 # bcaaa4

• A400 # 8d6e63

• A700 # 5d4037

• серый

  50055 # 9e9e9e9e9 100 # f5f5f5

• 200 # eeeeee

• 300 # e0e0e0

• 400 # bdbdbd

• 500 # 9e9e9e

• 600 # 7575375

  6

  6 # 424242

• 900 # 212121

• A100 # f5f5f5

• A200 # eeeeee

• A400 # bdbdbd

  9005 6

• A700 # 616161

• blueGrey

  500 # 607d8b

• 50 # eceff1

• 100 # cfd8dc

• 52 200 # b0559000

• 52 200 # b0556

  400 # 78909c

• 500 # 607d8b

• 600 # 546e7a

• 700 # 455a64

• 800 # 37474f

• 900 # 263238

# 263255

A200 # b0bec5

• A400 # 78909c

• A700 # 455a64

Примеры

Например, вы можете ссылаться на дополнительные основные и акцентные цвета, «красный 500» и «фиолетовый A200», например:

  импорт {фиолетовый, красный} из '@ mui / material / colors';

const primary = красный [500];
const accent = фиолетовый ['A200'];
const accent = фиолетовый.A200;
  

цветовых палитр Material Design | 9 Полезные инструменты

Одна из главных особенностей material design — это использование ярких и ярких цветов.

Руководство

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

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

В этом инструменте вы начинаете с выбора основного цвета и цвета акцента. После этого он покажет вам предварительный просмотр сгенерированной цветовой палитры в реальном времени и предложит вам различные способы ее загрузки.

Это отличная «шпаргалка», которая представляет все цвета дизайна материалов на одной странице.

Хотите, чтобы судьба решала, какой должна быть ваша цветовая палитра? Используйте этот инструмент, чтобы случайным образом выбрать цвета вашего материального дизайна.

Если вы хотите создать собственную цветовую палитру , похожую на материальный дизайн, , воспользуйтесь этим инструментом.Во-первых, вам нужно указать цвет — и он не обязательно должен быть одним из официальных цветов дизайна материалов — с помощью диалогового окна выбора цвета, аналогичного тем, которые вы можете найти в вашем любимом графическом редакторе. Генератор палитры материального дизайна затем сгенерирует образцы цвета на основе выбранного вами цвета.

5. Смеситель материалов

Этот полезный инструмент показывает все цвета Material Design в удобной компактной сетке. Щелкните основной цвет и цвет акцента, чтобы просмотреть и создать свою цветовую палитру.

Этот инструмент отображает только 500 и A200 цветов образцов цветов материального дизайна.

Это еще один простой инструмент для визуализации цветов материального дизайна. Основные цвета отображаются рядом. При нажатии на «цветовую полосу» отображаются все образцы цвета, связанные с этим цветом.

Этот инструмент отображает только 500 цветов материального дизайна.

9. Цвета дизайна материалов designkilz

Этот простой инструмент помогает визуализировать все образцы цветов материального дизайна вместе с их официальными названиями (например,грамм. Розовый , Голубой и т. Д.).

Плагины цветов для графических редакторов Material Design

Если веб-инструменты вам не нравятся, вы можете вместо этого установить плагин / расширение, которое интегрирует образцы цвета Material Design прямо в ваше программное обеспечение для дизайна.

Читать далее

Джейкоб Губе — основатель Six Revisions. Он фронтенд-разработчик. Свяжитесь с ним в Твиттере.

Google Material Design Palette — Toan Hoang

Эта информация была взята с официального веб-сайта Google Material Design.Для получения дополнительной информации щелкните ЗДЕСЬ

Цели материального дизайна

Создайте визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями технологий и науки.

Разработайте единую базовую систему, которая обеспечивает унифицированный опыт для разных платформ и устройств. Мобильные заповеди имеют фундаментальное значение, но прикосновение, голос, мышь и клавиатура — все это методы ввода первого класса.

Принципы материального дизайна

Материал — это метафора

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

Поверхности и края материала обеспечивают визуальные подсказки, основанные на реальности. Использование знакомых тактильных атрибутов помогает пользователям быстро понять возможности. Однако гибкость материала создает новые возможности, которые заменяют возможности физического мира, не нарушая правил физики.

Основы света, поверхности и движения являются ключом к передаче того, как объекты движутся, взаимодействуют и существуют в пространстве и по отношению друг к другу.Реалистичное освещение показывает швы, разделяет пространство и указывает движущиеся части.

Полужирный, графический, намеренный

Основополагающие элементы дизайна на основе печати — типографика, сетки, пространство, масштаб, цвет и использование изображений — определяют визуальные методы обработки. Эти элементы делают гораздо больше, чем просто радуют глаз. Они создают иерархию, смысл и фокус. Обдуманный выбор цвета, изображения от края до края, крупномасштабная типографика и намеренное пустое пространство создают смелый и графический интерфейс, который погружает пользователя в атмосферу.

Акцент на действиях пользователя делает основные функции очевидными и предоставляет пользователю путевые точки.

Motion дает смысл

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

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

Движение значимо и уместно, оно служит для концентрации внимания и поддержания непрерывности. Обратная связь тонкая, но четкая. Переходы эффективны, но последовательны.

Material Design Цветовая палитра

Цветовая палитра Google Material Design состоит из основных и акцентных цветов, которые можно использовать для иллюстрации или разработки цветов вашего бренда. Они созданы для гармоничного взаимодействия друг с другом. Цветовая палитра начинается с основных цветов и заполняет спектр, чтобы создать полную и удобную палитру для Android, Интернета и iOS.Google предлагает использовать 500 цветов в качестве основных цветов в вашем приложении, а другие цвета — в качестве цветов акцента.

Веб-сайт: https://www.google.com/design/spec/style/color.html

Цветовая палитра для Tableau

Я создал файл preference.tps, в котором записаны цвета дизайна материалов для использования в Tableau; эту Пользовательскую Палитру для Таблицы можно скачать ЗДЕСЬ.

Чтобы использовать эту палитру, распакуйте содержимое загружаемого файла и скопируйте файл сюда в следующее расположение:

C: \ Users \ <Ваше имя пользователя> \ Documents \ My Tableau Repository

Цвета дизайна материалов — Цвета материалов Google

rgba (3, 169, 244, 0.3) rgba-blue-light

rgba (244, 67, 54, 0.3) rgba-red-light

rgba (233, 30, 99, 0.3) rgba-pink-light

rgba (156, 39, 176). , 0,3) rgba-purple-light

rgba (63, 81, 181, 0,3 rgba-indigo-light

rgba (0, 188, 212, 0,3) rgba-голубой-светлый

rgba (0, 150, 136 , 0,3) rgba-teal-light

#rgba (76, 175, 80, 0.3) rgba-green-light

rgba (205, 220, 57, 0,3) rgba-лайм-светлый

rgba (255, 235 , 59, 0.3) rgba-желтый-светлый

rgba (255, 152, 0, 0.3) rgba-оранжевый-светлый

rgba (121, 85, 72, 0,3) rgba-коричневый-светлый

rgba (158, 158, 158, 0,3) rgba-серый-светлый

rgba (96, 125, 139 , 0,3) rgba-bluegrey-light

rgba (0, 0, 0, 0.3) rgba-black-light

rgba (62, 69, 81, 0,3) rgba-style-light

rgba (255, 255, 255, 0,3) rgba-white-light

rgba (3, 169, 244, 0,7) rgba-blue-strong

rgba (244, 67, 54, 0,7) rgba-red-strong

rgba (233, 30 , 99, 0,7) rgba-розовый-сильный

rgba (156, 39, 176, 0.7) rgba-purple-strong

rgba (63, 81, 181, 0,7 rgba-indigo-strong

rgba (0, 188, 212, 0,7) rgba-cyan-strong

rgba (0, 150, 136, 0,7) rgba-teal-strong

#rgba (76, 175, 80, 0,7) rgba-green-strong

rgba (205, 220, 57, 0,7) rgba-lime-strong

rgba (255, 235, 59, 0,7) rgba-yellow-strong

rgba (255, 152, 0, 0,7) rgba-orange-strong

rgba (121, 85, 72, 0,7) rgba-brown-strong

rgba (158, 158). , 158, 0,7) rgba-серый-сильный

rgba (96, 125, 139, 0.7) rgba-bluegrey-strong

rgba (0, 0, 0, 0,7) rgba-black-strong

rgba (62, 69, 81, 0,7) rgba-style-strong

rgba (255, 255, 255 , 0,7) rgba-white-strong

rgba (3, 169, 244, 0,3) rgba-blue-small

rgba (244, 67, 54, 0,3) rgba-red-light

rgba (233, 30, 99, 0.3) RGB-розовый-легкий

RGB-легкий (156, 39, 176, 0,3) RGB-фиолетовый-легкий

RGB-легкий

RGB-легкий (63, 81, 181, 0,3 RGB-индиго-легкий

RGBA (0, 188, 212, 0.3) RGB-голубой-легкий

RGBA (0, 150, 136, 0.3) rgba-teal-light

#rgba (76, 175, 80, 0.3) rgba-green-light

rgba (205, 220, 57, 0.3) rgba-lime-light

rgba (255, 235, 59, 0,3) RGB-желтый-легкий

RGB-оранжевый-легкий

RGB-оранжевый-легкий

RGB-коричневый-легкий

RGB-светлый (158, 158) , 158, 0,3) rgba-серый-легкий

rgba (96, 125, 139, 0,3) rgba-bluegrey-легкий

rgba (0, 0, 0, 0,3) rgba-черный-легкий

rgba (62, 69, 81, 0.3) rgba-стильный-легкий

rgba (255, 255, 255, 0.3) rgba-white-small

Цветовая палитра материалов — Vuetify

Из коробки вы получаете доступ ко всем цветам в спецификации Material Design через sass и javascript . Эти значения можно использовать в таблицах стилей, файлах компонентов и в реальных компонентах с помощью системы класса цветов .

# Классы

Каждый цвет из спецификации преобразуется в фон и текст вариант для стилизации в вашем приложении с помощью класса, например.грамм.

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

импортировать цвета из 'vuetify / lib / util / colors'

Vue.использовать (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  тема: {
    themes: {
      свет: {
        основной: colors.red.darken1,
        вторичный: colors.red.lighten4,
        акцент: colors.indigo.base,
      },
    },
  },
})
  

 

$ color-pack: false;

@import '~ vuetify / src / styles / main.sass';
  

 

импортировать './src/sass/main.scss'

требуется ('./ src / sass / main.scss')