сочетания цветов для меню
· Инструмент для подбора цветов и генерации цветовых схем ·
Схема:
Насыщенность/Яркость
Схема:
Контрастность
Выбранный Вариант:
Насыщенность/Яркость
Постоянный адрес текущей цветовой схемы:
Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.
Также монохроматические вариации сделаны для каждого цвета в других схемах.
Не следует злоупотреблять контрастными цветами в дизайне, используйте их только как цветовой акцент.
Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.
Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.
Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.
Будьте осторожны: из-за ошибки округления во время преобразования, значение RGB, используемое в цветовой схеме, может немного отличаться от введенного значения.
Появилась удобная возможность поделиться цветовой палитрой с друзьями и коллегами, используя готовые коды для вставки картинки на форум или в блог.
Сочетание цветов
Для того чтобы создать хорошее сочетание цветов, не обязательно быть профессиональным дизайнером или специалистом по теории цвета. Как дизайнеры выбирают отличные сочетания цветов, ведь общее их количество очень огромно?
Чтобы ответить на этот вопрос, нужно для начала понять, что в целом сочетание цветов можно считать субъективным, но есть психологические аспекты, которые влияют на человеческое восприятие.
То есть, каждый цвет и сочетание цветов влияют на восприятие человека и может побуждать его к совершению какого-либо действия. Чтобы создавать и использовать только хорошие цветовые сочетания, важно понимать природу и особенности каждого цвета. Для начала разберем природу цветов и их сочетания.
Красный, синий и желтый называются основными цветами, потому что остальные комбинации формируются из этих. Более прагматично, вы можете назвать их «родителями» цветов.
Вторичные цвета создаются путем объединения основных цветов в равных частях:
Наконец, у нас есть цвета третьего уровня, которые формируются комбинацией первично-вторичных в равных частях.
Значение цветов
Каждый цвет несет свое значение и восприятие для человека. Рассмотрим основные цветовые значения.
Вы когда-нибудь задавали себе вопрос, почему большинство дорожных знаков содержат красный цвет? Теперь у вас есть ответ на этот вопрос.
Синий цвет отлично подходит практически во всех сферах, он олицетворяет небо, воду, а также легкость и некую непринужденность, и безмятежность. Человеку данный цвет дает ощущение комфорта и спокойствия.
Так как данный цвет символизирует открытость – мы можем его наблюдать в таких социальных сетях, как вконтакте, фесбук и твиттер. Также данный цвет часто применяется на сайтах, связанных с финансами.
Зеленый цвет ассоциируется с чистотой, свежестью и легкостью. Данный цвет часто используется в здоровом питании, а также для обозначения окружающей среды.
По результатам многочисленных исследований, при стрессовых ситуациях человек испытывает крайне негативные эмоции и происходит повышение его цветочувствительности к зелёному и синему. И напротив — если человек переживает положительные эмоции, чувствительность к этим цветам снижается.
Примеры хороший сочетаний цветов
Ниже приведены отличные примеры сочетаний цветов, данные сочетания вы можете использовать при разработке веб-сайта, приложения, а также создания интерьера.
Что такое цветовой круг Иттена и как дизайнеры подбирают цвета с его помощью
Каждый [охотник] желает знать, как гармонично сочетать оттенки. Пробуем магию цветового круга.
Круг Иттена — это схема из 12 цветов. Все оттенки во внешнем круге получены из трёх цветов, расположенных в центре.
Давайте разберёмся, из чего состоит круг Иттена и для чего он нужен художникам и дизайнерам.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Как устроен круг Иттена
В центре есть треугольник из основных цветов — синего, жёлтого и красного, — смешивая которые, можно получить любые оттенки, доступные человеческому глазу. Эти цвета в схеме также называются первичными. Если смешать по два из трёх первичных цветов, получаются вторичные цвета. Жёлтый с синим при смешении дают зелёный, жёлтый с красным — оранжевый, а синий с красным — фиолетовый.
Ещё в круге есть третичные цвета. Они получаются при смешивании первичного и вторичного цвета, которые соседствуют друг с другом на схеме. Например, жёлтый и зелёный дают третичный цвет — жёлто-зелёный, жёлтый и оранжевый дают жёлто-оранжевый и так далее. В результате во внешнем круге на схеме мы видим 12 цветов, из которых три первичных, три вторичных и шесть третичных.
Если посмотреть на внешний круг, можно увидеть, что цвета в нём расположеы в спектральном порядке, как на радуге: от красного, который по физическим характеристикам имеет самую большую длину волны, до фиолетового, у которого она самая короткая.
Как и когда появился круг Иттена
В истории было много попыток систематизировать цвета: есть цветовой круг Ньютона, Гёте и Оствальда. Но именно круг Иттена стал самым популярным. В бумажном виде эта схема продается теперь в любом художественном магазине.
Свою схему Иттен построил, опираясь на труды предшественников — физиков, химиков, психологов и художников. Он сумел собрать все существующие теории в простую и логичную систему.
Зачем нужен круг Иттена
Цветовой круг помогает подбирать гармоничные цветовые сочетания. Пожалуй, сейчас это самый популярный инструмент графических дизайнеров и художников. Опираясь на схему, можно выбрать палитру для интерфейса сайта, фирменного стиля или иллюстрации.
Круг устроен так, что максимально контрастные цвета расположены дальше всего друг от друга. А близкие цвета, соответственно, являются смежными на схеме. Всё цветовое пространство круга можно условно поделить пополам: от зелёного до малинового цвета идут холодные оттенки, а от красного до жёлто-зелёного — теплые.
Цвета в круге выстраиваются в стройную систему, и это здорово. Потому что простые фигуры, наложенные на такую схему, будут показывать гармоничные сочетания.
Основные комбинации на круге Иттена
Вариантов сочетаний цветов по кругу Иттена очень много. Давайте рассмотрим несколько из них, которые используются чаще всего.
1. Если провести через центр круга прямую линию, получится комплементарное сочетание — оно максимально контрастное.
Сочетание дополнительных цветов активное и энергичное. Если использовать их в равных пропорциях, они могут перебивать друг друга. Такое сочетание хорошо подходит для расстановки акцентов: для этого один из цветов берут как базовый, а другого добавляют немного, чтобы выделить отдельные объекты на изображении.
Это хорошая альтернатива комплементарному сочетанию: здесь сочетание по-прежнему контрастное, но уже не такое резкое. Если вам нужно чуть приглушить контраст дополнительных цветов или просто расширить палитру с двух до трёх цветов, можно выбирать такой вариант.
3. Равносторонний треугольник образует классическую триаду: три цвета в его углах будут давать сбалансированное сочетание. Этот вариант подойдёт, если вам нужно больше разнообразия в цветовой гамме.
Если вы задумали использовать один конкретный цвет и хотите подобрать к нему ещё два, которые будут кардинально различаться, схема с равносторонним треугольником поможет сделать это быстро и избежать ошибок.
4. Ещё один вариант комбинации из трёх цветов — аналоговая триада. Здесь задействованы цвета, расположенные на круге рядом. Это сочетание без интенсивных контрастов.
Эта палитра — спокойная и сдержанная. Аналоговое сочетание подойдёт, если вам нужны мягкие переходы между цветами без резких акцентов.
5. Когда трёх цветов недостаточно, можно выбрать четыре. Например, квадрат, наложенный на круг Иттена, образует сочетание тетрады : все четыре цвета гармонируют между собой.
По сути, здесь представлено сочетание из двух пар дополнительных цветов. Сочетание четырёх цветов в тетраде позволяет создавать красочное и разнообразное изображение.
6. Ещё одно сочетание двух пар комплементарных цветов — прямоугольная схема. В отличие от тетрады, здесь сочетаются более близкие оттенки.
Если нужно четыре цвета, но не требуется такой широкий спектр, как в квадратной схеме, то этот вариант подойдёт. Здесь будет достигнут контраст за счёт сочетания комплементарных пар, но сами эти пары ближе друг к другу на спектре.
Что делать с тысячами других оттенков
В круге всего 12 цветов, а дизайнеру приходится оперировать бесчисленным множеством оттенков. Круг Иттена — это упрощённая схема, а не полноценное решение. Но её можно использовать и более широко.
Представим, что нужен контраст к бирюзовому. На круге его нет, но мы понимаем, что этот цвет — зелёно-голубой. Значит, контрастный цвет на круге будет максимально удалён от границы этих двух цветов. Максимально удалённая точка — граница между красным и красно-оранжевым. Смешение этих цветов будет контрастно к бирюзовому.
А уж какой именно оттенок бирюзового и красно-оранжевого выбрать — это работа дизайнера. Кстати, есть ещё два параметра: насыщенность и яркость. Цвет может быть бледным или сочным, тёмным или светлым. Например, красный бывает совсем ненасыщенным, то есть розовым. Или очень тёмным, бордовым. Это тоже влияет на восприятие картинки.
Автоматические инструменты для выбора палитры
Технологии облегчают жизнь современным дизайнерам и художникам. Например, подобрать сочетание конкретных оттенков можно на расширенном цветовом круге. Он позволяет точно задать тон, насыщенность, яркость и найти подходящие цвета, используя те же самые схемы круга Иттена, которые мы рассмотрели.
В теории Иттена есть много интересного и кроме цветового круга: как работать с цветовым воздействием и субъективными цветами, какие бывают контрасты и как, например, связаны форма и цвет. Читайте об этом в нашем обзоре книги «Искусство цвета».
Для более сложной работы с множеством цветом есть удобный инструмент у Adobe. Он основан на таких же правилах сочетания, но позволяет быстро редактировать параметры каждого цвета в палитре и смотреть, как от этого меняется гармоничная гамма.
Что делать дальше
Круг Иттена помогает быстро подбирать подходящие сочетания для разных случаев. В бумажной или цифровой версии им пользуются как новички, так и опытные дизайнеры и художники. Это полезный инструмент, который упрощает работу. Конечно цветовосприятие можно тренировать и научиться подбирать цветовые сочетания самостоятельно. Со временем появится навык, позволяющий не зависеть от наличия схемы под рукой.
Хотите поупражняться в колористике под руководством опытных преподавателей? Записывайтесь на наш курс графического дизайна.
Цветовой круг Иттена. 5 способов сочетать цвета правильно
Хочу поделиться интересной, на мой взгляд, и полезной информацией.
Возможно, кто-то уже слышал о Цветовом круге Иттена, который предлагает нам освоить 5 способов, чтобы научиться сочетать самые сумасшедшие цвета без ошибок.
Иттен Йоханнес (Itten, Johannes) — швейцарский художник, теоретик нового искусства и выдающийся педагог. Получил всемирную известность благодаря сформированному им учебному курсу Баухауза, так называемому форкурсу, который лёг в основу преподавания многих современных начальных художественных учебных заведений.
Вдумчивый исследователь, свои теоретические и педагогические взгляды и, что особенно ценно, саму систему подготовки художников, Иттен изложил в своих знаменитых книгах о цвете и форме, изданных на многих языках.
Его система призвана не подавлять личность, а помогать художнику выбрать свой путь, не теряя уверенности в своих силах.
Его элементарная таблица отучит вас бояться разноцветных вещей и поможет гармонично их сочетать.
Способ № 1: Сочетание первичных цветов
Существует три первичных цвета:
Они находятся в центральном треугольнике, для более легконо восприятия они соединены между собой. Эти три цвета удивительно гармонично смотрятся в одном образе как все вместе, так и в сочетании по парно.
Комбинация этих трех основных цветов — сильная, яркая и эмоциональная. В нем отсутствует контраст дополнительных оттенков. А выразительность достигается разницей оттенков.
Выберите один из этих базовых цветов и купите, например, красную водолазку, а к ней — желтую юбку и голубое платье-комбинацию (см.фото 1) или выберите основной цвет и дополните аксессуарами из этой «цветовой тройки».
Способ № 2: Сочетание аналоговых цветов
Это один из самых простых способов сочетания цветов в одежде.
Аналоговые цвета стоят в круге рядом и последовательно. Вы выбираете один из них, например, зеленый — и смело сочетаете его с вещами аналоговых цветов, стоящих в круге по соседству, кроме того, в такой образ отлично впишется и небесно-голубой и бирюзовый. Как пример — образ девушки на картинке слева (см.выше): бирюзовая дубленка, платье-комбинация цвета морской волны и голубая сумочка — необычно, стильно и весьма элегантно!
Или же на фото ниже. Говорят, что фиолетовый — это цвет депрессии и одиночества. Возможно где-то это и так, если это изо дня в день повторяющиеся монотонные образы, но когда один фиолетовый разбавляешь родственными ему тонами и полутонами, добавляешь соседний к нему фуксию, то здесь сразу на лицо весна, цветы, пение птиц и прекрасное настроение! 🙂
Смотрятся аналоговые цвета в одном образе всегда очень гармонично, спокойно и
располагающе и между ними не возникает яркого контраста.
Способ № 3: Сочетание противоположных цветов
Для этого способа сочетания используют противоположные друг другу цвета.
В качестве примера рассмотрим пару синий-оранжевый или фиолетовый-оранжевый, что, казалось бы, на слух воспринимается критично). К примеру, худи темно-синего (иссине-черного) цвета, придает образу строгости и элегантности, а шелковая оранжевая юбка в бельевом стиле — яркости и романтичности — смотрится роскошно!
Для эксперимента выберите любой оттенок на палитре и, чтобы не запутаться, соедините его линией с противоположным.
Способ № 4: Сочетание цветов по принципу треугольника
Этот способ еще называют классической триадой.
(Кстати, есть еще способ по принципу квадрата или четырехугольника, где получается больше цветов в образе, но это уже для более смелых девушек, склонных к творческим экспериментам).
Для способа «треугольник» достаточно выбрать на круге один базовый для образа цвет и соединить с ним еще два таким образом, чтобы получился треугольник.
Допустим, мы выбрали ярко-синий (электрик) и строим треугольник — в двух его вершинах окажутся желтый и один из красных тонов. Вы можете совместить в одном образе три отдельные вещи, используя эти цвета, либо купить любую вещь с принтом, где присутствуют все эти цвета.
Способ № 5: Усложненное сочетание противоположных цветов
Наверное, это самый не простой метод, но усложненное сочетание противоположных цветов в одежде выглядит невероятно стильно.
Здесь ваша задача будет заключаться в следующем: необходимо выбрать три аналоговых цвета (смотри способ № 2) и один контрастный с противоположной стороны круга. На нашем примере схема получилась следующая: желто-оранжевый, оранжевый, красно-оранжевый — аналоговые цвета, голубой — контрастный, противоположный.
Обязательно попробуйте собрать хотя бы один образ с помощью цветового круга Иттена, используя один из способов.
Экспериментируйте! Это намного проще, чем кажется!
Материал взят из открытого доступа в интернете.
Цвета для сайта: 50 идей от лучших дизайнеров
Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших!
Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших!
Найти то самое сочетание поможет коллекция цветовых палитр сайтов, отмеченных престижным сайтом Awwwards. Вдохновляйтесь и смело реализуйте, эти дизайны одобрены гуру индустрии.
Цвета для сайта: 50 палитр
1. Active Theory
В этой палитре сочетаются теплые и холодные оттенки, при этом она выглядит насыщенно, но не перегружено. Отлично подойдет для молодежного и современного дизайна.
2. Paypr
Здесь оттенки синего и фиолетового сочетаются с ярким красно-оранжевым акцентом, который сразу обращает внимание пользователей на самое важное.
3. Resn
Цветовая палитра выглядит очень естественно. Идеально подойдет для сайтов, связанных с природой и “зеленой” тематикой.
4. Grosse Lanterne
Темно-синий и зеленый сочетаются в лаконичной и нестандартной цветовой схеме. Вместе они успокаивают и располагают к себе.
5. W&CO
Бросающееся в глаза сочетание кораллового и голубого смотрится достаточно смело. Выбирайте эти цвета для необычного и ультрасовременного проекта.
6. Stinkdigital
7. Bordel Studio
Элегантная палитра объединяет темные приглушенные оттенки и создает утонченный дизайн.
8. ReedBe
Красно-коричневый в комбинации с насыщенным красным и лавандовым привлекает своей глубиной и уникальностью.
9. Samsy
Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года.
10. Bryan James
Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом.
11. Anton & Irene
Это красивое сочетание розового, салатового и серого идеально подойдет для создания яркого и располагающего к себе дизайна.
12. Bert
От такого сайта сложно оторвать взгляд, темные оттенки серого в сочетании с бирюзовыми акцентами украсят любой современный проект.
13. BrightMedia
В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа.
14. Julie Flogeac
Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.
15. Epic
Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко.
16. MediaMonks
Эта цветовая гамма подойдет всем, кто планирует создать футуристичный и современный сайт.
17. eDesign Interactive
Три ярких цвета на темно-сером фоне приковывают к себе взгляды и вдохновляют энергичностью.
18. HAUS
Эту палитру стоит выбрать для элегантного и футуристичного сайта, она добавит ему динамики и утонченности.
19. Gusto Ids
Цвет яичной скорлупы, насыщенный ванильный и серый в сочетании с акцентным красным смотрятся лаконично и ассоциируются с теплотой и гостеприимством.
20. FCINQ
Идеальный пример цветовой схемы для модного сегодня стиля киберпанк. Яркие неоновые оттенки и грамотно подобранные акценты выведут любой сайт на новый уровень.
21. Change Digital
Оттенки голубого и фиолетового выглядят в этой палитре особенно свежо, они одновременно заряжают энергией и успокаивают.
22. Watson/DG
Если вы ищете более классический бизнес-вариант, обратите внимание на эту сдержанную палитру.
23. Supremo
Насыщенные оттенки синего делают этот дизайн сдержанным, но в то же время интересным. Отличный выбор для корпоративных и образовательных проектов.
24. Umwelt A/S
Эта простая, но эффективная комбинация выглядит профессионально и стильно.
25. Waaark
Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.
26. Five Hundred
Игривая и полная жизни палитра отлично дополнит смелые проекты.
27. Immersive Garden
И снова яркий цвет на темном фоне, в этот раз в главной роли зеленый. Выглядит элегантно.
28. SMFB
Здесь яркий акцентный желтый эффективно привлекает и направляет внимание пользователей.
29. Nurture Digital
30. Born05
Сочетание оттенков зеленого и синего ассоциируется с природой, стабильностью и надежностью.
31. Stinkdigital
Яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости.
32. AILOVE
Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание.
33. Superhero Cheesecake
34. Burocratik
Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.
35. Google Brand Studio
Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта.
36. Details
Неожиданное и современное решение поможет любому сайту стать лучшим в своей нише.
37. Cher Ami
Энергичная и оптимистичная палитра создана для ярких проектов.
38. Leavingstone
Удивительно, как это сочетание цветов одновременно ассоциируется и с холодом, и с теплом. Оптимальный вариант для праздничного дизайна.
39. Elespacio
Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм.
40. SFCD
Всего пара элементов и правильно подобранные цвета делают из простой страницы образец качественного дизайна.
41. Great Works Copenhagen
Бесстрашное сочетание оттенков синего и красного подчеркнет профессионализм и силу проекта.
42. Resn
Плоский дизайн в современном небанальном исполнении.
43. Play
Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.
44. details.ch
Утонченная и классическая палитра с современными нотками, подчеркнет серьезность и актуальность проекта.
45. stinkdigital
46. EPIC
Приглушенные оттенки синего, красного и зеленого выглядят традиционно и профессионально.
47. Apart
Гламурный и свежий взгляд на дизайн сайтов, цвета подчеркнут статус владельца.
48. FUTURAMO
Бирюзовый и розовый на фоне приглушенных оттенков привлекают внимание и выглядят профессионально.
49. Panic
50. madeo
Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.
Даже если вы новичок в дизайне в поисках идеальных цветов для своего сайта, эти палитры помогут создать по-настоящему профессиональный и модный проект. Идеи для графического дизайна ждут вас здесь.
