Меню

Где с помощью цвета



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

Схема:
Насыщенность/Яркость

Схема:
Контрастность

Выбранный Вариант:
Насыщенность/Яркость

  • Схема по умолчанию
  • Больше контраста
  • Высокий контраст
  • Максимум контраста
  • Меньше контраста
  • Низкий контраст
  • Минимум контраста
  • Средне-темный (насыщенный)
  • Темный (насыщенный)
  • Очень темный (насыщенный)
  • Пастельный
  • Средне-темный пастельный
  • Темный пастельный
  • Очень темный пастельный
  • Мягкий бледный пастельный
  • Средний бледный пастельный
  • Темный бледный пастельный
  • Очень темный бледный пастельный
  • Полутон (легкий)
  • Серый полутон с цветовым акцентом (легкий)
  • Серый полутон (средний)
  • Серый полутон с цветовым акцентом (средний)
  • Серый полутон (темный)
  • Серый полутон с цветовым акцентом (темный)

Постоянный адрес текущей цветовой схемы:

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

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

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

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

Источник

Цветовой круг

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

Что это такое?

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

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

То есть, фактически — это «живая», материальная шпаргалка, на которой отображаются все основные колористические схемы. «Живая», потому что её можно взять в руки, в отличие от изображения на экране.

Устройство цветового круга

Сторона дизайнера

Сторона художника

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

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

Предшественником данного устройства в его современном виде является цветовое кольцо Иттена (смотрите рисунок ниже).

Именно Йоханесс Иттен первым из всего спектра выделил именно двенадцать цветов и расположил их по окружности таким образом, что максимально контрастирующие друг с другом пары оказались друг напротив друга. В центре он расположил треугольник с тремя основными цветами — красным , синим и жёлтым (именно из них можно получить все остальные путём смешения в разных пропорциях). Этот треугольник Иттен заключил в шестиугольник, внутри которого обозначил какие оттенки получатся при смешении основных цветов в равных пропорциях.

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

Рассмотрим этот момент немного подробнее..

Почему основных цветов двенадцать?

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

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

Гид по смешению красок

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

Читайте также:  Как восстановить серый цвет одежды

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

А как же определить эти самые пропорции? Неужели наугад? Нет, цветовой круг может помочь и в этом.

Шкала насыщенности

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

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

Чтобы понять как это делается практически, посмотрите это видео:

Схемы цветовых сочетаний

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

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

Во-первых, гармония или дисгармония красок — это очень субъективное понятие. Как говорится, «на вкус и цвет товарища нет».

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

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

Таблица цветовых схем

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

Монохромное сочетание

Сочетание оттенков разной насыщенности.

Комплиментарное сочетание

Противоположные (дополнительные) цвета.

Классическая триада

Равносторонний треугольник — три элемента сочетания находятся на одинаковом расстоянии друг от друга.

Аналоговая триада

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

Контрастная триада

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

Прямоугольная схема

Две пары комплиментарных сочетаний (вариант такого сочетания — квадрат вместо прямоугольника).
Богатая гамма из четырёх цветов.

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

..в этом случае оператор запишет все данные по заказу в режиме диалога

Поделиться

Опубликовано 02.03.2014 01:02:38

Комментарии ( 0 ):

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

Источник

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

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

Почему важно правильно выбрать цвета?

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

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

Итак, если вы веб-дизайнер, ваша задача — донести до заказчика следующие мысли:

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

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

Читайте также:  Каким цветом ниток пришивать пуговицу

3. Каждый цвет вызывает определенную эмоциональную реакцию. Ярко-красный — энергию, силу, страсть. Бледно-розовый — нежность, мягкость. Фиолетово-черный наводит на мистические, загадочные ассоциации.

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

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

6. Если у клиента уже есть фирменный стиль — отлично. Тогда сайт тоже должен быть выдержан в корпоративных цветах.

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

Выбираем цветовую гамму: пошаговая инструкция

Шаг 1. Выбираем основной цвет

Анализируем целевую аудиторию сайта. Составляем ее портрет. Лучше всего, если это будет рисованный персонаж: например, женщина по имени Ольга, 25 лет. Высшее образование. Проживает в крупном российском городе. Ожидает или планирует малыша. Готова тратить на покупки 10 тысяч рублей в месяц.

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

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

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

Где будет использоваться основной цвет?

Доминирующий цвет — не обязательно фон главного экрана. Его нужно использовать с умом: разбавляя другими контрастными элементами или использовать в тех блоках и формах, на которые хотите обратить внимание пользователя. Если мы говорим про интернет-магазин — то, например, в логотипе, кнопках СТА, форме для оформления заказа, в разделе распродаж или новых поступлений. Вот как в этом примере: решающий цвет — желтый, но он не слишком бросается в глаза.

Шаг 2. Выбираем акцентные цвета

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

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

  • красный и черный — динамика, агрессия, такое сочетание не остается незамеченным. Черный только усиливает яркость красного;
  • красный и белый — совсем другое дело. Белый смягчает красный цвет, добавляет чистоты и свежести;
  • красный и серый — отличное элегантное сочетание;
  • красный и золотой — респектабельность, лакшери, богатство;
  • красный и зеленый — слишком ярко, привлекает внимание, но режет глаз. Особенно если цвета не приглушенные, а кислотные;
  • и так далее.

Где используются акцентные цвета?

Эти дополнительные цвета подойдут для оформления деталей: кнопок СТА, заголовков статей или карточек товаров, названий разделов меню. В скриншоте ниже таким дополнительным цветом является оранжевый.

14 инструментов для подбора цветовой гаммы

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

Adobe Color CC

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

Читайте также:  Какие цвета сочетаются с коричневым деревом

Color Safe

Эта программа — не просто цветовая палитра. Сервис основан на рекомендациях Руководства по обеспечению доступности веб-контента (WCAG). Например, большое внимание уделяется правилу сохранения цвета на переднем плане, коэффициенту контрастности. Если вы пока не слышали об этом — изучайте матчасть, WCAG вам в помощь!

Check my Colours

Полезнейший инструмент, который не просто подбирает идеальное сочетание цветов, но и оценивает их комбинации. Например, насколько хорошо они сочетаются, есть ли у них достаточный контраст и так далее. Понятно, что на глазок даже профессиональному веб-дизайнеру оценить это трудно. А с помощью специальных алгоритмов, рекомендованных World Wide Web Consortium, — запросто!

Paletton

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

Adobe Kuler

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

The Color App

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

Contrast-A

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

Color Hunter

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

ColorZilla

Это даже не сервис, а плагин для Chrome и Firefox. С его помощью можно прямо в браузере решить разнообразные задачи по подбору цвета: например, определить значения цветов, отличия между ними, создать нужную цветовую гамму. А еще можно выбрать используемые цвета на странице, которая открыта в браузере.

Colorotate

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

ColorScheme

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

Чем еще хорош ресурс — здесь много полезных материалов для веб-дизайнера по выбору цвета. Можно существенно повысить уровень знаний!

Colourcode

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

Palettr

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

Material Design Palette

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

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

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

Источник