Подбор цвета

Блог о том, как создать логотип и сайт

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

  • WordPress (2)
  • Бренды (1)
  • Вдохновение (26)
  • Видео (5)
  • Визитки (2)
  • Все посты (4)
  • Записки сумасшедшего дизайнера (4)
  • Инструкции (13)
  • Инфографика (4)
  • Как создать (15)
  • Как создать сайт (4)
  • Логотипы (44)
  • Сервисы (11)
  • Советы экспертов (5)
  • Тематические (1)
  • Фавикон (1)
  • Цвет (11)
  • Шрифты (4)

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

  • Tweet
  • Share 0
  • VKontakte

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

1. Adobe Color CC

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

2. ColourCode

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

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

4. 0 to 255

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

5. ColourLovers

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

6. ColoRotate

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

7. Web Colour Data

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

8. Cohensive Colors

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

9. Designspiration

Большая галерея картинок с соответствующими им цветовыми палитрами. Доступен поиск по цветам, также есть возможность отсортировать фото по популярности.

10. LolColors

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

11.ColorScheme

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

12. Color Hunter

Заняться самой настоящей охотой за цветом можно на сайте Color Hunter. Сервис достаточно простой: доступен поиск по тегам или HEX-коду, а также есть возможность загрузить изображение и “разложить” его на цвета.

13. Logomak

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

14. ColorHexa

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

15. Color-Hex

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

16. Coolors

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

17. HTML Color Codes

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

18. Material Palette

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

19. Material UI Colors

Инструмент для выбора цвета в стиле Material Design . Возможность в один клик копировать HEX- или RGB-код можно назвать одним из преимуществ сервиса.

20. ColorHunt

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

21. Colorful Gradients

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

22. Brand Colors

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

Приложение, которым пользуются даже в таких известных компаниях как Amazon, Twitter и Pinterest, наверняка станет неплохим подспорьем при создании палитры. Правда, некоторые барьеры есть: доступен данный инструмент только на Mac или iPhone.

24. Colorfavs

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

25. ColorDrop

Простая и удобная галерея палитр и цветов от датского дизайнера Тристана Уайта.

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

Читайте также

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

Цветовая схема сайта: 4 рекомендации и 8 примеров для улучшения взаимодействия с пользователями

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

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

1. Повышайте узнаваемость бренда

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

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

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

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

2. Определите, как посетители ассоциируют ваш сайт

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

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

Универсальным решением для большинства является голубой цвет. Это обусловлено в том числе и тем, что большинство людей отмечают его как наиболее привлекательный для себя. Так, 57% мужчин и 35% женщин отметили, что именно голубой цвет — их любимый:

3. Выберите подходящую палитру

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

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

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

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

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

4. Выберите цвета, не входящие в основную палитру

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

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

Согласно исследованию Consumer Preferences for Color Combinations было определено, что несмотря на то, что потребители в большей мере предпочитают цветовые решения, находящиеся в пределах одной цветовой гаммы, они также предпочитают цветовые решения, в которые включены контрастирующие цвета, акцентирующие внимание.

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

Помните о том, что максимально рекомендуемое количество цветов сайта — четыре:

  1. Основной фон.
  2. Основной текст.
  3. Ключевой цвет проекта.
  4. Ключевой цвет ховера.

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

Цветовая схема онлайн

Выбери одно из ТОП-20 сочетаний света

Скопируй код цвета

Сочетания цветов схемы в линейном градиенте

Как правильно выбрать цветовую схему для сайта landing page

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

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

Как подобрать цветовую схему для сайта.

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

  1. Лендинг медицинской тематики. Используется основной цвет бирюзовый в цвет медицинских халатов.
  2. Сайт для юриста. Думаем какие есть ассоциации цветов с этой профессией. Цвет стола, книги, мантии судьи.
  3. Мужские сайты. Это серьезные сайты, не привлекающие внимание, не пестрые.
  4. Женские сайты. Противоположные цвета, пестрые цвета, с красными тонами.
  5. Для сайта природы. Используются природные цвета зелени. Коричневые цвета ассоциируются с стволом дерева и землей.

В своем проекте использовать нужно фиксированные цвета, которые изначально выбрали.

Типы цветов у сайта.

  1. Фон светлый бежевый или белый, базовый цвет.
  2. Основной цвет. Делаем все коммуникации на сайте.
  3. Ключевой цвет это цвет бренда или цвет для расстановки акцентов на сайте, акцентный цвет.
  4. Дополнительный цвет. Используется при желании.
  5. Цвет текста черный.
  6. Цвет для эффектов наведения. Цвет можно подобрать по тонам цветов.

Доля каждого цвета на сайте.

  • 75 % базовый цвет.
  • 20% основного цвета.
  • 5% акцентный цвет.

Виды цветовых схем

  1. Контрастная схема основана на двух цветах находящихся напротив друг друга в цветовом круге. Два цвета будут сочетаться гармонично и эффектно.
  2. Схема аналогия сочетает цвета, которые находятся рядом. Встречаются часто в природе, легко воспринимаются глазом.
  3. Триада один основной, один дополнительный и акцент. Распространенная цветовая схема.
  4. Схема акцент. Получаем один контрастный цвет для акцента, второй цвет основной и для наведения.
  5. Тетрада четыре стороны, один цвет основной, один акцентный и два дополнительных цвета или цвет наведения hover. Придает оригинальности сайту.

Холодные и теплые цвета на цветовом круге.

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