Как подобрать цвет для сайта: Цвет для сайта: что привлекает покупателей

Получить код цвета

Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.

1. SpyColor

SpyColor предоставит информацию о любом цвете, включая Hex, RGB, CMYK и другие коды, и покажет целый диапазон схем для каждого оттенка, в том числе комплементарные, сплит-комплементарные, триадные, контрастные и аналоговые.

2. HTML Color Codes

HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.

Протестировать свою палитру

Создав цветовую схему, хочется удостовериться в ее эффективности.

Check my Colours

Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.

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

Подбор изображений

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

1. TinEye

TinEye известен как альтернатива поиску изображений Google. Он поможет найти нужную цветовую комбинацию, используя базу в более 10 000 000 изображений с Flickr. Если вы ищете картинку, соотвующую вашей палитре, это отличный легкий способ ее найти.

2. Designspiration

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

Заключение

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

Высоких вам конверсий!

По материалам: crazyegg.com.

01-06-2017

Как подобрать цвета сайта — 1C-UMI

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

Значения цветов

Желтый

Красный

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

Фиолетовый

Голубой
Любимый цвет мужского пола. Связан с миром, стабильностью, надежностью, спокойствием и профессионализмом.
Черный
Цвет символизирует изысканность, опытность, роскошь, элегантность и власть. Подходит для реализации люксовых товаров. Но помните, что большое количество черного цвета может вызвать у посетителей чувство тяжести, поэтому не перебарщивайте с ним.
Зеленый
Один из самых любимых цветов обоих полов. Олицетворяет здоровье, богатство, исцеление, правильное питание и природу. Способен расслабить любого человека.

Оранжевый
Ассоциируется с творческим началом, игривостью, восторгом и дружелюбностью. Цвет способен побудить человека к действию ― например, отправить заявку или совершить покупку.
Серый
Данный цвет олицетворяет спокойствие, нейтральность, логичность и простоту. Ассоциируется с производством, контролем, аккуратностью и т. д.
Белый
Символизирует чистоту, невинность, свежесть и доброту. Неплохой выбор для свадебных агентств или религиозных организаций.
Розовый
Очень женственный и романтичный цвет, который преобладает на женских ресурсах, наподобие товаров для женщин или услуг для прекрасных дам.

Коричневый
Ассоциируется с уверенностью, комфортом, приземленностью, долговечностью и надежностью.
Синий
Схож по ассоциациям с голубым цветом. Также символизирует стабильность, спокойствие, безопасность и умиротворенность. Часто используется банковскими учреждениями и крупными компаниями для демонстрации серьезности и солидности.

Как выбрать цвета ― подборка инструментов

• На вкладках меню.
• В шапке и подвале сайта.
• В боковых панелях страниц.
• В логотипе.
• На кнопках.
• В названиях и заголовках.

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

Рассмотрим процесс подбора цветов на примере сервиса ColorScheme. Он русскоязычный и обладает удобным интерфейсом. Это не единственный подобный инструмент, и если вам больше нравятся другие, пользуйтесь ими без угрызений совести.
Прежде всего, нам нужно узнать код основного цвета. Это можно сделать посредством ресурса ColorPiker или браузерного расширения Eye Dropper.

Скопированный код вставляем в значение RGB на сайте ColorScheme.

Цвет поменяется, а рядом с ним будут показаны комплементарные цвета. При нажатии на любой из них или на вкладку «Список цветов» отобразятся соответствующие им коды.

Цветовые схемы

Один цвет и не более двух его оттенков, которые располагаются на цветовом круге рядом.

Цвета, находящиеся на противоположных сторонах цветового круга.

Данные цвета соединяются вершинами равностороннего треугольника.

Цвета, которые соединены вершинами прямоугольника на цветовом круге.

Цвета, располагающиеся рядом в цветовом круге.

• Акцент аналогия.

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

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

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

 
Во втором — с темным оттенком цвета.

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

Несколько важных советов

