Как подобрать цвет для сайта: классические цветовые схемы

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Монохроматические цветовые схемы:

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

Эта схема выглядит чисто и элегантно.

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

Вы можете использовать ее для создания впечатления "стильности", при этом основной цвет может быть нейтральным (черным, белым или серым), а дополнительные цвета и цвета для акцентов контрастными.

При использовании этой схемы бывает сложно выделить наиболее важные элементы.

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

Минусы:
Эта палитра не имеет цветового контраста. Она не выглядит яркой, как дополнительные цветовые схемы.

Советы:

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

Аналоговые цветовые схемы:

Как подобрать цвет для сайта

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

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

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

Минусы:
Аналоговой цветовой гамме не хватает цветового контраста. Она не выглядит такой яркой, как дополняющие цветовые схемы.

Советы:

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

Дополняющие цветовые схемы:

Цвета для сайта

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

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

Дополняющие схемы отличаются высокой контрастностью.

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

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

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

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

Советы:

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

Расширенные дополняющие схемы:

Цвета для сайта

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

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

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

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

Советы:

  • Чтобы сделать акцент на теплых цветах, используйте один теплый цвет + несколько холодных цветов, (красный + синий и сине-зеленый или оранжевый + синий и сине-фиолетовый).
  • Избегайте использования ненасыщенных теплых цветов (например, коричневого или желтого) - это скучно и это может сделать негармоничным сочетание цветов в палитре.

Триадные цветовые схемы:

Цвета для сайта

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

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

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

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

Советы:

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

Тетраидные (двойные дополнительные) цветовые схемы:

Цвета для сайта

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

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

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

Минусы:
В этой палитре очень сложно подобрать удачно сочетающиеся цвета (сбалансировать цвета).

Советы:

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

Вольный перевод статьи Classic Color Schemes - http://www.color-wheel-pro.com/color-schemes.html

Используемые в статье схемы созданы при помощи Color Wheel Pro - программы, которая позволяет создавать цветовые схемы и просматривать их на реальных примерах.

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Добрый день Ксана!
    А как по вашему мнению, какую цветовую схему и какую палитру цветов лучше всего выбрать для сайта кулинарной тематики
    Посоветуйте пожалуйста

    • Если я правильно запомнила, то у вас стоит Directory News?

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

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

  2. Спасибо за статью. Убедилась, что для меня пока самым простым и любимым вариантом являются дополнительные схемы.

  3. Здравствуйте!

    Вопрос не в тему: как Вы сделали под статьёй такую красивую форму для подписи?

    Мне так же интересно, использовали ли Вы плагин для кнопок социальных сетей, которые тоже расположены ниже статьи?

    Спасибо за ответ! Благословений. (h)

    • как Вы сделали под статьёй такую красивую форму для подписи?

      Оформила при помощи стилей стандартную форму смартреспондера.

      Мне так же интересно, использовали ли Вы плагин для кнопок социальных сетей, которые тоже расположены ниже статьи?

      Подробности здесь

      • а я их сменил на свои... там не было тех "кнопочек" которые мне нужны...

  4. Вы правили форму самостоятельно? Как Вы добились столь хорошего эффекта? Я имею в виду горизонтальное положение формы?

    • Удалила лишние стили (теги таблицы) из формы и для input указала float: left . Это все.

  5. Нужен специальный CSS-код?

  6. Здравствуйте, Ксана! Очень хочется узнать у Вас о сроках начала тренинга по переделке шаблона. Спасибо!!!

    • Елена, я бы тоже это хотела знать :).

      Надеюсь, что к концу месяца закончу все дела и начну этот тренинг.

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

    • На самом деле для такого сайта можно использовать разные цвета :).

      Но мне кажется, что сочетание синего, красного и белого фона будет хорошо выглядеть.

      Только синий и красный должны быть:

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

  8. Ksana, подскажите, пожалуйста, какие цвета подобрать для сайта офисной мебели? Полностью белый фон - Ваше мнение?

    • Я бы выбрала в качестве дополнительных цветов - оттенки коричневого и беж.

      Хотя, можно и синие.

      Можно, также, скомбинировать: Беж или светлый коричневый в качестве дополнительного, и синий для акцентов.

  9. Ksana может быть подскажете в каком цвете сделать вот этот шаблон (cssway.inomoz.ru) тематика малые архитектурные формы (заборы перголы беседки мостики), а то зеленый с черным как-то грустно и не привлекательно выглядит. Может что-то с зеленым еще сочетается.

    • В первую очередь я бы изменила цвет фона на светлый песочный или беж.

      А вместо черного можно использовать оттенки коричневого или желтого - они хорошо сочетаются с зеленым.

  10. Здравствуйте Ksana! Подскажите и мне, пожалуйста!..) В каком цвете можно сделать сайт стоматологии, чтобы было интересно, стильно, притягательно для взгляда? Спасибо, очень хотела бы услышать Ваше мнение.

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

      Ни в коем случае, не используйте оттенки красного, оранжевого и коричневого - они ассоциируются с кровью.

      Кстати, эта тема подходит под медицинскую тематику.

  11. А как поменять на свой рисунок?

  12. Здравствуйте, какую цветовую схему лучше взять для рекламы услуг визажиста-стилиста и косметолога? Стоит ли разграничить эти две специализации или сделать всё вместе?

    • Мне представляется что то фиолетовое, серебристое и волшебное :).
      Делайте вместе.

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

    • Мне кажется, подойдет что нибудь темно синее или фиолетовое с россыпью звезд :).

      • Спасибо за такой оперативный ответ)

  14. Спасибо за информативную статью!
    Людмила, скажите, какие цвета подойдут для блога о туризме?

    • Синий, зеленый, белый - если туризм связан с морем или горами.
      Бежевый, песочный - если с пустыней.

  15. Что скажете если использовать зеленый и синий для блога о программировании?

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349