Как управлять вниманием пользователя на сайте? Как подбирать правильные цвета для сайта? С помощью какого приложения узнать код цвета на сайте конкурента? Разбираем сегодня в статье.
Сервисы по определению цветовой схемы
- color-hex.com — определит какие цвета стоят рядом с вашим цветом
- thestocks.im — агрегатор мокапов, видео, фотографий, иконок, шрифтов.
- Eye Dropper — расширение для Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
- Adobe Color CC -подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
- Colorzilla -расширение для Google Chrome и Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.
Подбор цвета
Загрузите картинку и сделайте из нее палетку.
- Coolors.co — ресурс с палитрами, которые можно создавать самим или заимствовать из коллекци
COLOURlovers — к оммьюнити цветовых фанатов, которые делятся палитрами, цветами, фонами и графическими шаблонами. Здесь есть цветовые тренды из интерьеров, журналов, сайтов и даже уличной моды. В разделе «Browse» можно найти авторские цвета и палитры и скачать фоны для презентации.
Как выбрать цвет для сайта
Нельзя судить книжку по обложке, а вот судить веб-сайт по его дизайну - точно можно. Люди обычно оценивают и судят о продуктах и веб-сайтах по их внешнему виду, еще до того, как смогут понять их функциональность и пользу.
При брендинге цвета имеют более прямые значения, чем в общем понимании. Их можно кратко описать в нескольких словах, так что вот список для вас:
- Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
- Белый. Простой, спокойный и чистый.
- Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
- Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
- Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
- Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
- Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
- Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
- Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.
Черный
Цвет имеет большое количество значений. Он ассоциируется с трагическими ситуациями. Все зависит от того, как вы его используете, и какие цвета идут с ним. Черные хорошо сочетаются с любым другим цветом, поэтому он идеально подходит для фона. Дизайнеры часто используют его для установки контрастов.
Белый
Цвет означает чистоту и невинность, а также целостность и ясность. Белый часто ассоциируется с чистым листом бумаги, побуждающим людей генерировать новые идеи. Однако слишком много белых может вызвать чувство изоляции и пустоты. В дизайне белый цвет обычно используется в качестве цвета фона, особенно для ресурсов, для которых читаемость является важной частью.
Красный
Цвет обычно ассоциируется со страстными, сильными или агрессивными чувствами. Он символизирует как хорошие, так и плохие состояния, включая любовь, уверенность, страсть и гнев. В дизайне использование красного цвета — эффективный способ привлечь внимание пользователей.
Оранжевый
Это энергичный и теплый цвет, вызывающий чувство волнения. Дизайнеры используют цвет, если им нужно мотивировать на действие.
Желтый
Это цвет счастья, который символизирует солнечный свет, радость и тепло. Желтый, как полагают, самый легкий цвет и он имеет один из самых сильных психологических значений. Пользователи, видящие желтые цвета в дизайне, могут почувствовать вдохновение и уверенность. Хотя, вы должны помнить, что слишком много желтого цвета может вызвать негативные реакции, такие как чувство тревоги или страха.
Зеленый
Его часто называют цветом природы, баланса и гармонии. Зеленый приносит успокаивающие и обновляющие чувства. Кроме того, это признак роста и неопытности. Он имеет больше положительной энергии, чем большинство других цветов, но иногда он ассоциируется с материализмом. Дизайн в зеленых тонах идеально подходит для продуктов, связанных с природой.
Синий
Цвет доверия. Он обычно показывает надежность, успокаивает.
Пурпурный
Долго ассоциировался с богатством, поскольку многие короли носили фиолетовые одежды, это полезно для представления некоторых роскошных продуктов. Это также цвет тайны и магии. Он смешивает энергию красного и синего, поэтому он имеет баланс сил и стабильности. Большая концентрация цвета может отвлечь внимание пользователей.
Розовый
Это цвет чувствительности и романтики. Розовый намного мягче красного, поэтому он создает чувство безусловной любви. Розовый очень сильно связан с женственностью, поэтому он может быть эффективным цветом, если целевой аудиторией являются в основном девушки.
Коричневый
Дизайнеры обычно используют коричневый цвет в качестве фона в различных оттенках, от очень светлого до глубокого. Это приносит ощущение тепла и комфорта. Кроме того, он может использоваться для демонстрации опыта и уверенности.
Влияние цвета на покупку товара
Исследование проводилось в Северной Америке.
Любимые цвета
Нелюбимые цвета
Цветовые модели
- CMYK: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» - черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки. Используется в живописи и печати.
- RGB-модели: red, green, blue - красный, зеленый, синий. Используется в компьютерах, телевизорах и других электронных устройствах
Монохроматический
Он основан на одном цвете с различными оттенками. Монохроматическая палитра всегда является выигрышным выбором, так как трудно совершить ошибку и создать неприятную цветовую схему.
Аналогичные (Analogous Colors)
Чтобы создать аналогичную гармонию, используйте цвета, находящиеся рядом на цветовом круге.
Complementary
Дополнительной схемой является сочетание цветов, расположенных друг напротив друга на цветном колесе. Эта схема противоположна аналогичной и монохроматической, поскольку она направлена на достижение высокой контрастности. Например, оранжевую кнопку на синем фоне трудно пропустить в любом интерфейсе.
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
Выбор цветовой палитры задача всегда сложная, будь то дизайн веб-сайта или мобильного приложения. Не стоит выбирать цвета спустя рукава, ведь качественно подобранная палитра задает стиль всему сайту.
Каждый раз при разработке нового веб-дизайна много времени уходит на выбор различных цветовых комбинаций. Альтернативные инструменты цветовой палитры помогут в будущем сэкономить вам время.
Существует большое количество приложений для подбора цветовой палитры, но в этом списке были отобраны инструменты, несколько отличающиеся от стандартных программ.
Сайт с говорящим названием, где собрана и подробно представлена информация о цвете. Он больше похож на инструмент разработчика, где есть и сложения и вычитания, доступно создание градиентов с точным указанием кода цвета во всех возможных цветовых пространствах. Такой подход удобен для тех, у кого есть свободное время, а так же необъяснимая любовь к вычислениям.
Дружелюбный и теплый «ламповый» сервис, который радует с первой минуты знакомства. Логика сайта заключается в том, что вы выбираете «один цвет», и сервис предлагает подходящие для него решения: градиент, разбег по самому темному и светлому оттенку, чуть приглушенные или яркие оттенки выбранного цвета.
В отличие от предыдущих сервисов, данный сайт демонстрирует уже готовые подобранные палитры, на которых отражено, как цвета взаимодействуют друг с другом на прикрепленных фотографиях. Рассматривая морские волны или цветы, поражаешься, как богата природа в своём творческом порыве, и как скудны наши познания в цвете. В целом, это ценный ресурс для тех, кто только начинает разбираться в цветовых сочетаниях и любит красивые картинки.
Как описывает автор свой ресурс: «я сделал сайт 0to255, чтобы упростить свою работу». Веб-дизайнеры и люди схожих профессий работают с цветами каждый день. Выбирая нужный, им необходимы его различные оттенки, а используя данный сервис можно легко сэкономить время, не обременяя себя редактированием шестнадцатеричного кода.
Решение для тех, кто любит находить цвета в изображениях. Достаточно загрузить изображение и сервис выдаст палитру основных цветов с шестнадцатеричным кодом.
Кому может понадобиться приложение по подбору цветовых решений для планшета? Вероятно тем, кто не просто работает с цветом, а живет с ним, или людям со способностью к синестезии. Сайт же предлагает, схожий, но немного урезанный функционал интерфейса, разработанный для планшета. К сожалению, на сайте имеются недоработки, например, 3D спектр, который является фишкой сайта, на деле оказывается неудобным в использовании.
В американских сериалах, часто говорят фразу «Только если бы ты был последним мужчиной на земле», в нашем же случае «Если нет любого графического редактора под рукой». Сухо, обычно, неинтересно. Нет в нём ни шарма, ни желания взаимодействовать, видимо, продукт давно не развивают.
Сложно назвать этот сайт простым, ведь создатели уместили в него всё, что могло бы понадобиться при работе с цветом. Здесь есть все: большой выбор подборок, каналов, тренды, различного вида инструменты для создания паттернов, поиск цветов по изображению. В общем, всё, что душа пожелает.
Подведём итог:
Несмотря на разнообразие сервисов по выбору цветов, всё же Adobe Kuler, по мнению нашей редакции, можно назвать лучшим, если судить по возможности выбора цветовых сочетаний.
Одним из основных преимуществ данного миксера цветов является возможность сохранять свои подборки, просматривать выбранные цвета на весь экран, а так же делиться своими находками и смотреть чужие. А для тех, кто уже не хочет расставаться с данным сервисом ни на минуту, существует плагин для Photoshop, который позволяет пользоваться программой без отрыва от редактора.
Дизайнеру в цифровую эпоху, конечно, не нужно ограничиваться цветами, которые можно получить из красок, чернил или других пигментов, хотя из подхода к колеру в произведениях изобразительного искусства тоже можно многое извлечь. Человеческий глаз может различать миллионы различных оттенков, но иногда даже сочетание двух цветов может оказаться сложной задачей.
Удивительные свойства цвета
Это происходит потому, что выбор оттенков для дизайна весьма субъективен и требует определенных знаний. Так что же делать дизайнерам, которые хотят составить красивую цветовую палитру, способную сделать клиента счастливым? Хотите вы этого это или нет, но лучшие сочетания цветов выходят за рамки просто личных предпочтений, так как они обладают удивительной способностью влиять на настроение, эмоции и восприятие, приобретать культурное и персональное значение и привлекать внимание - как сознательно, так и подсознательно.
Задача дизайнеров и маркетологов состоит в балансировке комплексных функций оттенков для создания привлекательной и эффектной палитры сочетания цветов. Вот здесь и пригодится базовое понимание теории цвета. Она может помочь понять, какие тона хорошо сочетаются (или нет) и какой эффект создадут различные комбинации в рамках данного дизайна.
сочетание цветов
В школе на уроках рисования дети проходят эту тему, поэтому каждый, наверное, знаком с его урезанной формой: красным, желтым и синим основными тонами. Традиционный цветовой круг состоит из 12 тонов и часто используется художниками. Это простой визуальный способ понять взаимоотношения цветов.
Основная задача, которую выполняет цветовой круг, - сочетание цветов. Смешивание базовых или первичных оттенков (желтого, синего и красного) образует вторичные: зеленый, фиолетовый и оранжевый. Комбинация их с основным тоном позволяет получить третий уровень круга - третичные цвета. К их числу относятся красно-оранжевый, зелено-синий, сине-фиолетовый и фиолетово-красный. Первичные и вторичные тона являются частью видимого спектра, или цветами радуги. Их порядок легко запомнить с помощью мнемонической фразы «Каждый охотник желает знать, где сидит фазан»: красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый.
Такой способ понимания цвета известен как субтрактивная модель, которая заключается в смешивании пигментов, таких как краски или чернила, и используется как в традиционном цветовом круге, так и в системе CMYK, применяемой в полиграфическом оборудовании. Она отличается от аддитивной модели, которая заключается в смешивании света разной частоты (например, на экране компьютера или телевизора), состоящего из другого набора красного, зеленого, синего (RGB).
В графических редакторах используется другая версия цветового круга. Любой оттенок можно выбрать, используя его шестнадцатеричный код.
Терминология
Перед составлением палитр необходимо освоить терминологию, которая поможет понять различные типы оттенков:
- цветовой тон - синоним цвета и традиционно относится к одному из 12 цветов;
- яркость: степень удаленности цветового тона от черного цвета;
- светлота: близость тона к белому цвету;
- насыщенность - интенсивность или чистота цвета (чем ближе оттенок приближается к серому, тем менее он насыщен).
Лучшие сочетания цветов
Из цветового круга можно выделить ряд классических палитр, использовавшихся художниками на протяжении многих веков. Для большинства дизайнерских решений из этих схем должен быть выделен один доминирующий цвет - по количеству его использования или по его выделению из других тонов - одного или нескольких акцентов:
1. Монохромная схема: использование различной яркости, светлоты или насыщенности тонов одного цвета в диапазоне от светлого до темного. Пример удачного монохромного сочетания - красный с черным и белым. Эта схема обеспечивает тонкий и консервативный дизайн. Синий с белым - классическая комбинация китайского фарфора IX в. и французского текстиля XVIII в.
2. Аналогичная расположенные бок о бок на цветовом круге. Является универсальной, и ее легко применять при разработке проектов. Примером может служить сочетание фиолетового с сине-фиолетовым.
3. Дополняющая схема: используются тона, расположенные в противоположных концах цветового круга. Например, синий и оранжевый, красный и зеленый. Комплементарные цвета обладают высокой интенсивностью и контрастностью, но их сложно применять гармонично и сбалансированно в их чистом виде, т. к. они могут легко столкнуться в дизайне.
4. Сплит-комплементарная схема: любой тон цветового круга плюс два цвета, граничащие с его дополнением. Например, желтый с зеленым и красно-фиолетовым. Эта схема также обладает сильным визуальным контрастом, хотя и более слабым, чем предыдущая. Обеспечивает лучшие сочетания цветов для новичков в дизайне, так как ее сложно испортить.
5. Триадная схема: любые три тона, равномерно распределенные на цветовом круге. Обеспечивает довольно яркие сочетания, даже если тона бледные и ненасыщенные. Для успешного использования необходимо добиться полного баланса - один цвет должен стать доминирующим, а два других - акцентами.
6. Тетрадная, или двойная комплементарная: состоит из двух комплементарных пар. Данная схема чрезвычайно привлекательна, но более сложна в применении, чем одна пара дополнительных цветов, т. к. большее число тонов сложнее сбалансировать. При использовании этой схемы следует выбрать один цвет в качестве доминирующего и регулировать насыщенность, яркость и светлоту оттенка некоторых или всех тонов, чтобы они обеспечивали лучшие сочетания цветов в разных частях дизайна.
Вдохновение
В дополнение к комбинациям цветового круга природа предлагает множество готовых решений гармоничных цветовых схем.
Варианты сочетания цветов включают учет их температуры (горячие или холодные), насыщенности (яркие тона часто выглядят молодо, в то время как бледные - винтажно), настроения (яркие и веселые, темные и серьезные), темы (местоположение, сезон, праздник) и других качеств.
Другой замечательной техникой поиска цвета может стать обращение за вдохновением к различным историческим периодам и художественным течениям: теплые, светлые тона импрессионистов; яркие, неожиданные комбинации постимпрессионистов; мягкие, землистые цвета стиля модерн; яркие, смелые оттенки поп-арта.
Психология цвета
Цвет окружает нас. Понимаем мы это или нет, но он играет большую роль в нашей повседневной жизни. Вы видели на дороге сегодня оранжевый или желтый дорожный знак? Он неспроста привлек внимание. Цвет имеет удивительную связь с нашими настроениям и эмоциями.
Но не все ощущают цвет одинаково. Смысл и символика, которые у нас ассоциируются с разными тонами, очень зависят от влияния культурных и социальных групп, к которым мы принадлежим. Вот некоторые общие значения, связанные с основными цветами в западной культуре.
Красный
Этот цвет передает множество различных идей в зависимости от контекста. Ассоциируясь с огнем, он может символизировать тепло или опасность. Поскольку красный - это цвет крови, он считается энергичным, живым тоном, поэтому связан с сердечными делами, а иногда и с насилием.
Альтернативные значения: в некоторых восточных культурах красный символизирует удачу и процветание и является цветом, который носят невесты в день свадьбы. Во всем мире красный ассоциируется с различными политическими движениями и символизирует революцию.
В брендинге: часто обозначает силу, уверенность и власть и является очень заметным.
Оранжевый
Также являясь цветом огня, оранжевый сочетает теплоту красного с бодростью желтого и символизирует активность, энергию и оптимизм. Кроме того, связан с урожаем или осенью.
Альтернативные значения: в Индии шафран, который обладает желтоватым оттенком оранжевого, считается священным. В Японии цвет символизирует любовь.
В брендинге: часто представляет молодость и творческие способности. Золото, которое также является оттенком оранжевого или желтого цвета, символизирует роскошь и высокое качество.
Желтый
Как цвет солнца, он часто символизирует счастье, жизнерадостность, дружелюбие и свежесть весны. Кроме того, в определенных контекстах он может передавать сигнал предупреждения или предупреждать об осторожности. Некоторые вариации (особенно ненасыщенный и с зеленоватым оттенком) выглядят болезненными или неприятными, что не удивительно, т. к. исторически желтый иногда ассоциируется с болезнью и карантином.
Альтернативные значения: в некоторых восточных и азиатских культурах желтый ассоциируется с высоким происхождением или статусом. В некоторых частях Африки и Латинской Америки этот тон является традиционным цветом траура.
В брендинге: чистый или ярко-желтый тон привлекает внимание, но может вызывать тревогу или даже быть плохо заметным (например, белый текст на ярко-желтом фоне или наоборот), если его использовать неосторожно.
Зеленый
Это цвет природы, растительности и роста. Он часто символизирует здоровье, свежесть, или природные качества. Темно-зеленый может представлять богатство и стабильность.
Альтернативные значения: среди культур, исповедующих ислам, зеленый является священным цветом. Также он ассоциируется с Ирландией, Днем святого Патрика и счастливым четырехлистником.
В брендинге: бренды или товары, представляемые как «зеленые» (натуральные, здоровые, экологически чистые, органические и т. д.), часто используют природные цвета, такие как зеленый и коричневый.
Голубой
Цвет моря и неба, он часто символизирует мир и чистоту. В отличие от более энергичных и теплых тонов, голубой воспринимается как успокаивающий. В некоторых случаях он может представлять печаль или депрессию.
Альтернативные значения: в ближневосточных культурах голубой традиционно защищает от зла. Из-за своей ассоциации с небом, во многих культурах цвет символизирует бессмертие и духовность.
В брендинге: голубой широко используется и является одним из наиболее универсальных цветов. Обычно он символизирует надежность, безопасность и стабильность. Тон особенно популярен в корпоративных контекстах, поскольку воспринимается как обладающий серьезными, консервативными и профессиональными качествами.
Фиолетовый
Традиционно ассоциируется с благородством, величием или честью. Таким образом, он обладает духовными, мистическими или религиозными коннотациями.
Альтернативные значения: во многих культурах по всему миру сочетание фиолетового символизирует знать или богатство, однако в Таиланде и некоторых частях Южной Америки ассоциируется с трауром.
В брендинге: тёмные оттенки фиолетового часто являются символом роскоши, а более светлые и яркие популярны у женщин и детей.
Черный
Подобно красному, у этого цвета есть множество (порой противоречащих друг другу) значений. Он может представлять власть, роскошь, изысканность и эксклюзивность. С другой стороны, черный символизирует смерть, зло или тайну. В одежде является символом формальности или траура и скорби (так как траур традиционно носят на похоронах).
Альтернативные значения: в некоторых странах Азии и Латинской Америки черный считается мужским цветом. В Египте он означает второе рождение. Во многих культурах цвет ассоциируется с магией, суеверием или невезением, а также с необъяснимым или неизвестным.
В брендинге: черный настолько широко используется, что почти стал нейтральным, хотя он может символизировать вышеперечисленное в зависимости от контекста. Многие дизайны просто черно-белые (осознанно или просто для экономии на цветной печати).
Белый
Как цвет света и снега, белый часто символизирует чистоту, невинность, добро или совершенство (традиционно его носят невесты), но также означает строгость или стерильность.
Альтернативные значения: в Китае белый - цвет траура. Во многих культурах он обозначает мир - белый флаг является универсальным символом перемирия или капитуляции.
В брендинге: белый часто коммуницирует простоту, чистоту или современность. Дизайнеры, ищущие эстетику минимализма, часто используют много белого.
Цвет в дизайне
Подобрать сочетание цветов - это больше, чем выбрать два или три оттенка и распределить их в равных пропорциях по всему дизайну. Эффективное их применение имеет много общего с балансом, и чем больше тонов используется, тем сложнее его достичь.
Проще всего эта концепция воплощается путем разделения выбранных цветов на превалирующие и акценты. Доминирующий тон будет наиболее видимым и наиболее часто используемым в дизайне, в то время как один или несколько акцентов будут его дополнять и балансировать. Обращение внимания на взаимодействие цветов - наличие или отсутствие контраста, как смотрятся расположенные рядом тона, какое настроение создает сочетание цветов и оттенков и т. д. - поможет точно подобрать идеальную палитру для целей дизайна.
Общепринятым правилом использования основной трехцветной палитры является правило «60-30-10». Такой подход часто используется в оформлении интерьеров, но также может эффективно применяться и для веб-дизайна или печати. Достаточно уделить доминирующему цвету 60 %, а двум акцентам отдать оставшиеся 30 % и 10 %. Хорошим примером, поясняющим это правило, является мужской костюм: на пиджак и брюки приходится 60 % цвета одежды, рубашка занимает 30 %, а галстук - оставшиеся 10 %. Все вместе обеспечивает сбалансированную, элегантную внешность.
Еще одним способом сохранить простоту и равновесие палитры является использование яркости и светлоты (или более светлых и более темных версий выбранного тона). Таким образом можно расширить выбор цвета без подавляющего дизайн разнобоя.
и брендинге
Узнаваемость бренда сильно зависит от цвета. Достаточно подумать о «Кока-Коле», «Фейсбуке» или «Старбаксе», и будет несложно вспомнить тона, с которыми эти бренды ассоциируются.
Исследование, проведенное в Университете Виннипега, показало, что первоначальные суждения людей о продукции в значительной степени основаны на цвете (60-90 % оценки). Это означает, что тон в дизайне - не только художественный выбор, но и важнейшее бизнес-решение, которое затрагивает все - от восприятия потребителями бренда до реализации продукции.
Однако при выборе цветовой схемы для логотипа не обязательно придерживаться традиций, символики или стереотипов. Здесь нет защиты от дураков или быстрых правил. Важнее то, как тон используется в дизайне и гармонирует с рыночным контекстом бренда и его характером.
RGB против CMYK
При работе над печатным проектом монитор компьютера не может отображать цвета так, как они будут выглядеть на бумаге. То, что вы видите, не является тем, что вы получите, потому что цифровые мониторы и принтеры используют две различные системы: RGB и CMYK. Первая относится к маленьким точкам красного, зеленого и синего света, которые объединяются, чтобы сформировать видимые цвета на экране; вторая же означает голубой, пурпурный, желтый и черный тона для создания цветных отпечатков. Поскольку RGB использует более широкий спектр, чем CMYK, некоторые дизайнеры изначально создают проект печати в RGB для сохранения большего числа вариантов цвета и конвертируют готовый дизайн в CMYK перед печатью.
По этой причине им необходим инструмент, обеспечивающий стабильный цвет при работе с обеими системами - например, при разработке логотипа для веб-сайта и его печати на визитке. Одной из таких систем является Pantone Matching System (PMS). В ней тона могут быть сопоставлены для веб-сайтов и печати (а также для различных типов печатных поверхностей), чтобы обеспечить одинаковый вид.
Цвет: понять, исследовать и любить его!
Дизайнеры специализируются на изучении теории цвета, психологии или нейробиологии - сложных предметах, которые находятся на стыке искусства и науки. Но это является частью того, что делает эту профессию таким интересным и таким эффективным инструментом на рынке. Хотя это руководство только очерчивает базовые направления, есть надежда, что оно поможет производить более обоснованный и более эффективный выбор цвета для личных или профессиональных проектов.
Эффективный дизайн сайта немыслим без подбора цветового решения. Осталось разобраться, как это сделать.
Возможно, для некоторых проектов вы уже выбрали несколько цветов, соответствующих палитре вашего логотипа или бренда, и создаете сайт в рамках этих ограничений. В других пока только наброски. Есть и те, что нуждаются в незначительных изменениях, способных сделать сайт красивее и удобнее.
Если вы ищете возможность облегчить и ускорить работу или делаете сайт впервые, эти инструменты помогут вам найти решение.
Начнем с краткого введения в теорию цвета.
Ниже вы найдете 19 ресурсов, которые помогут выбрать цветовую палитру для вашего сайта.
Подготовка
Вам необходимо вдохновение?
1.
BrandColors показывает, как ведущие бренды используют цвет, чтобы выделить бизнес, рассказать свою историю и обозначить ценности. Вы можете посмотреть список компаний, некоммерческих организаций и стартапов в алфавитном порядке или через поиск найти интересующий бренд.
Ищете готовую палитру?
2.
Это форум о дизайне цветовых палитр, содержащий почти 2 000 000 вариантов, загруженных пользователями. Вы можете скачать палитру, содержащую определенный цвет, и почитать, что пишут дизайнеры. Как правило, для одного сочетания дается несколько разных по насыщенности вариантов.
Палитра сопровождается говорящими названиями: Шторм в Уитсанди (тихоокеанский архипелаг в Коралловом море), Сумерки в Уитсанди, Остров Уитсанди
3.
Этот ресурс позволяет пользователям создавать и загружать свои собственные цветовые схемы. Вы сможете отфильтровать их по дате, рейтингу и количеству загрузок или найти по ключевым словам.
4.
В ColoRotate вы найдете библиотеку цветовых схем, которые можно просматривать, выбирать и изменять. Сделать собственную палитру на основе найденной поможет специальный 3D инструмент (3D color tool). Цветовую схему, созданную вами, можно сразу применить в PhotoShop или Fireworks, установив ColorRotate plugin или приложение для iPad.
В соответствии с требованиями бренда
Что, если у вас уже есть картинки, логотипы или требования бренда, которым нужно соответствовать?
1.
Этот сайт не так функционален, как некоторые в этом списке, но отлично решает задачу, для которой создан, — исследование конкретного цвета. Просто загрузите картинку и Color Hunter создаст на ее основе палитру. Это отличный способ достичь гармонии между изображениями и основными цветами сайта. Кроме того, здесь можно разложить цветовую схему сайта, который вам понравился.
2.
Pictaculous делает палитры по фото. Достаточно загрузить фотографию, чтобы получить цвета, которые с ней сочетаются. Также ресурс предложит готовые палитры, которые вам подойдут.
3.
Этот инструмент был известен как Adobe Kuler и предназначался для сравнения цветов. Сейчас это полноценная система по созданию палитр, позволяющая пробовать, сравнивать и сохранять цветовые комбинации. Вы можете выбрать тип палитры и создать пятицветные схемы автоматически или используя ручную настройку.
4.
Paletton ускоряет процесс создания палитры. Нужно выбрать тип схемы: моно, составные, триадные, тетрадные, родственные, родственно-контрастные. Как только вы поменяете один цвет, остальные автоматически подстроятся.
5.
Color Spire также строит палитру на основе одного цвета. Вы выбираете исходный оттенок и получаете варианты сочетающихся с ним схем. Также можно посмотреть превью, как выбранная палитра смотрится на сайте.
6.
Этот плагин для Chrome помогает гармонизировать цвета, учитывать дальтонизм и идентифицировать HEX-коды. Цветовые палитры можно сразу экспортировать в Illustrator, PhotoShop и CoIRD.com.
7.
Ресурс позволяет производить манипуляции с вашей собственной цветовой палитрой, выбирая и добавляя оттенки. В результате вы быстро и легко создаете новую схему на основе существующей.
8.
Этот инструмент подбирает цвета, которые сочетаются с вашим. Он немного примитивнее, чем другие ресурсы в этом списке. Нужно вставить HEX-код цвета в строку или выбрать его на представленном в форме колеса спектре. Генератор выдает 3 цвета, которые подходят вашему, и сопровождает их HEX-кодами.
Создать свой цвет
На многих ресурсах в этом списке подразумевается, что у вас есть исходный цвет. Если нет необходимости соответствовать требованиям бренда и BrandColors не помог с выбором, можно начать с набросков.
1.
Это приложение для iOS помогает выбрать из нескольких цветов, которые размещаются рядом через небольшое расстояние, что намного удобнее градиентного представления, кругов и спектров. Большие цветовые сетки позволяют использовать весь экран (что особенно ценно для владельцев iPad Pro). В приложении можно создавать образцы цвета, находить RGB, HEX и HSLA значения и делать палитры из набросков.
3. Color
В Color от HailPixel не определиться с цветом нельзя. Вы точно поймете, что хотите и получите HEX-код оттенка.
Вы совершаете движение мышью или жестом и цвет каждый раз немного меняется. Похоже на цветовую сферу, постоянно сопровождающую цвета HEX-кодами. Если вы двигаетесь вправо и влево по экрану, будет меняться цвет, вверх и вниз — насыщенность.
Получить код цвета
Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.
1.
SpyColor предоставит информацию о любом цвете, включая Hex, RGB, CMYK и другие коды, и покажет целый диапазон схем для каждого оттенка, в том числе комплементарные, сплит-комплементарные, триадные, контрастные и аналоговые.
2.
HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.
Протестировать свою палитру
Создав цветовую схему, хочется удостовериться в ее эффективности.
Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.
Здесь можно выбрать до 5 оттенков из огромной палитры и получить изображения, которые имеют похожую цветовую комбинацию и сопровождаются HEX-кодами. Картинки можно сохранить на сайте или скачать.
Заключение
Создание цветовой палитры для сайта — это ремесло на стыке искусства и науки. Эти ресурсы помогут ускорить и облегчить путь к визуальному образу, который прекрасно выглядит и эффективно работает.