• Используйте контрастные цвета, чтобы тексты на сайте легко читались.
• Не нужно задействовать слишком много цветов. Достаточно будет 2 или 3.
• Для привлечения покупателей применяйте интенсивные цвета (красный).
• Используйте цвета своего фирменного стиля, если он у вас уже есть.
• Если вы не разбираетесь в веб-дизайне, доверьте выбор цветовой гаммы профессиональному дизайнеру.

18 полезных ресурсов для работы с цветом

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

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

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

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

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

Ресурс HTML Color Codes предоставляет вам весь набор инструментов для работы с цветами в Web: переводы из одного цветового представления в другое, color picker, color chart и даже много туториалов про цвета. Очень круто.

Роскошный онлайн-инструмент для работы с цветом! Палитры, цвета, паттерны, все настраивается, выкладывается, делится и вычисляется из заданной картинки! Удобнее colorlovers в некоторых аспектах, более гибкий, чем kuler! Восторг, господа!)

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

24 сочных градиента от дизайнера Luke Davies.

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

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

Это один из инструментов, который всегда должен быть под рукой у дизайнера, а на Color by Hailpixel определенно стоит обратить внимание. Открывшийся сайт покажет вам пустой экран с единственной ссылкой на черный цвет (#000000). Перемещая курсор по экрану, вы будете видеть, как изменяется цвет фона, а окошко в центре будет показывать соответствующий hex-код этого цвета. Клик мышью создаст полоску текущего цвета с цифровым значением этого цвета.

Используя приложение, вы можете быстро увидеть многоаспектный характер цветов и отношения между цветами. Цвета палитрый представлены в 3d виде. Созданные палитры могут быть импортированы или экспортированы в Adobe Swatch Exchange (ASE). В ColoRotate есть свое сообщество, где можно просмотреть темы, созданные другими пользователями.

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

Этот сервис пригодится особенно веб-дизайнерам. Он позволяет подобрать цветовую модель для будущего сайта.

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

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

Абсолютно бесплатно и, что наиболее важно – онлайн, позволяет создавать и сохранять гармоничные цветовые сочетания, как автоматически, так и вручную. Пользуясь тремя ползунками RGB или HSV вы автоматически получаете гармоничное сочетание из шести цветов и затем можете настраивать их в соответствии со своим вкусом. Цвета автоматически представляются в виде цветового HTML кода и кода RGB, а также могут быть экспортированы в виде цветовых таблиц Photoshop (.ACT) и Illustrator (.EPS). Кроме того, есть функция сравнения цвета со стандартным понтонным. Свои палитры можно хранить прямо на сайте, задавая им удобные вам имена. Также на сайте можно найти массу готовых палитр на разные случаи жизни.

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

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

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

Фото на обложке: ShutterStock

25 лучших сервисов для работы с цветом

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

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

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

Галерея готовых палитр, градиентов, а также картинок с соответствующими им цветовыми схемами.

Данный сервис позволяет просмотреть все оттенки того или иного цвета, выбрать необходимый, а затем в один клик скопировать его HEX-код.

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

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

Если вы нашли веб-сайт, цветовое оформление которого вам понравилось, при помощи онлайн-сервиса Web Colour Data можно составить цветовую палитру: достаточно просто ввести адрес. Узнать можно не только цветовое наполнение, но и процентное соотношение каждого из цветов. Для примера на главной странице представлены палитры известных сайтов (Google, Pinterest, WordPress и др.).

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

Какой цвет выбрать для сайта. Фишки и секреты.

На чтение 2 мин. Опубликовано 30.05.2016 Обновлено 18.04.2019

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

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

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

Конечно главное в цветовом оформлении сайта это удобство пользователя, чтобы цветовая гамма не раздражала посетителя, дизайн не должен “резать глаз”. Могу привести свой пример, заказал для одного из своих проектов дизайн, на мой взгляд все было сделано не плохо, обновил сайт. И в результате начал получать письма на почту, что новый дизайн неприятен для глаз, фон сайта мешал читать текст, в общем определенному числу посетителей не нравилось, в итоге я установил обычную тему вордпресс и получил письмо от одного из посетителей что теперь дизайн отличный. Так что суть сей басни такова: выбор цвета для сайта ответственный процесс, который может значительно влиять на поведенческий фактор.

Для продаж товаров выбор цветовой гаммы для лендинга в этой статье.

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

Эти чек листы  пригодятся вам при продвижении ваших онлайн проектов.

скачать 

Цвета для сайта | Подбор цвета сайта

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

Цветовые предпочтения среди мужчин и женщин

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

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

Маркетинговый подход к выбору цвета для сайта

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

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

Цветовые ассоциации

Безопасные цвета для сайта

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

Для удобства выбора цветов сайта, разрабатывая бриф (см. страницу брифа на картинке слева), специалисты студии RBS-Webmarket учли рекомендации лидеров рынка и собственные наработки в этой области.

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

В брифе, над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).

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

