От радуги к веб-дизайну. Этого о цвете вы точно не знали.

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

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

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

Начнем с теории.

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

Дисперсией света

Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.

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

Это интересно!

  • Радуга всегда находится в противоположной стороне от Солнца.
  • Для разных стран принято считать свое количество цветов в радуге. Жители Китая утверждают что в ней всего 5 цветов, американцы говорят что 6, жители стран СНГ насчитали 7 цветов.

1. Дополнительные цвета.

Два цвета, сочетание которых дает нам белый цвет называют дополнительными цветами.
Фокус хотите?
Что получится если смешать все цвета радуги кроме красного? Или кроме оранжевого?
Вы пока подумайте, а в конце статьи я вам напишу ответ =)

2. Параметры цвета.

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

Цвета

3. Психология цвета.

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

Треугольник

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

4. Цветовая гармония.

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

Цвета

Цветовой круг по Иоханнесу Иттену (1961)

5. Цветовой контраст.

Существует семь типов цветовых контрастов:

  1. Контраст по тону.
  2. Контраст светлого и тёмного.
  3. Контраст холодных (синий, фиолетовый) и тёплых (оранжевый, красный, желтый) цветов. (Зеленый цвет может относиться и к теплым и к холодным цветам, в зависимости от того, какого цвета в нем больше, желтого или синего).
  4. Контраст дополнительных цветов (противоположные в круге Иттена).
  5. Симультанный контраст — это создание иллюзии дополнительного цвета на соседнем оттенке.
  6. Контраст цветового насыщения (один цвет: яркий, а второй блеклый).
  7. Контраст количества цвета по соотношению к другому цвету.

6. Составляем свою палитру цветов.

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

  • Отбросьте цвета ваших конкурентов. Если ваш главный соперник Бренд Coca-Cola, не используйте красный цвет;
  • Подумайте о целевой аудитории. Если вы занимаетесь оказанием похоронных услуг, яркие и веселые цвета будут не уместны.
  • Прочь стереотипы. Если вы организовали сайт – женский блог, не используйте розовый. Не будьте как все.

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

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

Цвета

Цвета на сайте http://designspiration.net/

7. Создаем палитру.

Палитра для вашего сайта должна включать не более трех основных цветов.

  1. Основной цвет (с ним мы уже определились);
  2. Цветовой акцент (читай ниже);
  3. Парочка нейтральных цветов (белый, светло-серый, темно-серый).

8. Цветовой акцент.

Для этого можете перейти на сайт Paletton и введите в поле выбранный вами цвет. Если вам не понравится то, что предлагает сайт, нажимайте “randomize” и смотрите похожие оттенки.

9. Применяем цветовую схему.

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

И, кстати, на вопрос о радуге, правильный ответ «зеленый».

Полезные ссылки

Обсуждение закрыто.