Какой выбрать цвет для сайта: Как выбрать цвет для бренда/сайта — Дизайн на vc.ru

14.11.2019 Facebook Twitter LinkedIn Google+ Разное

Содержание

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

Приветствую вас, дорогие посетители!

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

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

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

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

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

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

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

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

  3. 3.Так же можно воспользоваться фильтрацией по двум цветам. Для этого нужно кликнуть по кнопочке «Два цвета» в шапке, возле иконки Instagram:

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

    Выберете нужные цвета и нажмите на кнопку

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

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

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

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

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

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

А на сегодня у меня все. Желаю вам успехов в создании ваших сайтов, и поиске цветовых решений для них!

До встречи в следующих статьях!

С уважением Юлия Гусарь

Подбор цветов для сайта | Блог про веб-дизайн ONJEE

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

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

Основные принципы подбора цветов

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

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

1. Используйте природную палитру.

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

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

2. Используйте контрастные цвета.

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

Тоже самое касается и продвигаемых продуктов. Если вы продаете, скажем, видеокурс – изобразите его на контрастном фоне.

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

Во втором случае все внимание направленно исключительно на продукт. Такое простое правило может повысить конверсию в несколько раз.

3. Используйте не более 3 основных цветов.

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

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

Нельзя кнопку «Заказать товар» в начале страницы делать зеленой, а в конце красной. Это будет путать посетителя и вызовет недоверие.

4. Учитывайте свою целевую аудиторию.

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

К примеру, вы разрабатываете проект про торговлю на рынке Forex. Его целевая аудитория, скорее всего, мужчины, в возрасте от 25 до 60 лет.

И они никак не ожидают увидеть шапку в розовых оттенках, c изображением «hello kitty», держащей в лапах график падения цен на золото!

Цените своих посетителей и не забывайте, что интерфейс вы разрабатываете в первую очередь для них.

А теперь давайте поговорим про общепринятые значения распространенных цветов.

Значение цветов в определенный момент

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

Красный: это не только страсть, власть и энергия, это также агрессия и опасность. Аккуратно используйте этот цвет, клиенты попадаются суеверные.

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

Желтый: цвет оптимизма, счастья, радости и веселья. Мне не известны его отрицательные стороны. Обычно он вопринимается клиентами «на ура», при правильной подаче и нескольких аргументах в его пользу.

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

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

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

Белый: вызывает положительные ассоциации связанные с чистотой, молодостью, свежестью.

Черный: мощный и элегантный. Часто используется на сайтах, которые хотят показать индивидуальность (VIP карты или что-то в этом роде).

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

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

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

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

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

В заключение

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

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

Буду благодарен за ретвит этой записи.

Автор: ТОха

FLAT COLORS. Подобрать цвет фона и шрифта для сайта онлайн.

Flat дизайн — новое направление в web-дизайне. Особенностью «плоского» дизайна является минималистический подход к оформлению объектов интерфейса сайта. Отсутствие теней и градиентов подчеркивает удобство использования и восприятия объектов на сайте.

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

RED

PINK

PURPLE

BLUE

GREEN

YELLOW

ORANGE

GRAY

ALL

MY

BACKGROUND

 

#8E44AD

#90C695

#4B77BE

#90C695

#2ABB9B

#DB0A5B

#34495E

#96281B

#674172

#3498DB

#BDC3C7

#EEEEEE

#36D7B7

#87D37C

#019875

#F4D03F

#59ABE3

#68C3A3

#BFBFBF

#336E7B

#4183D7

#87D37C

#F7CA18

#F5D76E

#F22613

#F9690E

#22A7F0

#F64747

#2C3E50

#E67E22

#A2DED0

#03C9A9

#3A539B

#F62459

#E87E04

#F4B350

#65C6BB

#9B59B6

#67809F

#F2F1EF

#26A65B

#DADFE1

#F9BF3B

#1BBC9B

#F27935

#1F3A93

#ececec

#FF0000

#ECF0F1

#9A12B3

#89C4F4

#68C3A3

#D24D57

#00B16A

#6BB9F0

#D24D57

#1E824C

#03A678

#F39C12

#D2527F

#BE90D4

#3FC380

#1E8BC3

#C5EFF7

#FDE3A7

#C8F7C5

#C0392B

#AEA8D3

