Пользователь
0,1
рейтинг
30 сентября 2010 в 10:37

Дизайн → Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта из песочницы

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

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

Итак, приступим к знакомству с магией цвета…

Цветовая теория: основные принципы. Умение сочетать цвета


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

Рассмотрим цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.
Цвета в web-дизайне


Цветовой круг является непременным атрибутом многих дизайнеров и художников по всему миру. Это идеальное доказательства теории, что гениальное всегда просто. Круг позволяет вам выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.
Чтобы найти правильную цветовою схему, необходимо использовать любые два цвета друг напротив друга, любые три цвета на равном расстоянии при формировании треугольника или любой из четырех цветов, образующих прямоугольник (две пары цвета друг напротив друга). Цветовые схемы остаются правильными независимо от угла поворота.

Основные цвета
Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета
Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

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

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

Аналогичные цвета
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.

Цвета в разных культурах: символизм


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

Красный

  • Китай: цвет невесты, удачи, торжества
  • Индия: чистота
  • Южная Африка: траурные цвета
  • Восток: радость (в сочетании с белым)
  • Запад: возбуждение, любовь, страсть
  • США: рождество (с зеленым), день святого Валентина (с белым)
  • Иврит: жертва, грех
  • Япония: жизнь
  • Христианство: жертва, страсть, любовь
  • Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

  • Европа: успокоение
  • Иран: траур, цвет неба и духовность
  • Китай: бессмертие
  • Индуизм: цвет Кришны
  • Иудаизм: святость
  • Христианство: цвет Христа
  • Католицизм: цвета одежды Марии
  • Ближний Восток: защита
  • В мире: цвет безопасности
  • Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения
  • Запад: печаль, депрессия

Желтый

  • Европа: счастье, надежда, радость, трусость в опасностях, слабость
  • Азия: цвет имперского
  • Египет: траур
  • Япония: мужество
  • Индия: торговцы
  • Буддизм: мудрость
  • Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

  • Европа: осень, урожай, творчество
  • Ирландия: протестанты (религиозные)
  • США: Хэллоуин (с черным), дешевые товары
  • Индуизм: шафран (персиковый оранжевый) священный цвет
  • Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

  • Колумбия: препятствие продажам
  • Австралийские аборигены: цвета земли, торжественное охра
  • Фэн-шуй: Янь, Земля, промышленность

Зеленый

  • Япония: жизнь
  • Ислам: надежда, добродетель
  • Ирландия: символ всей страны
  • Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
  • США: деньги
  • Индия: Ислам
  • Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

  • Таиланд: траур (вдовы)
  • Католицизм: смерть, траур, распятие
  • Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

  • Европа: брак, ангелы, врачи, больница, мир
  • Япония: траур, белая гвоздика символизирует смерть
  • Китай: траур, смерть,
  • Индия: несчастья
  • Восток: похороны
  • Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

  • Европа: траур, похороны, смерть, бунт, спокойствие
  • Таиланд: несчастье, зло
  • Иудаизм: несчастье, зло
  • Австралийские аборигены: цвет людей
  • Фэн-шуй: Инь, вода, деньги, успех в карьере, доход, стабильность, эмоциональная защита, сила

Значение цветов


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

Красный

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


Голубой

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


Желтый

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


Оранжевый

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


Фиолетовый

Традиционно ассоциируется с властью, благородством и богатством. Мудрость, независимость, благородство, роскошь, честолюбие, достоинство, магия и тайны.
Фиолетовый


Зеленый

Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.
Зеленый


Коричневый

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


Серый

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


Розовый

Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.
Розовый


Черный

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


Белый

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


Заключение


Существуют некоторые полезные советы, которые помогут Вам в выборе правильной цветовой схемы для вашего сайта. Эти маленькие советы широко используют профессиональные web-дизайнеры.
  1. Если вы хотите, чтобы текстовое содержимое, было легко читаемым, выбирайте контрастные цвета.
  2. Оптимальное количество цветов. Не делайте из Вашего сайта цирк.
  3. Используйте необходимое количество цветов. Минимальное количество цветов, может способствовать серости Вашего сайта.
  4. Если вам нужно привлечь посетителя, применяйте интенсивные цвета.
  5. Вы можете найти дополнительные цветовые схемы приобщаясь чаще к природе.

Полезные ссылки по теме:

