Как сделать свою цветовую палитру
Десять ресурсов для работы с цветом
Работа с цветом – зачастую непростой и трудоёмкий процесс. Ещё в средние века великие живописцы пытались найти идеальные цветовые сочетания. В наше время этим же занимаются не только художники, но и дизайнеры, стилисты, визажисты, фотографы и.т.д.
Людям свойственно с чем-либо ассоциировать каждый цвет, наделяя его неизменными свойствами. Например, мы говорим «синее море», хотя на самом деле его оттенки могут варьироваться от светло-голубого до серо-синего.
Интерпретация цвета зависит не только от нашего восприятия глазами, но и от нашего настроения. В связи с этим, очень важно, чтобы цвета, сочетающиеся между собой, с первого взгляда смотрелись гармонично.
В интернете имеется множество ресурсов, помогающих определить, какие цвета образуют цветовую гармонию. Они значительно упрощают процесс выбора нужного цветового решения. Представляем вам десять основных ресурсов для работы с цветом.
1. Adobe Kuler
Adobe Kuler – один из самых известных ресурсов для работы с цветом. Содержит огромную библиотеку готовых цветовых тем. Вы можете выбрать любую из них, или, загрузив, понравившееся изображение, составить собственную цветовую тему. Все темы можно отсортировать по оценкам, по популярности и по новизне. Каждая тема состоит из пяти цветов, которые сочетаются между собой по одному из правил цветовой гармонии.
Основная работа происходит в цветовом круге. Разделители между цветами как раз наглядно демонстрируют сочетание цветов по правилам гармонии. Перемещая разделители по кругу в разных направлениях, вы можете получить разный цвет, тон, насыщенность и яркость.
Несомненным плюсом Adobe Kuler является наличие его плагина в графическом редакторе Adobe Photoshop. То есть вы можете работать с Adobe Kuler он-лайн, либо используя программу Adobe Photoshop на своём компьютере.
2. ColorScheme
ColorScheme.ru – ещё один интересный ресурс для подбора цветов и составления, цветовых тем. Основная работа также проводится в цветовом круге. Выбрав один цвет, вы можете получить шесть вариантов гармоничных сочетаний с этим цветом: моно, контраст, триада, тетрада, аналогия и аналогия с акцентом. Получившуюся цветовую тему можно отрегулировать по яркости, насыщенности, контрастности, свету, тени и другим параметрам.
Помимо цветового круга, на этом ресурсе вы найдёте множество материалов по теории цвета, конвертер цветов из одной цветовой модели в другую, и даже уникальный справочник, в котором есть названия около тысячи оттенков, а также параметры их использования в веб-дизайне.
3. BigHugeLabs
BigHugeLabs – ещё один ресурс, на котором существует сервис Color Palette Generator, позволяющий подобрать цветовую палитру по изображению. Вы можете загрузить изображение с компьютера или прямо из социальных сетей (Фейсбук, Инстаграм).
После загрузки нажимаете «Create palette» (создать палитру) и получаете цветовую палитру. При этом каждому цвету в палитре будет присвоено название и специальный код. Полученную палитру вы можете скачать в формате ASE и использовать в дальнейшем для работы в Adobe Photoshop.
4. Pictaculous
Pictaculous.com – ресурс, позволяющий загрузить изображение и получить его цветовую схему. Несмотря на простоту использования, работать в Pictaculous очень удобно, так как он совместим с другими цветовыми сервисами: Kuler и COLOURLovers. Поэтому, помимо основной схемы изображения вы получите схемы, составленные этими сервисами.
Получившуюся цветовую схему можно сохранить через загрузчик Adobe Swatch, а в дальнейшем использовать для работы в Adobe Photoshop. Кроме того, можно отправить эту схему на свой eMail, что особенно удобно при работе в смартфоне.
5. COLOURlovers
COLOURlovers – ещё один полезный ресурс для работы с цветом, используемый как профессиональными дизайнерами, так и новичками-любителями. В библиотеке COLOURlovers около 2 млн цветовых палитр, созданных пользователями со всего мира.
Вы также можете создать свою цветовую палитру, загрузив любое изображение. Помимо создания палитры, вы можете использовать шаблоны и отдельные цвета. В шаблоны можно добавлять фигуры и линии разного типа и размера, а в конце раскрасить шаблон по своему вкусу.
COLOURlovers насыщен полезной информацией. Здесь вы можете найти свежие обзоры, новости, различные сообщества и группы, в которых обсуждается работа с цветом.
6. ColorCombos
ColorCombos – ресурс, созданный специально для дизайнеров и веб-разработчиков. Его с уверенностью можно назвать цветовой нирваной для желающих выбирать и тестировать разные цветовые сочетания.
Вы можете воспользоваться уже готовыми цветовыми темами, которые находятся в библиотеке цветов. Под каждой цветовой темой имеется html-код, который необходим при написании кода веб-страницы. Если нужно, вы можете составить собственную цветовую тему, зайдя во вкладку Combo Tester.
Помимо создания цветовых тем, на этом ресурсе имеется множество информации, полезной для начинающих дизайнеров, начиная от значений разных оттенков и заканчивая цветовым кругом.
7. ColorExplorer
ColorExplorer – многофункциональный ресурс с большими возможностями работы с цветом. Он был разработан специально для профессиональных дизайнеров. Набор инструментов данного ресурса позволяет не только подбирать цвета и составлять цветовые палитры, но и изучать популярные библиотеки цветов, объединять библиотеки, экспортировать палитры в такие программы, как Adobe Photoshop, Illustrator, InDesign и др.
Для того чтобы получить цветовую тему понравившегося изображения, следует загрузить его через вкладку Image Color Import. Вы увидите все цвета и оттенки (от 3 до 50), имеющиеся на данном изображении.
Очень интересно работать во вкладке Color Matching – это цветовой блендер, позволяющий изменять компоненты цвета с помощью значений RGBи HSL. Подобрав необходимую цветовую палитру, вы можете добавить её к уже существующей, либо сделать замену, ну, и как вариант, сохранить в своих палитрах My Palettes.
8. ColoRotate
ColoRotate – уникальный ресурс для работы с цветом. Он отличается от других тем, что имеет трёхмерную цветовую модель в виде конуса и возможностью генерировать более пяти цветов в одной схеме.
Цвета словно оживают, потому что в объёмном виде мы визуализируем их иначе. Поэтому, используя ColoRotate, вы можете сразу увидеть многоаспектный характер цветов и отношения между ними. Вы можете редактировать цвета в 3D, смешивать между собой, выделять их из изображения, изменять значения в различных пространствах цветов, генерировать гармоничные цветовые схемы.
ColoRotate прекрасно работает самостоятельно или в паре с Adobe Photoshop. Также он доступен в качестве приложения для iPad.
9. ColRD
ColRD – яркий и красочный ресурс для работы с цветом. Здесь вы найдёте огромную библиотеку цветов и оттенков, палитр, градиентов, принтов, составленных другими пользователями. Это неиссякаемый источник вдохновения, который создаёт настоящий праздник для цветового восприятия.
Вы можете перейти во вкладку Create и создать собственный цвет, палитру или градиент, меняя значения RGB и HSL. Или же, загрузив готовое изображение, разбить его на цвета и оттенки, а впоследствии использовать их при создании нужной цветовой схемы.
10. Яндекс
И, наконец, самый простой способ работы с цветом – это ввести его название в Яндекс. В результате поиска, в самом вверху страницы, вы увидите табличку, в которой будет нужный вам цвет и соседствующие с ним оттенки. Помимо этого, Яндекс показывает шестнадцатеричный код цвета, его параметры в RGB и HSV.
Таким же образом, зная только код цвета, вы можете найти в Яндексе его название и увидеть, как он выглядит. Конечно, определить цвет по коду можно в любом графическом редакторе, но не забывайте, что для этого понадобится гораздо больше времени.
Автор: Екатерина Малярова
Имиджмейкер, создатель тренингов по имиджу и стилю, автор сайта Гламурненько.ru. С 2007 года свыше 500 клиентов сходили со мной на шоппинги. Более 5000 человек проходили тренинги и семинары по имиджу и стилю.
Как сделать цветовую палитру для сайта и не только (алгоритм + советы)
В Дизайн Мании уже было несколько публикаций с похожей тематикой: в заметке про сервисы подбора цветов для сайтов кроме ресурсов вдохновения рассмотрели парочку полезных веб-инструментов; также был пост с обзором генераторов палитр и т.п. Однако без понимания логики как сделать цветовую палитру все они могут оказаться малоэффективными. Сегодня постараемся заполнить данный пробел и прояснить некоторые теоретические моменты, хорошо описанные в этой заметке.
Те из вас, кто уже пользовались новомодными онлайн-генераторами, в курсе их принципа работы: сначала вы выбираете какие-то базовые значения, настраиваете ряд параметров (названия которых напоминают какие-то музыкальные термины), а затем в качестве результата получаете список 4-5оттенков, рекомендуемых для разработки веб-проектов.
Подобный технический и отчасти автоматизированный подход кажется, на первый взгляд, невероятно интересным и прогрессивным, однако на деле все получается не столь оптимистично. Конечно, если вам не хочется видеть свой сайт/приложение примерно таким:
Что нужно для создания палитры цветов
Вполне очевидно, что вы не сможете реализовать полноценный стоящий проект, используя всего пять HEX кодов веб-цветов. Вам нужен более широкий набор элементов для создания идеального работающего прототипа.
Давайте разделим нашу палитру на три группы.
Оттенки серого
Тексты, панели инструментов, фоны и др. – в большинстве интерфейсов почти всегда они серые.
Не исключено, что в вашем случае понадобится намного больше вариантов серого. Поначалу кажется, что 3-4 — это более, чем достаточно, однако вскоре вам захочется, например, добавить элемент чуть темнее №2, но немного светлее №3 и т.п.
Практика показывает, что для полноценного результата будет достаточно 8–10 сероватых оттенков — это не так много, дабы вы ударялись в крайности и мучились при выборе, но в то же время вполне достаточно, чтобы не так часто идти на компромиссы.
Как правило, чистый черный выглядит немного неестественно, советуем начинать с самого насыщенного темно-серого, а затем шаг за шагом переходить к белому.
Основной цвет(а)
В большинстве сайтов будет достаточно двух базовых цветов, которые по сути, и формируют общий вид интерфейса – так Facebook ассоциируется у нас с синими оттенками, хотя в действительности в дизайне там чаще встречаются серые.
По аналогии с предыдущим пунктом дабы сделать хорошую цветовую палитру вам потребуется 5–10 вариантов, дающих бОльший выбор при проектировании внешнего вида: оттенки посветлее можно применять в качестве фона для оповещений; в то время как темные прекрасно подойдут для оформления текстов.
Цвета для акцентов
Кроме базовых, любому веб-интерфейсу требуется несколько визуальных «акцентов», позволяющих обращать внимание на ту или иную важную информацию. Вы можете использовать такие привлекающие внимание решения, как цвет морской волны, розовый, желтый и др.:
Вам также понадобятся способы демонстрации определенных событий и состояний. Допустим, красным будете выделять важную/критичную информацию и сообщения о возможных опасных последствиях выбираемого действия:
…желтый (по аналогии со светофором) будет предупреждать посетителей:
…а с помощью зеленого сможете выделить положительную динамику:
Хотя в пользовательском интерфейсе эти цвета должны применяться довольно умеренно, вам желательно проработать по несколько оттенков каждого из них.
Если при разработке сайта/приложения вам надо создать цветовую палитру для классификации или различения похожих объектов (календарных событий, тегов, линий графиков и т. д.), то, возможно, вам потребуется больше акцентов. При создании сложных или нестандартных UI-интерфейсов нередко берется до 10-ти различных цветов с 5-10 полутонами у каждого.
Прежде всего, решите, какие оттенки вам нужны
Если для вашей задачи понадобятся более светлые или темные тона, не стоит прибегать к помощи CSS настроек «lighten» или «darken», генерирующих результаты на лету. В итоге они дают довольно широкий диапазон значений, что лишь слегка отличаются между собой. Дабы избежать подобных проблем, сначала составьте свой набор оттенков, которые собираетесь применять в работе.
Но как сделать палитру цветов подобную этой?
Начните с основного цвета
Выбранный вами «основной цвет» для той гаммы, которую вы хотите получить, будет располагаться посредине, а более светлые/темные создаются исходя из него.
В действительности не существует научного способа, который помог бы это реализовать, хотя есть одно хорошее правило — выбирайте такие базовые и акцентные оттенки, которое можно удачно использовать в качестве фона кнопки.
В этом вопросе нет каких-то определенных правил, у каждого цвета есть свои особенности, поэтому зачастую вам придется полагаться на свои глаза/опыт, тем более, что в разных странах UI дизайн отличается.
Определите крайние оттенки в палитре
Следующий шаг – подбор самого светлого и темного решения. Опять же тут нет строгой методики, вам поможет такой совет: подумайте, где вы собираетесь их использовать, и уже исходя из этого, сделайте свой выбор.
Самые темные цвета, как правило, предназначены для текста, в то время как с помощью светлых часто оттеняют фон того или иного элемента. Хорошим примером послужит простой блок оповещения, изображенный на картинке ниже, где присутствуют сразу оба крайних варианта.
Возьмите ваш основной цвет и начинайте корректировать его насыщенность/яркость до тех пор, пока результат вас не удовлетворит.
Заполняем пробелы
Как только подберете базовые/крайние значения, вам останется лишь заполнить «пробелы» между ними. При создании веб-сайтов и онлайн-интерфейсов требуется как минимум по 5 оттенков каждого цвета. В идеале можно дотянуть их количество до 10-ти, чтобы не слишком ограничивать себя в дальнейшем.
Кстати, девять – довольно удобное число, отлично подходит при разделении/заполнении всех оттенков. Для удобства назовем наиболее светлый вариант – 100, основной – 500, а максимально темный – 900. Затем начинаем подбирать оттенки 300 и 700 – те, что находятся в центре между базовыми. Они должны выглядеть как идеальные промежуточные решения.
Теперь (также как и выше) надо заполнить еще четыре пробела в текущей цветовой гамме.
В итоге у вас должна получиться сбалансированная модель, с помощью которой вы сможете реализовать свои дизайнерские идеи, не ограничивая полет фантазии.
Что с серым цветом?
Если вы работаете с серой гаммой, то основной оттенок не так важен, а в во всем остальном подбор полутонов выполняется точно так же: начните с крайних значений, а затем заполняйте оставшиеся промежутки до тех пор, пока не добьетесь того, чего хотите.
Выберите максимально темный-серый исходя из того, насколько темным может быть текст в вашем проекте. Тогда наиболее светлый элемент подбирайте с учетом того, насколько хорош он будет в качестве ненавязчивого фона.
Это не точная наука
Как бы заманчиво это не было, но создать цветовую палитру идеальной, полагаясь исключительно на математические расчеты, невозможно. Систематизированный алгоритм, описанный выше, при подборе оттенков хорошо работает на начальном этапе, но не бойтесь вносить коррективы, если они потребуются.
Как только вы начнете пользоваться подобранной гаммой, вам неизбежно захочется внести какие-то изменения: добавить насыщенности цветам или сделать их на пару тонов темнее/светлее. Полагайтесь на свои глаза, а не на цифры!
Небольшой совет: по возможности старайтесь не расширять палитру слишком часто. Если не будете разумно ограничивать свою фантазию в данном вопросе, то не получите сбалансированный итоговый результат.
· Инструмент для подбора цветов и генерации цветовых схем ·
Схема:
Насыщенность/Яркость
Схема:
Контрастность
Выбранный Вариант:
Насыщенность/Яркость
Постоянный адрес текущей цветовой схемы:
Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.
Также монохроматические вариации сделаны для каждого цвета в других схемах.
Не следует злоупотреблять контрастными цветами в дизайне, используйте их только как цветовой акцент.
Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.
Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.
Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.
Будьте осторожны: из-за ошибки округления во время преобразования, значение RGB, используемое в цветовой схеме, может немного отличаться от введенного значения.
Появилась удобная возможность поделиться цветовой палитрой с друзьями и коллегами, используя готовые коды для вставки картинки на форум или в блог.
Как создавать пользовательские цветовые палитры в PowerPoint
Выбор цветовой палитры презентации PowerPoint — непростая задача! Вы должны искать цветовые сочетания, которые дополняют друг друга и привлекают внимание к содержанию презентации. Выбор цветовой схемы для презентации PowerPoint — целое искусство, требующее практики и знаний в области дизайна. К счастью существует множество онлайн-ресурсов, а также наше практическое руководство, для того, чтобы вы могли создать идеальную цветовую палитру в PowerPoint.
Краткая теория цвета
Правильное использование цвета — это одновременно и наука и искусство. Дизайнеры тратят кучу времени на изучение того, как наилучшим образом будут гармонировать цвета между собой. Мы представим лишь самые основные и важные сведения.
Цветовой круг — идеальное изобретение, помогающее лучше определиться с цветовой палитрой для презентации PowerPoint. Его изобрел еще Исаак Ньютон и на протяжении нескольких веков цветовой круг являлся основным инструментом в работе художников.
Цветовой круг простой и быстрый способ определиться с цветами, которые будут хорошо сочетается друг с другом. Например, цвета, которые находятся рядом друг с другом, сделают презентацию гармоничной. Если требуется высококонтрастное сочетание, то выберите цвета, расположенные на противоположных концах цветового круга.
К счастью сегодня существуют десятки бесплатных генераторов цветовой палитры. Например, сервис Colorscheme автоматически создаст гармоничную цветовую схему для презентации PowerPoint, после того как вы определитесь с базовым цветом.
Цвета и оттенки
Первичных цветов всего три: красный, желтый и синий. А все остальные цвета — результат смешения трех основных. Например, если смешать желтый и синий, то получится зеленый цвет.
Оттенок — это разновидность какого-то из основных цветов, различающихся яркостью, насыщенностью, преобладанием светлого или темного оттенка. Например, пастельно-розовый — оттенок, который происходит от смешения красного и белого цвета. В будущем умение распознавать оттенки поможет вам воссоздавать цвета и находить идеальные сочетания.
Теплые и холодные цвета
Первичных цветов всего три: красный, желтый и синий. А все остальные цвета — результат смешения трех основных. Например, если смешать желтый и синий, то получится зеленый цвет.
Оттенок — это разновидность какого-то из основных цветов, различающихся яркостью, насыщенностью, преобладанием светлого или темного оттенка. Например, пастельно-розовый — оттенок, который происходит от смешения красного и белого цвета. В будущем умение распознавать оттенки поможет вам воссоздавать цвета и находить идеальные сочетания.
№3. Фон в виде сети связанных элементов
Когда речь заходит о теории цвета, важно различать теплые и холодные оттенки. Для этого нужно разделить цветовой круг пополам.
Красные, оранжевые и желтые оттенки относятся к категории теплых цветов. А фиолетовые, синие и зеленые — холодные цвета.
Теплые цвета, как правило, яркие и отлично подходят для передачи радости и энергии. Холодные цвета, с другой стороны, являются более успокаивающими, расслабляющими цветами.
6 основных советов по работе с цветом в презентациях PowerPoint
Правильная цветовая гамма — один из аспектов успешной презентации, ведь когда упаковка проекта выглядит органичной и привлекательной, то сами тексты и информация в презентации воспринимаются намного лучше и проще. Чтобы создать профессиональные и чистые презентационные слайды, жизненно важно использовать правильную цветовую гамму.
1. Придерживайтесь одной цветовой схемы
Для упрощения поиска идеального сочетания цветов уже было разработано несколько принципов подбора цветовых схем. Одна из самых простых — это Монохромная цветовая схема, которая предполагает использование различных оттенков одного цвета. Все оттенки отлично сочетаются друг с другом и создают успокаивающий эффект.
В этой презентации мы использовали коричневый цвет в качестве основного цвета, сочетая его с белым, серым и черными элементами. Такой прием помог создать дополнительный акцент на фотографиях продукции.
Также существует аналоговая цветовая схема, в которой используются родственные цвета, то есть те, что расположены в цветовом круге рядом друг с другом. Выбираем один доминирующий цвет и используем один-два дополнительных цвета.
В презентации для VR MED мы выбрали именно такую цветовую схему, создав слайды в сочетании синего и зеленого цветов.
И третья популярная цветовая схема — Комплементарная, основанная на использовании контрастных (противоположных) цветов. Такую схему чаще всего берут для привлечения внимания и выделения контрастных деталей.
Пример такой цветовой палитры можно найти в нашей презентации для компании «Гидроснаб». В качестве основных цветов выбрали желтый и синий цвета, которые расположены на противоположных сторонах цветового круга.
№2 Придерживайтесь простых цветовых гамм
Если вы не опытный дизайнер, то создавайте простые цветовые схемы. Монохромная цветовая схема является хорошей отправной точкой для новичков, так как в ней очень сложно ошибиться, ведь все возможные цветовые комбинации будут прекрасно смотреться на любых слайдах.
Вы просто работаете с одним цветом и используете различные оттенки и тона, а для разбавления слайдов и увеличения количества «воздуха» добавляете белые, серые и черные акценты.
Для более продвинутых дизайнеров (которые еще не считают себя экспертами) рекомендуется использовать не более 4 цветов. Будет не просто сбалансировать 4 различных цвета, которые, скорее всего, относятся как к теплым, так и к холодным цветовым категориям.
Работая с несколькими цветами нужно выбрать доминирующий оттенок, а остальные использовать в качестве вспомогательных и акцентных цветов.
3. Применяйте в работе онлайн-инструменты
Не нужно делать все самостоятельно и подбирать сочетания цветов на глаз. Существуют сотни ресурсов, которыми можно пользоваться, чтобы упростить процесс проектирования. Онлайн-генераторы цветовых схем отлично справляются со своей задачей, особенно если вы недостаточно уверены в своих дизайнерских способностях.
Вам просто нужно выбрать цвет, тип цветовой схемы и вы сразу получите другие цвета, которые хорошо будут с ней сочетаться. А также при работе над дизайном презентаций PowerPoint пипетка — ваш лучший друг. Копируйте цвета с помощью пипетки для того, чтобы облегчить свою жизнь и получить именно тот оттенок, который вам нужен.
Сервисы для генерации цветовых схем:
№4. Применяйте высококонтрастные цвета
Контраст важен в слайдах презентации. Необходимо чтобы аудитория могла читать все, что написано на ваших слайдах. Вам нужно использовать цветовую схему, которая выделит ваш контент. Не используйте светлые цвета для текста, если на ваших слайдах белый или светлый фон.
А также помните, что если вы хотите использовать дополнительные контрастные решения для выделения акцентов, то в этом случае фон должен быть нейтрального цвета, например, белый, черный или серый.
№5. Следуйте правилу 60-30-10
Эти рекомендации актуальны тогда, когда вы используете в презентации более 3х цветов.
№6. Учитывайте особенности своего бизнеса
И последняя вещь, о которой следует помнить при работе с цветами в презентации. Важно сосредоточиться на своем бренде!
Бизнес-презентации во многом являются визитной карточкой для вашей аудитории. Это первое, что потенциальные клиенты и инвесторы увидят, поэтому это отличная возможность произвести первое положительное впечатление.
Дизайн слайдов презентации PowerPoint может передать гораздо больше, чем вам кажется. Потратьте дополнительное время, чтобы спросить себя: какова миссия и видение вашей компании? Какие идеи и ценности вы хотите, чтобы ваша аудитория связывала с вашим брендом?
Яркие теплые цвета лучше всего подходят для передачи таких вещей, как творчество, радость и молодость. Прохладные цвета, такие как синий, черный и серый, скорее сделают вашу презентацию более сдержанной и элегантной!
Учитывайте интересы своей целевой аудитории и думайте о том, как будет восприниматься ваш бренд. Например, если вы продвигаете лавку полезных и здоровых продуктов питания, то имеет смысл использовать приятный зеленый оттенок. Да, этот цвет есть уже во многих торговых марках. Но гораздо лучше в этом случае заморочиться над оригинальностью логотипа, чем сделать вырвиглазный красный цвет своим фирменным, чтобы отстроиться от конкурентов.