Секреты поиска цветовых палитр ‹ Виртуальная школа графического дизайна
Цвет! До чего богатый и таинственный язык, язык снов!
Поль Гоген
Привет всем читателям!
Всем нам хорошо известно, что цвета и их оттенки способны вызывать различные ассоциации и эмоциональный отклик, а значит, они влияют на восприятие бренда. Другими словами, от выбора цвета напрямую зависит успешность дизайна.
Исследования показывают, что удачно подобранный цвет значительно повышает узнаваемость марки (вплоть до 80%), вызывает заинтересованность, улучшает восприятие визуального сообщения.
К счастью, времена, когда цветовая палитра была ограничена небольшим набором натуральных пигментов, ушли в прошлое. Когда-то люди получали краски из минералов, животных и растений. Сегодня на сцену вышли синтетические пигменты…
Правда, задача художника и дизайнера от этого легче не стала. Напротив, при таком многообразии цветов, выбор подходящей палитры для проекта порой превращается в муку. Например, в интернет-сообществе Colourlovers представлено почти 8 миллионов цветов и свыше 16 миллионов возможных шестнадцатеричных цветовых сочетаний!
В этой статье я приведу несколько наиболее эффективных способов создания удачных цветовых сочетаний для дизайн-проекта, которыми пользуются успешные дизайнеры на просторах Сети. Запомните их и используйте, когда приступите к своему следующему проекту.
1. Ищите вдохновение в окружающем мире
Фотографируйте красивые цветовые композиции, а потом просто использует их в качестве шаблонов при работе в Photoshop или Illustrator. Источником вдохновения может служить все что угодно: фрагменты природы, фрукты и ивощи, предметы, животные…
Итак, если у вас есть фотография, на которой запечатлена привлекательная цветовая композиция. Используйте её для создания палитры. Этот метод становится еще проще с такими инструментами, как Photocopa и Adobe Color. Просто загрузите фотографию в программу, изучите её цветовую схему, а потом соберите палитру.
2. Используйте цветовой круг
Когда художник Марк Шагал работал с цветовыми палитрами, он придерживался простого правила: «Цвета дружат со своими соседями и любят противоположности».
В данном случае под «друзьями» понимаются аналоговые цвета, т.е. те, которые находятся рядом друг с другом на цветовом круге. Что касается «любимых», то так Шагал называет комплиментарные цвета, которые находятся друг напротив друга на цветовом круге.
Синди Кинаш (Cindy Kinash), дизайнер из Cultivated Mind, считает, что при создании акварельных цветов тени следует наносить аналоговым цветом.
В этом проекте Синди Кинаш светло-синий соседствует с темно-синим и пурпурным, этот прием помогает добиться глубины.
Эта уловка работает практически во всех случаях. Экспериментируйте с аналоговыми цветовыми схемами, когда добавляете тени в заголовки или рисуете границы фона. Обычно эти цвета отлично сочетаются между собой, потому что они похожи. Найдите свои собственные уникальные комбинации, подбирая соседствующие цвета в круге!
Этот способ пригодится вам даже в том случае, если у вас нет желания или времени вручную разбираться в цветовых композициях. Сегодня в Сети можно найти массу полезных онлайн-инструментов, которые сделают за вас всю работу. Например, Adobe Color (бывший Kuler).
3. Заимствуйте цвета из интерьера
Разные сферы дизайна могут быть полезны друг другу, если речь заходит о цвете. Например, дизайнерам интерьера требуется обеспечить гармонию пространства с помощью различных текстур, объектов и цветовых схем, которые хорошо дополняют друг друга.
И здесь может оказаться полезным правило, которым я часто пользуюсь. Оно применимо как в дизайне интерьера, так и в графическом дизайне: 60% доминирующего цвета, 30% вторичного цвета, 10% акцентного цвета. Если вам хочется ввести четвертый и больше цветов, сделайте это за счет вторичного цвета (или доминирующего). Только ни в коем случае не трогайте акцентный.
Изучайте другие творческие сферы и узнавайте для себя что-то новое в вопросе использования цветов. Ни одна творческая ниша не может существовать без цвета! Если вы внимательнее приглядитесь к интерьеру комнат и оформлению зданий, перед вами откроется абсолютно новый мир потрясающих цветовых сочетаний и техник.
4. Сохраняйте цвета, которые вам нравятся
Всегда сохраняйте понравившиеся цветовые палитры на будущее. Если вы видите изображение или фотографию в цветовой гамме, которая нравится мне или окружающим, всегда делайте скриншот или отправляйте её в закладки.
Когда вам понадобится удачная цветовая палитра, загляните в папку с сохраненными изображениями «для вдохновения» и выберите что-нибудь подходящее.
Ищите вдохновение повсюду: в современных дизайнах и исторических полотнах, в Интернете и на бумаге.
Вы наверняка знаете, какими полезными могут быть сайты вроде Pinterest, ведь там можно сохранять и каталогизировать все виды цифровых палитр. А что делать с физическими объектами, которые вызывают у вас полет фантазии?
Дизайнер и автор книги «Кради как художник» Остин Клеон предлагает завести специальную папку и складывать в нее фотографии разных предметов дизайна и примеры цветовых палитр, которые вам понравились.
Если вы читаете журнал, не забудьте позаимствовать из него красивую брошюру. Если у вас в почтовом ящике обнаружился рекламный проспект в необычной цветовой гамме, положите его в папку. В будущем она станет вашим постоянным источником вдохновения!
5. Доверьтесь цветовому справочнику Pantone
Иногда цифрового круга просто не хватает. Тогда лучше отвернуться от экрана и прибегнуть к более традиционному способу — к палитрам Pantone.
Иногда приятнее просмотреть справочник с образцами цветов Pantone, чем подбирать палитру на экране компьютера. Также этот способ может пригодиться, если клиенту требуется какой-то специфицеский цвет, и ему нужно показать его на наглядном примере».
Несмотря на всеобщую дигитализацию дизайнерского инвентаря, каталоги Pantone ничуть не устарели и не утратили своей важной функции. Каждому цвету в справочнике Pantone соответствует шестнадцатеричный эквивалент. Также образцы Pantone – незаменимый инструмент для дизайнера, который готовит проект для печати. Если вы точно знаете, как тот или иной цвет смотрится на бумаге, то сможете сэкономить уйму времени, денег и нервов, когда дело дойдет до отправки дизайна в типографию.
6. Ищите цвета в природе
Природные цветовые гаммы восхищают и притягивают наш взгляд. Вокруг нас великое множество готовых гармоничных цветовых сочетаний. Пейзажи, листва, цветы, фрукты, — все это может послужить бесконечным источников вдохновения. Конечно, можно искать вдохновение в Сети и в творчестве других дизайнеров, но взгляните: у вас за окном целый мир, только протяни руку!
Отличные подборки природных цветовых коллекций вы можете найти на Design Seeds.
7. Используйте не более 3-4 цветов
Избегайте использовать слишком много разных цветов (если только у вас нет цели изобразить нечто нарочито цветастое и радужное). Для начала рекомендую использовать три цвета, чтобы добиться максимальной выразительности и ясности дизайна. Такой макет будет смотреться целостно и неброско. Более подробно о количестве цветов в работе я уже когда-то писал в статье «Ограничение количества цветов».
8. Сопоставьте цвет с настроением своего проекта
Подумайте о том, какую идею вы хотите донести с помощью своего проекта. Это спорт, мода, красота или бизнес? С чем у вас ассоциируется эта идея. Это симпатичный модный флаер или агрессивная брошюра о спорте? Ваш проект женственный, жизнерадостный, серьезный или элегантный?
Для начала определитесь с цветовой гаммой и лишь потом переходите к деталям. «Например: «Мне нужен романтичный пурпурный» или «Я хочу очаровательный розовый».
Поищите фотографии, проекты и другие источники вдохновения, в которых задействованы те же оттенки, идеи и эмоции, которые вы хотите воплотить в своем дизайне. В чем их сходства? А различия?
Еще один хороший способ понять силу воздействия выбранного вами цвета – познакомиться с теорией цвета. Проведите небольшое исследование, прочитайте пару статей и уясните для себя, как те или иные цветы влияют на людей психологически. Тогда вы поймете, какие цвета стоит использовать, а какие нет. Помните: цвета, которые вы выбираете осмысленно, а не интуитивно, зачастую оказываются самыми действенными!
9. Используйте Pinterest для поиска тематических палитр
В Pinterest содержится огромное количество цветовых палитр, созданных творческими личностями со всего мира. Если мне нужно придумать идею дизайна, скажем, на тему летнего отдыха, я просто задаю поиск под заголовком «Летние цветовые палитры» и выбираю одну из них.
Вот как выглядят результаты запроса по «Летним цветовым палитрам» в Pinterest. «Фишка» здесь в том, что вы получаете вдохновение из самых разных сфер: интерьер, мода, графика и даже оформление праздников.
10. Посещайте тематические сайты
Colourlovers – это творческое сообщество, где люди со всего мира создают и выкладывают цвета, палитры и шаблоны. Зарегистрируйтесь, и вы получите доступ к более чем 3,7 миллионам цветовых палитр.
Теперь ваша очередь
Цвет способен как создать идею, так и разрушить её. Он может быть красивым и чистым или беспокойным и резким. Выбор за вами. Все дело в грамотном и осмысленном смешении оттенков.
Правильно подобранная цветовая палитра зачастую становится основой хорошего дизайна, так почему бы не поэкспериментировать с разными техниками и не вдохнуть новую жизнь в свое творчество?
Было бы интересно узнать, как вы используете цвета в своих проектах, где вы находите вдохновение? Есть ли у вас свой набор правил, инструментов или техник для подбора удачных сочетаний цветов? Поделитесь ими в комментариях.
Уважаемый/ая коллега!
Если вы хотите основательно изучить эту тему и получить практические навыки по созданию удачных цветовых сочетаний, приглашаю вас принять участие в моем онлайн-воркшопе «Колористика для дизайнера-самоучки», который стартует 20.09.2016.
Информация и регистрация здесь.
Поделиться в соц. сетях:
creativshik.com
10 лучших генераторов цветных палитр Material Design / Полезное в сети / Постовой
Цвет — важнейший элемент веб-дизайна, поэтому, когда вы работаете с Material Design, стоит обратить внимание на активное использование насыщенных, контрастных и ярких цветов. Существует бесконечное множество комбинаций, и любому дизайнеру не избежать размышлений о подборе наиболее подходящих оттенков.
Так как выбор палитры задаст весь будущий дизайн, на это нужно потратить достаточно времени, и чтобы помочь с выбором идеальных комбинаций, в этой статье собрано топ 10 генераторов цветных палитр для стиля Material Design.
Также хочу заменить, что ранее мы уже публиковали подборку с генераторами цветовых палитр, но они к Material Design никак не относились. Называлась статья 5 генераторов цветовых схем для веб-дизайнера.
Material Palette
Material Pallete один из лучших инструментов подбора палитр в стиле Material Design. Его хорошо продуманный интерфейс точно не оставит вас равнодушным. Это приложение позволяет выбрать главный цвет и дополнительные к нему, после чего покажет вам превью созданной палитры и предложит несколько способов её скачать.
Material UI
Material UI пользуется популярностью среди графических и веб-дизайнеров. Он содержит основные и дополнительные цвета для использования или же поможет при работе над цветовой темой вашего проекта. Создание палитры начинается с выбора основных цветов, после чего заполняется спектром с соответствующими ему цветами. Так можно создать полноценную, готовую к использованию палитру для Android, Web, и iOS. 500 цветов Google рекомендует использовать как основные в вашем приложении, а также ряд других цветов как дополнительные.
Designskillz Material design
Этот ресурс отобразит для вас все цвета material дизайна вместе с их названиями (например Pink, Light Blue, и т. д.).
Material UP
Material UP это инструмент, предоставляющий палитры для дизайна. Показывает основные цвета в ряд, один за другим. Кликнув на один из них можно увидеть все дополнительные цвета, которые привязаны к нему.
Material Mixer
Material mixer поможет вам выбрать сочетание основных и дополнительных цветов в material дизайне. Инструмент подбирает тени и оттенки цветов, основываясь на палитре Google. Сервис также позволяет выбрать запасной цвет на замену для каждого основного в вашей палитре. Для создания новой палитры просто выберите основной и дополнительный цвет из предлагаемых, чтобы отобразился идеально подобранный список сочетающихся с ними цветов.
Random Material Generator
Позвольте Random Material Generator выбрать палитру для вашего дизайна случайным образом.
Colordrop
Это расширение для браузера Chrome. Позволяет окрашивать DIV-блоки и шрифты с помощью Drag & Drop в цвета из палитры Material Design. Отличное решение в тех случаях, когда нужно быстро посмотреть, как будет выглядеть элемент на рабочем сайте. Расширение хоть и сыроватое, но занимательное.
Material Design css генератор
Простой инструмент, который позволяет удобно подобрать цветовую палитру для вашего приложения. После того, как определились с основными активными цветами, можно скачать CSS файл.
Material Colors
Material Colors — это простой в использовании ресурс для тестирования и быстрого копирования цветов Material Design. Здесь вы найдете 500 основных и 200 дополнительных цветов для создания цветовой темы.
Tint ui
Tint UI это инструмент для подбора цветов, где собраны официальные палитры Material Design, iOS, Flat UI Colors и Windows.
postovoy.net
Дизайн в цвете. Цвет — это мощная сила в руках дизайнера
Цвет — это мощная сила в руках дизайнера. Он притягивает взгляд, рождает эмоции и передает смысл. Чтобы вы поняли, насколько это важно, привожу широко известное исследование под названием Влияние цвета на маркетинг, где сказано, что для некоторых продуктов 90% поспешных решений по покупке тех или иных товаров люди делают, основываясь только на цветах.
Так что эффективное использование цветов играет большую роль в дизайне. Но выработка различных цветовых комбинаций — не простая задача. Каждый оттенок имеет свой смысл, и есть бесконечное количество сочетаний.
Эта статья создана в качестве руководства в помощь по созданию цветовых палитр для дизайнов. Она побуждает глубже посмотреть на цвет как инструмент, помогает разработать интуитивный смысл хороших комбинаций.
По мере углубления в теорию цвета вы сами сможете создавать интуитивно успешные сочетания.
Выбор цветовой палитры
Шаблон для палитры
Иногда цветовая палитра — это результат случайного вдохновения. Но в большинстве случаев это итог системного подхода.
Определите цель
Перед тем, как делать что-либо, нужно задать цель дизайна. В хорошем дизайне цвета всегда подобраны под его цель.
Спросите себя следующее:
- Какой посыл вы хотите передать через дизайн?
- Какова цель вашего дизайна? Быть информативным? Убеждать?
- Какие эмоции вы хотите рождать своим дизайном у пользователей?
Цель дизайна должна служить как руководство в выборе палитры цветов.
Определите свою аудиторию
Кто ваша аудитория, и как это влияет на дизайн?
Люди воспринимают цвета по-разному. Как сказал Фейрчайлд, цвет — это психологический феномен, который возникает только в глазах смотрящего. Цвет производит разный эффект на людей, в зависимости от их личных предпочтений, культурных особенностей и опыта. Поэтому, чтобы понять, как люди отреагируют на ваш дизайн, вам нужно будет определить свою аудиторию.
В то время, как некоторые цвета имеют одинаковое, универсальное значение для разных аудиторий, другие нет. Зеленый универсально представляет природу, так как это цвет растительности. Цвет вроде красного по-разному интерпретируется в разных культурах. На западе красный ассоциируется с огнем, насилием, войной. Он также ассоциируется с любовью и страстью. Тем не менее, страны вроде Китая связывают его с процветанием и счастьем.
Красный конверт в Китае
Поскольку у цветов столько разных значений, важно соответствовать ментальным цветовым моделям своей аудитории.
Узнайте больше о значениях цветов для разных стран и народностей в постах Психология цвета в маркетинге и брендинге и Значение цвета.
Изучите теорию цвета
При выборе палитры иногда полезно знать немного теории цвета. Теория цвета — это логическая структура и практическое руководство по смешиванию оттенков. Она охватывает все, от цветового круга до значений каждого отдельного цвета.
Хороший материал для старта — Теория цвета от Design School и Цветовая теория 101 от Hubspot. Прочитайте об интересном применении теории цвета в посте Почему Facebook синий? Наука за цветами в маркетинге.
Поиск вдохновения
Иногда сложно визуализировать правильную палитру цветов для дизайна. Это нормально, великие художники воруют. Или же, они вдохновляются работами других художников.
Обычным источником вдохновения для цветовых палитр являются сайты вроде Dribbble и Behance. Если вы хотите вдохновиться для конкретного стиля дизайна, например, material design, можете использовать сайт вроде MaterialUI. Эквивалент в плоском дизайне — FlatUIColors.
Эти сайты полезны, но попытайтесь изучить дизайны, которые выходят за рамки специфической среды, для которой вы проектируете свой дизайн. Это поможет разработать неожиданно уникальные и приятные цветовые палитры. Например, вы можете искать вдохновение в дизайнах интерьеров.
Дизайн интерьеров оживляет пространство с помощью цвета.
Если вы хотите что-то оригинальное, ищите идеи в дизайнах других культур. Например, корейские музыкальные клипы известны своей яркостью и привлекательными для глаз цветовыми палитрами. Каждый кадр является источником вдохновения.
Корейские клипы отлично вдохновляют
Вам не нужно ехать в Корею специально для поиска идей. Они всюду, включая вашу повседневную жизнь. В следующий раз, когда выйдете на прогулку, остановитесь и посмотрите на цвета вокруг себя.
Вдохновение повсюду, включая вашу повседневную жизнь.
Когда вы найдете что-то, что вдохновляет вас, создайте из этого палитру цветов. Вы можете использовать пипетку в своем любимом дизайн-редакторе, чтобы захватить цвета для палитры и сделать нужные настройки.
Задайте дизайн-систему
Дизайн-система, иногда называемая руководством по стилям, — это фреймворк, которые включает в себя все элементы вашего дизайна. Она включает все — от кнопок до типографики. Рассматривайте, какие кнопки вы будете использовать, как будет выглядеть ваша панель навигации.
В качестве примера дизайн-системы посмотрите на систему Salesforce. Больше примеров найдете в 50 дотошных руководствах по стилю, которые должен увидеть каждый стартап перед запуском.
Дизайн-система MashCreative
Полезно задать систему дизайна перед выбором цветовой палитры, даже если это будет грубый набросок. Таким образом, у вас будет четкое представление, какие элементы у вас есть, и как к ним будут применяться цвета.
При выборе палитры для дизайна лучше следовать принципу KISS (Keep it simple, stupid — Делай проще, дурачок!). Чем меньше цветов, тем лучше. Для большинства систем дизайна такая структура отлично подойдет для старта:
- Фон
- Главный тон
- Вспомогательный тон
- Цвет ошибки
- Цвет успешной операции
Главный цвет — это цвет, в который чаще всего будут окрашены важные кнопки и акценты. Для большинства компаний это цвет их логотипа.
Вспомогательный цвет — это цвет, который используется для отличия второстепенных действий от основных. Например, главные и вспомогательные кнопки. Цвета ошибок и успеха, обычно красный и зеленый, отвечают за состояния. Например, уведомления об ошибке или об успешном завершении действия.
Состояния дизайна
Выбор цветовой палитры
Когда вы зарядились вдохновением, набросали свою будущую дизайн-систему, настало время выбрать палитру цветов.
Для базовых палитр я предпочитаю располагать цвета друг к другу, как художники делали бы это на своей палитре для рисования.
Это время вложить все свое вдохновение цветами в палитру. Чем больше, тем лучше. Не бойтесь экспериментировать с цветами.
Суживая выбор оттенков в палитре, опять вернитесь к первым двум разделам, где вы определяли цель и аудиторию для своего дизайна. Задайте себе следующие вопросы:
- Какие цвета доступны?
- Какие цвета оказывают визуальное влияние и привлекают взгляд?
- Нужна ли вам светлая и темная цветовые схемы? В какое время дня пользователи используют ваш продукт?
- Какое настроение вы бы хотели передавать через дизайн? Реализует ли это одна из ваших палитр лучше остальных?
Как я упоминал в предыдущем разделе, цвета будут иметь разные роли в системе вашего дизайна. Это также означает, что каждый цвет имеет свой вес в системе. Например, фоновый оттенок будет использоваться больше, чем цвета акцентов.
По этой причине иногда будет полезно создать бросовый дизайн из разных фигур разных размеров, в котором каждый размер примерно равен частоте появления и средней области покрытия цветом на конкретной странице. Например, посмотрите на палитру цветов Invision.
Геометрическое представление может выглядеть примерно так.
Применение цветовых палитр
Посмотрите на Airbnb, чтобы иметь представление, как цвета применяются в системах дизайна. Главный цвет в Airbnb — Rausch, который назван в честь улицы, на которой расположена сама компания. Kazan служит вспомогательным цветом, а два серых оттенка используются в качестве фоновых.
Цвета бренда Airbnb
Для большинства страниц Airbnb в качестве фона использует туманно-серый оттенок. Вы видите, что rausch используется как основной цвет для акцентирования важных действий, таких как запрос на бронь листинга.
Kazan, черепаховый оттенок, используется для привлечения вашего внимания. Посмотрите, как он отлично сочетается с основным цветом.
Для сообщений об ошибках в Airbnb используется светло-красный, с натяжкой оттенок цвета rausch. Красный вместе с восклицательным знаком тут же привлекает взгляд и уведомляет о состоянии системы.
Начните вообще без каких-либо цветов в дизайне. Сфокусируйтесь на макете и расстановке элементов. После того, как вы будете довольны самим макетом, можете начать применять свою палитру к дизайну.
Начните без цветов, а затем медленно их добавляйте
Продумайте визуальную иерархию в вашем дизайне. Рассмотрите, какие компоненты дизайна вы хотите выделить и назначьте им соответствующие оттенки. Также рассмотрите использование разных тонов ваших цветов для состояний ховера и клика.
Заключение
Цвета подразумевают постоянные эксперименты и итерации. Если вы хотите усовершенствоваться в работе с цветом, единственный путь — как можно больше работать с ним. Расценивайте цвет как слагаемое. Если вы уже разработали макет и функциональность дизайна, можете приступать к экспериментам с множеством цветовых палитр. Изучение дизайна в цвете просто бесконечно ценно для дизайнера. По мере совершенствования ваших навыков в выборе цветов, у вас выработается возможность визуализировать комбинации оттенков в дизайне еще до начала работы в графическом редакторе.
Я бы хотел знать, как вы работаете с цветами. Каков ваш процесс? Делитесь в комментариях.
ux.pub
10 лучших генераторов цветовой палитры Material Design
Цвет можно рассматривать как один из самых популярных и важнейших элементов веб-дизайна. В Material Design используются смелые, яркие и насыщенные цвета. Иногда весь макет может быть испорчен, если вы выберите неправильную цветовую палитру. Поэтому дизайнерам постоянно приходится решать, какая палитра идеально подходит в данном случае.
В этой статье мы подобрали 10 лучших генераторов цветовой палитры материального дизайна, которые помогут вам создавать блестящие цветовые комбинации и схемы.
1. Material Design Palette Generator
Этот инструмент позволяет быстро и легко создавать или импортировать наборы цветов для разработки собственной, идеальной темы из полностью настраиваемых палитр. После того, как вы настроите тему, присвойте имена теме и палитре, а затем быстро экспортируйте их в любой front-end фреймворк!
Поддерживается экспорт в JSON и AngularJS, Materialize, CSS, Polymer и некоторые другие среды.
2. Material Palette
MaterialPallete.com — это один из моих любимых генераторов цветов. Удобный пользовательский интерфейс обеспечивает прекрасный опыт взаимодействия. С помощью этого инструмента можно выбрать основные и специальные цвета для своего проекта. Затем вы сможете вывести на предварительный просмотр сгенерированную цветовую палитру и скачать ее различными способами на выбор.
3. Tint ui
Tint ui — это инструмент для выбора цвета из стандартных палитр Material Design, iOS, Flat UI Colors и Windows.
4. Material UI
Material UI — включает в себя основные и специальные цвета, которые могут быть использованы для иллюстраций или разработки палитры бренда. Вы начинаете создавать цветовую палитру с основных цветов, а затем дополняете ее оттенками для создания полной палитры. Палитру можно использовать под Android, Web и iOS. Сервис предлагает на выбор 500 цветов в качестве основного цвета приложения, а также дополнительные цвета в качестве специальных.
5. Material Colors
MaterialColors.com — простой ресурс для тестирования и быстрого копирования цветов Material Design. Этот инструмент отображает только 500 основных и 200 специальных оттенков.
6. Designskillz Material design
Этот простой инструмент поможет визуализировать все образцы цветов материального дизайна вместе с их официальными названиями (например, Pink, Light Blue и т.д.).
7. Material UP
Сервис отображает основные цвета друг рядом с другом. При нажатии на одну «панель цвета» выводятся все оттенки, связанные с этим основным цветом.
8. Material Mixer
Инструмент Material Mixer позволяет подбирать сочетание первичных и вторичных цветов. Основываясь на принципах материального дизайна от Google, программа вычисляет оттенки и тона, а также позволяет выбрать резервные цвета для каждого первичного и вторичного (специального) цвета. Выберите первичный и «А» (специальный) цвета и посмотрите, как они сочетаются друг с другом.
9. Random Material Generator
Позвольте инструменту Random Material Generator выбрать для вас цвета Material Design случайным образом.
10. Malette
Инструмент выбора цвета для палитры материального дизайна от Google.
Перевод статьи «10 Best Material Design Color Palette Generators» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Цвет в дизайне / Блог компании ua-hosting.company / Хабр
Нет надобности расписывать, как важен цвет в дизайне. Удачное цветовое решение — это уже половина успеха проекта. В помощь развивающимся дизайнерам — немного теории цветового круга и подборка ссылок на полезные ресурсы.
Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.
Согласно теории цвета, гармоничные комбинации используют: два противоположные друг другу цвета; любые три цвета, равномерно распределенные вокруг круга и формирующие треугольник; любые четыре цвета, формирующие прямоугольник (фактически, две пары цветов друг напротив друга).
Правила соответствия цветов
Взаимодополняющие цвета — расположены друг напротив друга. Например, синий и оранжевый, или красный и зеленый.
Они контрастируют между собой, хорошо подчеркивают и выделяют нужный элемент. Лучшее сочетание выходит, когда один цвет применятся в качестве фона, а другим выделяются акценты. Игра с оттенками и тонами разнообразит цветовую гамму и поможет добиться желаемого результата.
Разделение взаимодополняющих цветов осуществляется за счет трех цветов. Они также находятся друг напротив друга, но общая комбинация выглядит более спокойной и разнообразной за счет добавления третего цвета.
Аналогичные цвета любые три цвета, которые находятся рядом с другом. Например, оранжевый, желто-оранжевый и желтый.
Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.
Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.
Полезные веб-сайты
В сети немало ресурсов, которые предоставляют готовые цветовые палитры, паттерны и шаблоны. Ниже подобран небольшой список из полезных для дизайнера «цветовых» ресурсов.
СOLOURlovers
www.colourlovers.com/palettes/most-views/all-time/meta
Творческое сообщество, где люди со всего мира выкладывают готовые цветовые решения и шаблоны. Все выложенное оценивается пользователями.
Color Safe
colorsafe.co
Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.
COLORS
clrs.cc
Простая палитра цветов для веб-разработки.
UiGradients
uigradients.com/#PinotNoir
Большая коллекция уже готовых цветных градиентов.
Couleurs
couleursapp.com
Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.
Web Colour Data
webcolourdata.com
Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).
Material Palette
www.materialpalette.com
Генерирует цветовую палитру дизайна.
Material Colors
materialcolors.com
Подборка цветовых образцов из Google’s Material Design Guidelines.
Material Design Colors
www.designskilz.com/colors
Это небольшое веб-приложение помогает визуализировать цвета дизайна и скопировать их в различных форматах.
Material Design Palette
codepen.io/addyosmani/full/jlvoC
Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.
Colours
colours.neilorangepeel.com
Цвет по номерам и расположению на палитре.
Rrggbb
rrgg.bb
Образцы цвета с номерами для программ.
Fifty Shades Of Grey For Web Designers
www.mynameisq.com/web-lab/fifty_shades_of_grey
Оттенки и образцы серого для веб-дизайна.
Fifty Shades Of Grey For Web Designers
hex.colorrrs.com
Сайт, подбирающий цвет.
Material UI Colors
www.materialui.co/colors
Палитра UI-цветов от Google, включает основные и дополнительные цвета, которые могут быть использованы для иллюстраций или веб-разработки.
Adobe Color CC
color.adobe.com/ru/create/color-wheel
Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.
Coolors
coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb
Быстрый генератор цветовой схемы для дизайнеров.
BADA55.Io
bada55.io
Сайт предлагает наиболее агрессивные названия для цветов CSS.
Paletton
paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Цветовая схема для дизайнеров.
Colourcode
colourco.de
Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.
Color Palette Generator
www.degraeve.com/color-palette
Создает цветовые схемы. Необходимо ввести URL изображения, чтобы получить цветовую палитру, которая соответствует выбранной картинке.
Color Palettes Color Schemes
www.color-hex.com/color-palettes
ColorSchemer
www.colorschemer.com/online.html
Он-лайн схема, генерирующая цвет.
Colllor
colllor.com
Генератор цветовой палитры.
Contrast-A
www.dasplankton.de/ContrastA
Приложение позволяет пользователям экспериментировать с цветовыми комбинациями, создавать собственные.
Color Hex
www.colorhexa.com
Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.
СolorExplorer
www.colorexplorer.com
Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.
ColorLuck
7act.ru/colorluck.php
Инструмент для поиска максимально различных цветов.
habr.com
Плоский дизайн и цветовая палитра — SkillsUp
Мы уже много рассказывали про плоский дизайн. Показывали много различных примеров использования данного метода. А как на счет того, чтобы разработать свой собственный вариант? Одна из важных частей данного метода, если не самая важная, это цветовая палитра.
Плоский дизайн — подготовка
Плоский дизайн — это метод, который не использует никаких дополнительных эффектов, либо самые простые, а также не содержит трехмерных элементов. Такие эффекты как тени, скосы, тиснение и градиенты не используются в плоском дизайне.
Некоторые называют внешний вид плоского дизайна простым, хотя это не всегда так. Внешний вид сам по себе простой, понятный и удобный для пользователя, что делает его все более популярным вариантом для мобильных пользовательских интерфейсов, а также модным вариантом оформления для веб-дизайна.
Определение цветовой палитры
Плоский дизайн работает с яркими, смелыми цветами и когда дело доходит до цветовой палитры, то чаще всего дизайнеры предпочитают использовать большое цветовое разнообразие.
Еще одна вещь, которая делает плоский дизайн отличающимся с точки зрения цвета. Дизайнеры используют цветовую палитру одного просто оттенка и добавляют два — три, четыре или больше цветов. Большинство из этих вариантов яркие, полностью насыщенные оттенки, которые противоположны как например серый и черный.
Когда дело доходит до цветного плоского дизайна многие традиционные правила о сочетаниях и соответствиях цвета игнорируются, а используются палитры, которые охватывают радугу с большим количеством цветов.
Всё что мы видим в плоском цветном дизайне это сочетание тона и насыщенности. Дизайнеры могут использовать довольно много оттенков, которые будут дополнять друг друга в том, на сколько установлена глубина цвета, является ли этот цвет основным или это результат вторичной цветовой комбинации, а может этот цвет абсолютно из другой части цветовой палитры и содержит цвета черных или белых оттенков.
Когда дело доходит до цветовой палитры, плоский дизайн часто супер-насыщен яркими цветами, в стиле ретро или монотонности. Это не значит, что это единственные варианты, но поскольку на сегодняшний день тренд только развивается, данные варианты являются сейчас самыми популярными.
Яркие цвета
Яркая цветовая палитра часто характеризует плоский дизайн, поскольку он вызывает различные чувства. Яркие цвета особенно хорошо работают по сравнению с обычными, также и на темном фоне, создавая контраст и привлекая взгляд пользователей.
Итак, с чего же начать?
FlatUIColors.com имеет большой стартовый список некоторых самых популярных оттенков в плоском дизайне. Начиная с яркого-синего и зеленого заканчивая желтым и оранжевым. Сайт является отличным началом для того чтобы использовать плоский дизайн в своем проекте, потому что Вы можете выбрать и скачать бесплатно цвета и различные сочетания цветов. (Лично мне нравятся серые и спокойные тона.)
Если Вы хотите соединить свои собственные яркие цвета в плоском дизайне, выберите простоту и такие цвета, у которых одинаковый цветовой тон и насыщенность.
Яркие примеры: Попробуйте эти цветовые сочетания вместе или в отдельных в группах, чтобы создать более плоскую цветовую палитру. Каждый из этих цветов будет установлен на белом или черном фоне для максимальной отдачи.
Популярные цвета: синие, зеленые и фиолетовые
Ретро цвета
Ретро цвета также является популярным выбором при работе с плоским дизайном.
Эти менее насыщенные оттенки построены на основе яркой цветовой палитры, но с добавлением белого, чтобы сделать их более приглушенными. Ретро цветовая палитра часто содержит много оранжевого и желтого, а иногда красного или синего.
Чаще можно увидеть первичные и вторичные цвета, используемые в ретро палитрах при работе с плоским дизайном, из-за смягчения цветового тона.
Ретро примеры: ретро цвета работают лучше всего, когда их ставят на передний план в качестве доминирующих цветов. Соединяйте их с изображениями или приглушенными цветами для достижения наилучших результатов.
Популярные цвета: апельсиновый, персиковый или темно синий.
Монотонные цвета
Монотонные цвета в паре с плоским дизайном набирают популярность стремительными темпами. Эти цветовые палитры полагаются на единственные цвета, черный и белый, чтобы создать яркую, но отличную палитру.
Большинство монотонных цветовых схем используют два или три цвета в качестве базового. Самый популярный выбор цвета, кажется, синий, но многие дизайнеры выбирают для монотонной схемы цвета на основе черного (серый например), или такие как красный, для кнопок.
Другой вариант заключается в создании эффекта с помощью монотонных небольших отклонений в цвете. Если вы начинаете с синего и добавляете оттенки зеленого и создаете схему, сине-зеленого цвета.
Монотонные цвета особенно популярны для мобильных приложений и мобильного дизайна.
Монотонные примеры: Так же, как с другими цветовыми палитрами, в монотонных схемах также необходимо использовать контраст. Смешивайте оттенки отличные от базового цвета. Начните с насыщенного (100%) и оттенками 50%, 20% и 8%.
Заключение
Единственная вещь, которая действительно заставляет плоский дизайн работать — это то, что тренд новый и интересный.
Создание цветовой палитры, которая соответствует тону Вашего проекта, показывает пользователям, как использовать Ваш сайт, это визуально интересно и весело. Обратите внимание не только на некоторые традиционные правила подбора цвета но и на собственные вкусы при создании плоских цветовых палитр.
Источник: lecaw.ru
Получи доступ к мастер-классам топовых спикеров и базе полезных материалов
skillsup.ru
Как выбрать цветовую палитру для дизайна вашего сайта | DesigNonstop
Цветовая палитра представляет собой набор цветов, используемых при разработке дизайна сайта. К выбору цветовой гаммы сайта предъявляются особые требования, поскольку цвета не только определяют внешний вид вашего сайта, но и будут также ассоциироваться с вашим брендом в интернете. Большинство палитр включает от 2 до 4 цветов, не считая белого и черного цвета. Давайте с помощью Webexpedition18 попробуем разобраться, как наилучшим образом создать цветовую палитру для сайта.
Выбираем основной цвет сайта
Для начала очень важно выбрать основной цвет. Поэтому, если у вас уже есть готовый логотип, то лучше в качестве основного использовать цвет, используемый в логотипе. Если же цвет приходится выбирать с нуля, то можно воспользоваться другим способом. Попробуйте проанализировать аудиторию вашего сайта с точки зрения возрастных или социальных цветовых предпочтений. Или воспользуйтесь информацией о психологии цвета и его воздействию на эмоциональное состояние.
Немного о цветовых моделях
Существует несколько способов описания цвета с помощью количественных характеристик. Однако, цвет — понятие сложное, и поэтому, в зависимости от прикладных нужд, цвет можно описать с помощью нескольких цветовых моделей. Рассмотрим наиболее распространенные из них.
Цветовая модель RGB
Наиболее распространена в веб-дизайне. Аббревиатура RGB означает названия трех цветов: Red (красный), Green (зеленый), Blue (синий). Его исходным цветом является черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатиричном коде перед которыми ставится символ #.
Цветовая модель CMYK
Эта модель характерна для полиграфии и печати. Аббревиатура CMYK означает названия четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Его исходным цветом является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.
Поскольку модель RGB охватывает больший цветовой диапазон, чем модель CMYK, то все изображения, предназначенные для печати и полиграфии, должны быть переведены из системы RGB в CMYK. Так, создавая логотип для сайта, используется одна система (RGB). А для печати визиток и фирменных бланков, используется CMYK модель.
Создаем палитру цветов
Как правило, дизайнеры пользуются традиционным цветовым кругом для определения цветовой палитры для сайта. Цветовой круг из 12 цветов был изобретен Исааком Ньютоном еще в 1666 году. Существует ряд цветовых комбинаций, выбираемых с помощью круга, которые практически всегда смотрятся гармонично. Рассмотрим подробнее некоторые из них.
Монохроматическая палитра
В такой палитре используется только один цвет, но с разными значаениями насыщенности и яркости. Такие схемы аккуратны, благородны и действуют успокаивающе.
На приведенных ниже примерах, можно использовать первый цвет, как основной. Второй цвет для текста или бэкграунда. Третий цвет для беграунда или текста. А четвертый и пятый для различных графических элементов и акцентов.
Комплиментарная палитра
В этой гармонии используются два контрастных цвета с круга и из них выбирается один основной цвет. Остальные цвета в палитре — это производные по насыщенности и яркости от двух превоначальных цветов.
Так на приведенных ниже примерах третий и четвертый — это основные контрастные цвета. 1 и 2 — оттенки третьего, а 5 — оттенок четвертого.
Сплит комплиментарная палитра
Это разновидность предыдущей палитры, с той разницей, что один из контрастных цветов разделен на два соседних цвета.
Аналоговая палитра
Аналоговая палитра основана на трех цветах, следующих друг за другом на цветовом круге. Из них один цвет является основным, а два других вспомогательными.
Триадная палитра
Здесь используются три цвета, равноудаленные друг от друга. Из них один основной, а два других вспомогательные.
Палитра прямоугольник
В этой схеме используются две пары противоположных цветов. Эта схема достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.
Палитра квадрат
Эта схема аналогична предыдущей, но все четыре цвета равноудалены друг от друга. Также достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.
Сервисы по работе с цветом
Для выбора цветовой палитры очень помогает цветовой круг онлайн, который собственно и составляет все вышеперечисленные виды палитр на выбор. Также можно воспользоваться различными любопытными сервисами по работе с цветом. А можно использовать мои подборки с уже готовыми цветовыми палитрами, которые я делаю с помощью креативных работ художников и дизайнеров, цветных фотографий, с которых умная техника снимает готовые цветовые гармонии.
Используем контрастные цвета
Еще одно правило, о котором не следует забывать при выборе цветовой палитры для вашего сайта — это правило контраста. Важно выбирать цвета, которые обеспечат хороший контраст между текстом, изображениями и фоном. Например, цвета, наиболее удобные для чтения — это черным по белому или белом по черному. А вот оранжевый текст на коричневом фоне недостаточно контрастный, и скорее всего, создаст неудобства для читателей.
Дополнительные цвета
После того, как вы выбрали цветовую схему, обеспечили хороший контраст между текстом и фоном, осалось лишь выбрать вспомогательные цвета. Как правило, это оттенки ваших основных цветов. Эти цвета могут быть использованы при наведении на объект, в текстовых ссылках или декоративной тени у текста. Не следует перегружать сайт большим количеством цветов, это создаст ненужный хаос и отпугнет посетителей. Оптимально это 4-6 цветов на сайте.
PS. Постовой. А вы знаете, что два два человека : Мария aka Jakkonda и Олег S9 из Санкт-Петербурга ведут очаровательный Blog812 о Дизайне и Креативе. Авторы публикуют иллюстрации, фотографии, подборки уроков, вордпресс советы. Блог находится в стадии развития. Дружеская поддержка приветствуется.
www.designonstop.com