Цветовой круг онлайн подбор. Крутая шпаргалка по сочетанию цветов

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

Сервисы по определению цветовой схемы

  • 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

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

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

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

Что делает : Генератор цветовых палеток от лакокрасочного бренда Sherwin-Williams.

На чём работает : iOS и Android

Сколько стоит : бесплатно

Марьяна Багаутдинова, руководитель направления "Кухни GeD cucine", дизайнер :

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

Первое, что предлагает приложение, - это цифровые цветовые таблицы: "цветовые семьи" (например: красные, жёлтые, синие, натуральные), исторические цвета, цветовая таблица от американской компании, производящей лакокрасочные покрытия Sherwin-Williams. Что интересно, если кликнуть на тот или иной вариант, то появляется палетка с используемыми на картинке цветами и номерами, коллекциями и названиями красок от компании Sherwin-Williams. Для дизайнеров, а также для простых людей это возможность не изобретать ничего нового, а воспользоваться уже разработанными решениями. Можно попробовать покрасить стены на предложенных базовых вариантах интерьеров, которых представлено достаточно, - это и кухни, и гостиные, и спальни, и детские.

Раздел Paint a Scene, по моему мнению, больше для развлечения. Набор инструментов позволяет в вольном порядке импровизировать с деталями, цветами и способом нанесения цвета. Очень похоже на Paint. Если вы не обладатель специальных электронных гаджетов для рисования, то для того, чтобы провести изящную линию пальцем, надо изрядно постараться. Если вы профессионально занимаетесь декорированием интерьеров или же самостоятельно создаёте и оформляете своё пространство, то с помощью ColorSnap вы можете найти хорошие решения, где бы вы ни были, а впоследствии применить их на практике. Мой ответ: попробуйте!"

ColorFit

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

На чём работает : iOS

Сколько стоит : 75 рублей

Александра Осьминина, эксперт:

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

До функции инструмента для подбора цвета недотягивает, а для развлечения слишком скучно".

Color Capture by Benjamin Moore

Что делает : Приложение подбирает красивое сочетание оттенков среди красок от компании Benjamin Moore. Отличает от прочих возможность купить понравившиеся оттенки, так как компания представлена в России.

На чём работает : iOS и Android

Сколько стоит : бесплатно

Елена Плато, дизайнер интерьера, архитектор :

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

Real Colors

Что делает : Приложение - генератор цветовых палеток. Чтобы создать идеальную, нужно выбрать (или сделать) вдохновляющую фотографию - на её основе подбирается несколько подходящих друг к другу оттенков.

На чём работает : iOS и Android

Сколько стоит : демоверсия - бесплатно/280$

Ольга Осьминина, руководитель дизайн-студии:

"Приложение Real Colors меня не впечатлило. Я не увидела ничего нового. Сразу надо уточнить, что я протестировала только демоверсию. Но за $280 покупать версию профи желание не возникло. Я уверена, что профессионал должен пользоваться своим хорошо отлаженным инструментом - глазами - и изучать колористику как науку, а обычный человек - опираться на свои личные ощущения цвета".

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

1. Kuler

Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

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

Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

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

В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

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

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

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





Делаем скрины на телефон и с ними идем в магазин.

Что еще?

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

in color balance (это сайт дизайнера, колориста и фотографа Alex Romanuke, который создает палитры вручную)






Можно пойти третьим путем: сфотографировать понравившееся вам сочетание и разложить на цвета, загрузив картинку на сайты вроде pictaculous.com либо color.adobe.com (это адобовское приложение составляет палитры по схемам, как и colorsсheme, и раскладывает на схему загруженное фото).

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



Хорошей вам работы с цветом и больше яркости в жизни!

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

1. Использовать известную гамму

На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.

2. Выбрать готовую профессиональную палитру

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


Кроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.


3. Определить палитру цветов понравившейся фотографии или картинки

Этот способ чуть сложнее. Но и эффектнее.

  • На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
  • Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
  • Сервис определит сочетание цветов (внизу под загруженной картинкой).
  • Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
  • Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
  • Кнопка «Auto» генерирует новые сочетания на основе того же фото.
  • Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.

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

4. Создать свою цветовую гамму онлайн

Загрузив фото на тот же сайт coolors.co , можно не только определить код цвета, но и создать собственные сочетания. Для этого нажмите пробел - сервис автоматически создает сочетание из 5-ти цветов.

На каждом цвете 4 значка-кнопки :

  • Alternative shades - Оттенки цвета (темнее и светлее),
  • Drag (Передвинуть цвет вправо или влево по палитре),
  • Adjust (Настроить тон, насыщенность, яркость и др.),
  • Lock (зафиксировать цвет).