Источник: Colors in Web Design: Choosing a right combination for your Website
Козырь Александр @Loner
карма
8,0
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (57)

  • +23
    Вот в тему не древняя инфографика. Если кто-то еще не видел:
    • +6
      синие против красных. вечное противоборство
      • +3
        Я за синих :)
        Интересно из всего этого выделяется Google, eBay, и другие — используют почти все цвета.
        • +1
          Всё дело в теплоте цвета
          • 0
            Тёплый ламповый цвет :)
      • 0
        Теперь понимаю откуда пошло выражение «мне фиолетово» :)
    • +2
      Тогда уж это:
      • 0
        а почему Яндекс два раза? 0_о
        • 0
          Яндекс Россия и Яндекс Украина, например :)
          • 0
            Если следовать этой логике то гугл должен быть во всю картинку)
          • 0
            у гугла тоже добрая десятка поддоменов, да и не могут быть равносильными посещаемости украинского и российского яндексов
            • +1
              Я выше дала ссылку на обсуждение с Сергеем Петренко, где выяснили, что второй домен — это ya.ru Видимо каким-то пикселем иконки у них различаются.)
              • 0
                та ну как то не вериться, что у я.ру такой же по посещаемости что и у яндекса
                • 0
                  nmap.org/favicon/?q=ya.ru
                  Survey database lookup: The icon is at (17.073, 9.007) and is 2032 × 2032 pixels.

                  nmap.org/favicon/?q=yandex.ru
                  Survey database lookup: The icon is at (18.420, 5.180) and is 1936 × 1936 pixels.

                  да, как-то странно :)
  • +1
    Интересный пост, особенно понравилось про различие восприятия цветов в разных культурах.
  • +3
    ещё есть colourlovers.com, где можно публиковать и находить цвета, гаммы и сочетания.
    • +1
      и kuler.adobe.com уже давно существует
    • 0
      хотя colourlovers.com конечно круче — там еще и паттерны можно делать :)
    • 0
      к тому там можно отслеживать цветовые тренды в различных сферах, в том числе и веб
  • +1
    Спасибо большое!

    Со вкусом всё в порядке, но подборка примеров — великолепна.
  • +1
    Забыли про важную составляющую — акцент. Без которого базовый цветовой набор, станет скучным пятном. Очень хорошо акцент показан на данных примерах.
  • –2
    уже столько раз про всё это писали
  • 0
    Важно помнить, что один и тот же цвет может иметь множество оттенков, при разном окружении
  • +2
    удобный сервис подбора цветов
    colorschemedesigner.com/
  • 0
    Шикарненько. Но доставляет ))
  • +9
    Какая же это Е-Р-У-Н-Д-А, что якобы один цвет несет успокоение, а другой желание. Вот вам картинка в серых тонах. Она ведь тоже «Возбуждает ощущение чистоты и невинности»? Цвета — это хороший помощник для передачи эмоции, но сами по себе они ничего не передают. Такой хренью обычно занимаются психологи-маркетологи: кладут перед подопытными веер Пантон и спрашивают ощущения от цвета. Не уподобляйтесь этим горе-теоретикам. Эмоции от цвета намного шире!
    • +3
      Извиняюсь, вот картинка: allsave.info/images/adult/madonna_sex.jpg
      • –3
        сам по себе цвет тут не приносит ничего. эта же картинка, будь она в оранжевых тонах — имелла намного более приятный эффект
    • +2
      Полностью согласен. Это полная хрень и сродни шарлатанству.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Как-то иллюстрация к серому никак не соотносится с «серьезностью и консерватизмом»
    • 0
      Это из за «праздника» в шапке, можно было бы передать «консерватизм» использую явные линии.
  • +27
    Я полностью согласен, спасибо за статью.

    • 0
      Smashingbook, если я не ошибаюсь?;)
      • 0
        упс, не в ту ветку)
        это был коммент к посту, а не к предыдущему комментарию.
    • +1
      ОМГ… хабр белый )
  • +3
    Эта статья не для дизайнеров, она для заказчиков, перед которыми дизайнер должен смотреться офигенным специалистом. Ничто не делает из человека «специалиста» как систематизация. На самом же деле, если дизайнер не чувствует цвет инстинктивно, никакая «таблица цветов» и знание культурных особенностей ему не помогут.
    • +5
      www.antula.ru/web-design_introduction.htm — вот клинический случай.
      • –1
        Владельцы черно-белых мониторов смеются на этим ;)
  • –1
    Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.
    Я не колорист конечно, но вроде RGB-палитра состоит из красного (Red), зелёного (Green) и синего (Blue). Жёлтый в ней получается путём смешения красного и зелёного (что видно по цифрам кода даже). А голубым вы назвали синий (0000FF), тогда как голубой (или сине-зелёный или же циановый) это 00FFFF. Жёлтый, голубой и пурпурный используются в субтрактивная палите CMYK (Cyan, Magenta, Yellow), которая применяется в полиграфии, отражая свет.
    В общем, я могу чего-то не понимать, но после таких ляпов читать статью расхотелось.
    • +3
      В живописи их и правда три основных цвета: красный, желтый и синий.

      Как бы я ни старался смешать красную краску с зеленой в надежде увидить желтый — я увижу только коричневый. Причем краски должны быть хорошими и смешивать нужно правильно, а то вообще может получиться черный.
      • 0
        Цветов может и три, но используя только их плюс черный и белый вы не получите хорошей живописи (или это потребует незаурядного профессионализма, и то сомневаюсь). Поэтому палитры художников так велики. Вы никогда не получите ярко-фиолетовый, мешая красный и синий.
        • 0
          смотря какой исходный красный и синий ;)
          • 0
            Поверьте моему опыту — с реально существующими красками этот номер ни разу не проходил. В лучшем случае получается жухло-фиолетовый, в худшем грязно-коричневый. Несравнимо с «баночным» цветом.

            Но фиолетовый пигмент вообще самый проблемный. Темперу фиолетовую вообще фиг достанешь, хотя бывалые художники говорят что она есть.
            • 0
              у меня есть ;)
              ну да, именно как из банки — не получится, а вообще можно добиться достаточно хорошего цвета, если постараться.
  • +1
    ой-ой-ой, феншуи на хабре! верните торт!
  • +1
    Вызывает чувство серьезности, консерватизма и традиционализма. Возбуждает ощущение чистоты и невинности.

    Блин, а я, дурак, носки белые стирал… Только сейчас понял, что они после носки чистоту символизировали :)
    Но статья вельми познавательна, вспомнил худ. школу, препода, его равнобедренный треугольник на цветовом круге (для подбора цвета), натурщиц…
  • +17
    Рома Воронежский как-то писал:
    Цвет — явление идеологическое. Идеология такая: сам по себе цвет не значит ничего. Вообще ничего. Беседы о том, что какие-то цвета с какими-то не сочетаются или что-то означают в отрыве от контекста — шаманство хуже гороскопов. «Красный означает опасность», — говорит человек, который сегодня утром мужественно съел помидор и не дрогнул. «Черный — слишком мрачный», — утверждает второй, который сегодня утром читал черные буквы на белом листе и смеялся. «Серый скучный», — жалуется третий. Сами вы скучный. Посмотрите на Бастера Китона — весь из оттенков серого, а повеселей вас будет. «Синий символизирует надежду, зеленый — обновление», — вешает лапшу дизайнер. Дизайнер, не вешай. Клиенту лучше честно сознаться: вот 16 млн цветов (если rgb) или веер (пантон), тыкайте пальцем. Покрасим в любой. Но кнопка «Удалить» останется красной (а с этим клиент никогда и не спорит).

    Когда мне говорят, что красный с зеленым не сочетаются, я сатанею. Посмотри на грядку клубники, дундук!
    • +3
      по моему, более исчерпывающе, чем вся эта статья
  • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    когда я читаю такие статьи, я все время вспоминаю о том, что клубника она красная, значит тревожная, и дальше не читаю.
  • –3
    1. Основные цвета не красный, желтый и голубой, а красный, зеленый и синий;
    2. Много текста, а примеров сочетаний цветов в первой части статьи (до примеров целых сайтов) — нет.
    • 0
      1. А это смотря используете вы излучающие (солнце, светофоры, подавляющее большинство мониторов) или отражающие («все остальные слова» (с) ) девайсы/палитры. В быту чаще приходится идентифицировать и синтезировать отражённый цвет, а не излучаемый — все знают, что если смешать красный с жёлтым, то будет оранжевый, хотя если попытаетесь сделать это в RGB палитре, то будете, возможно, удивлены. Жаль, что в посте об этом ничего нет.
  • +2
    Ненавижу эту тему про то «какие» цвета. Оно конечно да, но только потому что уж так повелось — красный свет светофора нас с детства воспитывает «тревоге» от красного цвета. И так далее.

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

    А, ну вон выше с Ромой Воронежским согласен, да.
  • 0
    > Итак, приступим к знакомству с магией цвета…

    я обладаю особой, цветовой магией!
  • 0
    «Есть три основных цвета: красный, желтый и голубой. Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.»

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

    Кроме того, вам может быть интересно: я писал статью в хабр полтора года назад про цветовой контраст и силу цветовосприятия: habrahabr.ru/blogs/personal/60426/

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