#F5AB35

#52B3D9

#2574A9

#BF55EC

#F89406

#16a085

#95A5A6

#E4F1FE

#1BA39C

#D91E18

#EF4836

#F62459

#ABB7B7

#86E2D5

#4DAF7C

#F2784B

#E74C3C

#E26A6A

#D35400

#03C9A9

#D64541

#DCC6E0

#5C97BF

#26C281

#FFECDB

#6C7A89

#22313F

#4ECDC4

#EB9532

#90C695

#66CC99

#663399

#19B5FE

#D2D7D3

#F1A9A0

#2ECC71

#DB0A5B

#E08283

#81CFE0

#EB974E

#049372

#913D88

#CF000F

#F64747

Базовые цвета для фото, или Как подобрать фон

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

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

Из минусов — конечно, передача цвета (как обычно) — белый фон сфотографировать так, чтобы он был реально белым, без обработки очень сложно, практически невозможно. Почему? Так работает наш мозг. Он приучен собирать и обобщать информацию извне и делать вывод исходя из своего опыта (немного странно звучит). В общем, если мы знаем, что фон белый, мы видим белый. Вне зависимости от окружения и условий. А фотоаппарат условностями не страдает — он фиксирует так, как «видит», а оттенков белого великое множество. И та же лампа, даже люминесцентная, обязательно даст свой оттенок на белый фон. Кстати, поэтому предпочтительнее снимать при солнечном свете. Так что в этом варианте либо работаем с техникой (баланс белого, серая карта) или правим в редакторе.
Кроме того, на белом фоне сложно снять белый предмет.

Если нет опыта в постобработке, можно взять теплый бежевый фон, светло-светло серый фон. Хороший вариант — белый с потертостями.

Серый фон
Он по-своему нейтрален, не отвлекает внимание.
Второй плюс — серый цвет априори универсален. На его фоне хорошо получаются и светлые, и темные предметы. Он как бы подстраивается под фотографию. Как сказал один профи на форуме: «недосветишь фон — он черный, пересветишь — почти белый».
Из минусов этот же фактор, как ни странно — серый цвет меняет свой оттенок в зависимости от освещения. Иногда это проблема…
Ну и некоторым серый цвет кажется скучным.

Темный фон
Сюда можно отнести и черный, и глубокий серый и темно-коричневый.
Темный фон создает историю, определенную атмосферу. Можно задать «движение», игру в кадре с помощью света и бликов.
Хорошо снимать светлые предметы или часть объекта съемки, чтобы привлечь внимание, дать рассмотреть детали.

Если нужно снять темный предмет на темном фоне, стоит задуматься об освещении и выделить края предмета светом.
Главная проблема при работе с темным фоном — он подчеркивает все огрешности. Блики, пылинки — все проявится.
Чтобы избежать бликов, стоит использовать в работе матовый фон и постараться как можно дальше отодвинуть его от предмета съемки. Пыль и соринки, даже если сдувать перед каждым щелчком затвора, проявятся всегда на фото, (у нас, по крайней мере, — сколько не притирай, какая-то зараза, но останется в кадре). Тут поможет только постобработка — кисть или штамп, к примеру.
Коричневый фон чуть проще в этом смысле, но зачастую дерево может дать блики на неровностях фактуры, даже если поверхность матовая. Опять же, этим можно «поиграть». И наши любимые потертости и фактура дерева в этом случае играют только в плюс.

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

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

А так этот фон на самом деле выглядит:

И напоследок, к слову о сером цвете. Мишка темный или светлый?

Вот и ломаем голову — как лучше подать фото.

Творческих вам успехов, друзья!

Онлайн-сервис по подбору цвета в одежде

Кликом по цветовому кругу установите основной цвет.

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

Бегунками и стрелками рядом с фото модели регулируйте оттенки. Добейтесь максимально естественного наложения нового цвета!

Красно-фиолетовыйКрасныйКрасно-оранжевыйОранжевыйЖёлто-оранжевыйЖёлтыйЖёлто-зелёныйЗелёныйСине-зелёныйСинийСине-фиолетовыйФиолетовый

Сброс ярк.насыщ.

Сброс оттенков

Поделиться

Вы можете загрузить фото любой тематики ! И мы сделаем на его основе аналогичный колористический тестировщик.