Простое руководство по цвету для веб-разработчиков — Smashing Magazine

В этой статье Лаура Элизабет рассказывает о простом рабочем процессе с цветом, который вы можете использовать в своем следующем веб-проекте.

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

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

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

Вы, конечно, будете подсознательно изучать теорию по пути. Так что, просто для шуток (да, я сказал «забавные»), я рекомендую вернуться через несколько месяцев и еще раз попробовать теорию.

Клянусь, тогда все будет иметь гораздо больше смысла.

Выбор основного цвета

Мы можем увидеть что-то нелепое, например, 10 миллионов цветов в любой момент времени. Подумайте об этом на секунду. 10 миллионов.

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

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

Как выбрать начальный цвет

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

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

Советы по выбору начального цвета

• Используйте то, что у вас есть. Если у клиента есть логотип с установленным цветом, обычно это будет ваш начальный цвет.
• Избавьтесь от цветов конкурентов. Если у одного из ваших основных конкурентов яркий фирменный цвет, не копируйте его, если можете. Найдите цвета своих конкурентов, чтобы исключить их из своих цветовых схем.
• Подумайте о своей целевой аудитории. Цвета веб-сайта похоронного бюро, вероятно, будут сильно отличаться от цветов для детского клуба.Подумайте, кто будет пользоваться сайтом и как вы хотите, чтобы они чувствовали себя (взволнованные, серьезные, о которых заботятся и т. Д.).
• Но не верьте стереотипам. Если вы разрабатываете веб-сайт для молодых девушек, вам не обязательно использовать розовый. Избегайте клише, чтобы завоевать доверие.
• Сыграйте в словесную игру. Если вы испытываете затруднения, запишите все слова, которые у вас связаны с бизнесом клиента. Этот список должен дать вам некоторые идеи для цветов. Если вы действительно испытываете трудности, зайдите на любой веб-сайт, посвященный значениям цветов, и посмотрите, какой из них подходит лучше всего.

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

Допустим, вы выбрали синий. (Отличный выбор, кстати!)

Выбор (приятного) основного цвета

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

Сначала перейдите в Dribbble и Designspiration и щелкните ссылку «Цвета» в обоих.

Они должны представить вам похожие экраны:

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

Для свежего и энергичного бренда выберите один из более светлых и ярких синих (один из пяти лучших вариантов). Для чего-то более корпоративного и серьезного лучше подойдет пятерка из последних.

Выберите оттенок на каждом веб-сайте, чтобы увидеть актуальные дизайны, в которых используется этот цвет.Затем вы можете использовать любой из методов выбора цвета CSS-Tricks, чтобы получить точные цвета прямо в браузере.

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

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

Хорошо, теперь у вас должно быть HEX-значение для вашего цвета. Мой — # 30c9e8 . Теперь сделаем палитру из этого цвета.И это проще, чем вы думаете.

Когда вы думаете о процессе создания цветовой схемы, вы можете представить себе такие вещи:

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

• белый,
• темно-серый,
• светло-серый (необязательно).

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

• базовый цвет (в нашем случае # 30c9e8 ),
• акцентный цвет (мы скоро доберемся до этого).

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

Finding Your Accent

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

Ваш следующий шаг — перейти в Paletton и ввести свой HEX-код в цветовое поле:

Отсюда вы можете найти свой акцент одним из двух способов.

Во-первых, вы можете нажать кнопку «Добавить дополнение» и бух ! Этот апельсин там? Это твой акцент.

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

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

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

Сейчас не хватает только серого.

Добавление серого

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

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

Вы можете выбрать оттенки серого одним из двух способов:

• Вы можете снова использовать Dribbble и Designspiration, чтобы найти красивый серый из ваших предыдущих результатов, который соответствует вашему базовому цвету. Но обычно проще ввести синий веб-сайт в строку поиска, чтобы в результатах было больше серого.
• Если у вас есть Photoshop или что-то подобное, вы можете использовать технику Эрики Скунмейкер, чтобы согласовать серые тона с основным цветом.

Создание гармоничных оттенков серого

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

1. Создайте две формы и залейте их цветами # 424242 и #fafafa .
2. Вставьте слой с цветной заливкой над двумя фигурами.
3. Измените заливку на основной цвет ( # 30c9e8 ).
4. Установите режим наложения на «Перекрытие» и уменьшите непрозрачность до 5–40% (в приведенном ниже примере она установлена ​​на 40%).
5. Используйте палитру цветов и скопируйте новые значения.

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

Вуаля! Мы сделали это!

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

Применение вашей цветовой схемы

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

Совет: Если вы боретесь с цветом, хороший трюк — сначала создать макет веб-сайта в оттенках серого. Определите иерархию, а потом поэкспериментируйте с цветом.

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

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

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

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

Важно отметить, что при использовании цвета и текста необходимо обеспечить достаточный контраст между фоном и копией. Это поможет людям с дальтонизмом или слабым зрением читать текст на вашем сайте. Есть много инструментов, которые вы можете использовать для поиска цветов, соответствующих рекомендациям WCAG. Двумя популярными из них являются программа проверки контрастности цвета WebAim и функция Contrast Ratio от Lea Verou.

Color Guide Final Note

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

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

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

Дополнительная информация по SmashingMag:

Как выбрать правильные цвета для эффективных писем

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

Используйте цвета вашего бренда

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

Возьмем для примера знаменитый темно-синий логотип Old Navy или характерный оранжевый, белый и черный логотип Harley-Davidson. Чем больше вы будете использовать одни и те же оттенки, тем больше они помогут вашему бренду. Итак, если у вас уже есть яркие фирменные цвета, смело используйте их везде, особенно в любой почтовой кампании!

Знайте свою целевую аудиторию

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

Знаете ли вы, что синий цвет нравится людям больше всего? Это может быть вариант, но он также очень часто используется, так как это наиболее цвет, используемый для бизнес-логотипов (например, Facebook, Ford, Walmart).Кроме того, мужчины предпочитают более яркие цвета, а женщины — более мягкие. Молодое поколение может предпочесть сложные и яркие оттенки, в то время как пожилым людям нравится использование более классических оттенков. В общем, выбор за вами, но вы обязательно должны адаптировать свой выбор цвета к людям, которых вы хотите достичь .

Настройка цветов шаблона без дополнительных инструментов

Обеспечьте достаточный контраст для видимости

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

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

Оставайтесь сбалансированным и простым

Один из лучших советов, который мы можем вам дать, — оставаться простым при выборе цветов для своих почтовых кампаний. Есть много правил, которым вы тоже можете следовать. Во-первых, не выбирает более 3 цветов для любого дизайна или брендинга. Более того, конечный результат может выглядеть нечетко. Подумайте о логотипах компаний. Большинство компаний используют только 2 цвета для своего брендинга. Вы помните, на что был похож логотип Slack? Перед ребрендингом им пришлось иметь дело с 14 цветами.

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

Проверяйте свои проекты снова и снова

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

Цвета Значение, которые вы должны знать

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

Красный: Это цвет страсти, храбрости, любви и гнева.Красный — теплый цвет, легко привлекающий внимание людей.

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

Желтый: Это цвет солнца, радости, а также денег и власти. Желтый — это наименее используемые цвета основных тонов.

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

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

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

Последнее сообщение

10 цветовых инструментов для создания лучшей цветовой палитры электронной почты

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

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

2. Pantone — поставщик отчетов и прогнозов по цвету, который дает представление о цветовых тенденциях в различных отраслях.

3. Color Picker от Web FX — бесплатный HTML-селектор цветов для создания согласованных цветовых схем.

4. GIMP — редактор изображений для преобразования изображений и значков, построения графических элементов и управления компонентами пользовательского интерфейса.

5.Adobe Color — цветовое колесо, которое просматривает тысячи цветовых комбинаций для различного использования.

6. WebAim Contrast Checker — средство проверки контрастности проверяет соотношение цветов, регулирует выбранный цвет и определяет значение цвета.

7. Happy Hues — инструмент цветовой палитры, показывающий, как цвета могут быть использованы в дизайне.

8. LOLColors — набор цветовых палитр, упорядоченных по избранным и просмотрам.

9. Eggradient — цветовая палитра градиента с 200+ цветами фона градиента.

10. Калькулятор цветов — коллекция цветовых вариантов для любого дизайн-проекта.

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

Как использовать цвет для улучшения вашего веб-дизайна

Из этой статьи вы узнаете основы того, как использовать цвет в своем дизайне.

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

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

Связано: 39 вдохновляющих цветовых схем веб-сайтов, которые пробудят ваши творческие способности

Почему важно использовать цвет в дизайне

85% покупателей считают цвет основной причиной покупки определенного товара.

Повышение узнаваемости бренда при использовании цвета на 80%. Узнаваемость бренда напрямую связана с доверием потребителей.

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

Что такое теория цвета?

Взаимодействие цветов в дизайне за счет дополнения, контраста и яркости.

Давайте подробно рассмотрим последние 3 термина:

Что такое дополнение?

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

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

Что такое контраст?

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

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

Что такое вибрация?

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

Вот пример веб-сайта с более темными приглушенными цветами:

Комната Лисий Города

Тогда, пример веб-сайта с яркими цветами:

Глаз тори

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

Психология и предпочтение цвета

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

Предпочтение цвета

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

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

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

Значение цвета

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

1. Красный цвет — яркий, мощный, изящный

В сочетании с:

• черный — мужской, агрессивный, спортивный, стиль, класс
• белый / золотой — любовь, страсть, чувства, привязанность
• желтый — опасность / еда

2.Оранжевый цвет — теплый, менее агрессивный, привлекающий внимание, веселый, энергичный

Используется для:

• конструкция, безопасность
• охота
• осень, Хэллоуин

3. Желтый цвет — солнце, тепло, лето, наиболее заметный цвет (цвет поп)

Используется для:

• школьные автобусы, такси
• защитное оборудование

4. Синий цвет — профессиональный, умный, спокойный, тропический, космический, водный, освежающий, доверительный

Используется для:

• путешествия и отдых
• банки
• клининговых компаний

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

Используется для:

• органические продукты
• богатство
• финансы

6. Коричневый цвет — роскошь, землистость

Используется для:

• модных сайтов
• природа
• надежность, стабильность

7. Фиолетовый цвет — роскошь, царственность, мудрость, знания

В сочетании с:

• красный — интимный, романтический
• белый, розовый — игривый и детский

Используется для:

• мода
• учреждения
• люкс

8.Черный цвет — сила, зло, смерть, неизвестность, роскошь, элегантность

Используется для:

• люкс
• мода
• ночных клубов
• кузова

9. Белый цвет — чистота, невинность, стерильность, чистота

Используется для:

• здоровья
• для новобрачных
• наука
• духовность

Вот еще одна иллюстрация из , как разные бренды используют цвет в своих логотипах, чтобы создать цератиновое настроение и послать определенное сообщение аудитории:

Типы веб-сайтов и использование цвета

1.Весело и профессионально

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

Миля

2. Просто и элегантно

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

Frost & Co

Выбор цвета | Справка SketchUp

В LayOut, всякий раз, когда вы щелкаете образец цвета (например, образцы на панели стиля фигуры) или выбираете Окно > Цвета , LayOut переносит вас на панель Цвета, где у вас есть полдюжины способов выбрать и организовать цвета для ваш документ LayOut.

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

Примечание. Интерфейс панели «Цвета» в Microsoft Windows отличается от Mac OS X. Хотя по большей части вы можете получить одинаковые результаты в любой операционной системе (различия указаны в следующих разделах), шаги по их созданию результаты разные.Имея это в виду, в следующих разделах отображаются результаты для выбранной операционной системы. (Используйте раскрывающийся список внизу этой статьи, чтобы выбрать другую ОС.)

Навигация по интерфейсу панели цветов

По мере того, как вы выбираете образцы цвета, как декоратор телешоу, имея тридцать минут, чтобы преобразить весь дом, некоторые элементы интерфейса появляются везде, где вы идете на панели «Цвета». Вот краткое введение в инструменты и функции, которые всегда под рукой (или указателем мыши) на панели «Цвета»:

1. Вкладки: Каждая вкладка содержит палитру цветов разного типа, например колесо, ползунки цвета и т. Д.
2. Инструмент «Пипетка»: Выберите инструмент «Пипетка», чтобы выбрать любой цвет, видимый на экране, в качестве активного цвета.
3. Область активного цвета: Здесь вы видите текущий выбор цвета. Вы можете перетащить этот цвет на любую фигуру в документе LayOut, чтобы применить цвет в качестве заливки или в любой видимой цветовой ячейке.
4. Пользовательская палитра: Чтобы сохранить цвет для дальнейшего использования, перетащите цвет из любой видимой цветовой ячейки. Добавление нового цвета к существующему цвету заменяет цвет.Если вам нужно увидеть больше лунок, щелкните и перетащите маркер размера в нижней части панели «Цвета», чтобы увеличить количество видимых цветовых лунок.
5. Пользовательская палитра: Чтобы сохранить цвет для дальнейшего использования, перетащите цвет из активной цветовой ячейки (3) на квадрат на палитре. Добавление нового цвета к существующему цвету заменяет цвет. Если вам нужно увидеть больше лунок, щелкните и перетащите маркер размера в нижней части панели «Цвета», чтобы увеличить количество видимых цветовых лунок.Обратите внимание, что вы больше не можете использовать эту палитру в качестве библиотеки для текстур материалов.
6. Ползунок непрозрачности: Этот ползунок изменяет непрозрачность вашего цвета или степень прозрачности цвета. Когда непрозрачность установлена ​​на 100%, цвет непрозрачный. По мере уменьшения процента непрозрачности цвет становится более прозрачным.

Выноски на следующем рисунке соответствуют номерам в предыдущем списке.

Выбор цвета на цветовом круге

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

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

Следующие шаги проведут вас через параметры цветового круга:

1. Чтобы выбрать цвет, щелкните оттенок цвета на цветовом круге.Выбранный вами цвет появится в области активного цвета.
2. (Необязательно) Чтобы настроить яркость цвета, перетащите ползунок яркости (справа от цветового круга) или введите процентное значение в поле над ползунком.

Точный выбор цветов с помощью ползунков RGB, HSB, Grayscale или CMYK

На панели «Цвета» есть ползунки, которые позволяют вводить точные значения цвета, используя любой из следующих методов:

• RGB: цветов RGB традиционно используются для указания цветов на экране.Используйте ползунок, чтобы указать значение красного, зеленого и синего цветов. Эти значения смешиваются, чтобы создать цвет, который вы видите в области активного цвета.
• HSB: HSB — это еще одна система, которая используется для указания цветов на экране, но в этом случае вы устанавливаете значения оттенка, насыщенности и яркости. Поскольку у значения насыщенности есть собственный ползунок, этот метод особенно интуитивно понятен, если вам нужен ненасыщенный цвет.
• Grayscale: Если вам нужен чистый серый цвет (без каких-либо цветовых оттенков), воспользуйтесь ползунком шкалы серого.
• CMYK: Только в Mac OS X вы найдете ползунки для установки значений цвета CMYK (голубой, пурпурный, желтый и черный), система, используемая в профессиональной печати, где цвета указываются в процентах от четырех основных цветов чернил.

Совет. Палитры цветов RGB или HSB подходят для большинства документов LayOut. Если вы не уверены, нужно ли вам использовать CMYK, обратитесь в службу печати.

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

1. Выберите вкладку, соответствующую цветовой системе, которую вы хотите использовать: RGB , HSB или Grays .
2. Щелкните и перетащите ползунок, чтобы установить значение для каждого параметра, или введите числовое значение в поле рядом с каждым ползунком. Например, если вы знаете, что в вашем документе необходимо использовать значение RGB: Красный 255 , Зеленый 122 и Синий 50 , вы можете ввести эти значения в поля, как показано на следующем рисунке. Если вы выберете вкладку HSB, вы увидите ползунки «Оттенок», «Насыщенность» и «Яркость». Если вы выберете вкладку «Серые», вы увидите ползунок «Серый».

1. В верхней части панели «Цвета» выберите вкладку Color Sliders .
2. В меню вверху вкладки выберите систему значений цвета, которую вы хотите использовать: Ползунок шкалы серого , Ползунки RGB , Ползунки CMYK или Ползунки HSB . На следующем рисунке выбраны слайдеры HSB.
3. Щелкните и перетащите ползунок, чтобы установить значение для каждого параметра, или введите числовое значение в поле рядом с каждым ползунком. Например, если вы знаете, что в вашем документе необходимо использовать значение HSB Hue 21 , Saturation 80 и Brightness 100 , вы можете ввести эти значения в поля, как показано на следующем рисунке.Если вы выберете параметр «Ползунок шкалы серого», вы увидите ползунок «Яркость», а также пять предустановленных значений шкалы серого. Если вы выберете опцию «Ползунки RGB», вы увидите ползунки красного, зеленого и синего цветов, а также шестнадцатеричный номер цвета (также называемый шестнадцатеричным значением ). Если вы выберете опцию «Ползунки CMYK», вы увидите ползунки Голубой, Пурпурный, Желтый и Черный.
4. (Необязательно) Чтобы ограничить параметры цвета определенным цветовым профилем, щелкните значок шестеренки (справа от раскрывающегося меню), чтобы просмотреть параметры профиля цвета, связанные с выбранной системой значений цвета.

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

Выбор цвета из изображения

У вас есть изображение с нужными вам цветами, но вы не уверены в их значениях? Обратите внимание на функцию изображения на панели «Цвета», которая позволяет загружать изображение в палитру цветов и выбирать цвета в любом месте этого изображения.

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

1. На панели Цвета перейдите на вкладку Изображение .
2. Нажмите кнопку Choose Image .
3. В появившемся диалоговом окне «Открыть» перейдите к изображению, которое нужно загрузить в палитру цветов, и выберите его.
4. Нажмите кнопку Открыть . Ваше изображение появится в палитре цветов, как показано на следующем рисунке.
5. Щелкните изображение, чтобы выбрать цвет. Помните, что вы также можете щелкнуть и перетащить курсор вокруг изображения, чтобы увидеть динамический предварительный просмотр цветов в активной цветовой ячейке.

Примечание: Чтобы вернуться к спектру, нажмите кнопку Reset Image .

1. На панели «Цвета» щелкните вкладку Палитры изображений .
2. Щелкните значок шестеренки рядом с раскрывающимся списком и выберите Новый из файла в появившемся меню.Или, если вы скопировали изображение в буфер обмена, выберите Новое из буфера обмена .
3. В появившемся диалоговом окне «Новая цветовая палитра» перейдите к изображению, которое нужно загрузить в палитру цветов, и выберите его.
4. Нажмите кнопку Открыть . Ваше изображение появится в палитре цветов, как показано на следующем рисунке.
5. Щелкните изображение, чтобы выбрать цвет. Помните, что вы также можете щелкнуть и перетащить курсор вокруг изображения, чтобы увидеть динамический предварительный просмотр цветов в активной цветовой ячейке.

Совет: Чтобы придать изображению более интуитивное имя, щелкните значок шестеренки и выберите Переименовать . Чтобы удалить изображение из средства выбора изображений, выберите Удалить . Если вы добавляете несколько изображений в средство выбора изображений, вы можете выбирать среди них, используя раскрывающийся список.

Выбор цветов из предустановленных списков

Панель «Цвета»

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

1. Щелкните вкладку Список .
2. Прокрутите список цветов и щелкните цвет, чтобы сделать его активным.

1. В верхней части панели «Цвета» выберите вкладку Цветовые палитры .
2. В раскрывающемся списке вверху выберите палитру. По умолчанию это меню включает палитры для основных цветов Apple, цветов Web Safe и цветов Crayon (которые также доступны на вкладке Crayons). Если вы определяете настраиваемую палитру, как описано в следующем совете, вы также можете выбрать эту палитру из этого списка.
3. Из появившегося списка цветов выберите цвет, чтобы сделать его активным цветом. Если вы не можете найти цвет, попробуйте ввести его название в поле Search .

В Mac OS X вы можете создать настраиваемую палитру цветов, которую вы определяете. Вот как:

1. Выбрав вкладку Цветовые палитры , щелкните значок шестеренки и выберите Новый в появившемся меню. В появившейся новой палитре Безымянный активный цвет становится первым цветом в вашей палитре.
2. Чтобы добавить больше цветов, выберите новый активный цвет и щелкните значок плюса рядом с полем поиска. Или просто перетащите цвет в список. Чтобы удалить добавленный цвет, выберите его в списке и нажмите значок со знаком минус.
3. (Необязательно) Чтобы дать цветовой палитре имя, щелкните значок шестеренки и выберите Переименовать . В появившемся поле введите имя и нажмите кнопку Переименовать .
4. (Необязательно) Чтобы переименовать цвет, дважды щелкните его и введите новое имя.

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

Выбор цветовых схем веб-сайта [Инфографика] — WordPress.com

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

Хотя отказ от фирменной цветовой палитры для вашего веб-сайта — это нормально на раннем этапе, эта стратегия не будет служить вам в долгосрочной перспективе.Согласно Insights 4 Print, использование согласованной цветовой схемы в оттенках серого или монохромной палитре может значительно повысить узнаваемость вашего бренда.

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

Выбор цветовой схемы сайта

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

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

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

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

Например, «веселая» цветовая палитра с яркими энергичными оттенками хорошо подходит для блогеров, пишущих на семейные темы. У «Money Saving Mom» есть набор ярких цветов, которые она постоянно использует на своем веб-сайте, чтобы выделиться среди других «скучных» финансовых блогов.

Веб-сайт, посвященный минимализму, например Be More With Less, естественно, будет использовать минималистскую цветовую палитру. В качестве основных цветов используются черный, белый и серый. Эта изящная схема не отвлекает от контента, а на веб-сайте есть несколько изображений, которые обеспечивают яркий всплеск цвета.

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

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

Используйте WordPress.com, чтобы выбрать идеальную цветовую палитру

Когда вы обновите свой тарифный план хостинга WordPress.com до пакета Premium, Business или eCommerce, вы сможете настроить выбранный шаблон, используя как базовую, так и расширенную цветовую схему. Не только это, но вы также получите контроль над дизайном фона, шрифтами и всем своим CSS, чтобы сделать бренд вашего сайта максимально уникальным и запоминающимся.