Сочетание цветов в сайте: где найти и как выбрать

где найти и как выбрать

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

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

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

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

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

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

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

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

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

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

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

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

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

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

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

На что влияет выбор цветовой палитры

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

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

50 великолепных цветовых схем для дизайна вашего сайта

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

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

1. Красочные и сбалансированные

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

2. Яркие цвета с сильным акцентом

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

3. Природные и земные цвета

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

4. Свежие и лаконичные цвета

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

5. Смелые и яркие

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

6. Черные с ярким акцентом

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

7. Стильные и утонченные

Эта элегантная цветовая гамма объединяет темные приглушенные тона для создания чистого и утонченного образа. Оттенки серого и синего идеально подходят для более консервативных дизайнов.

8. Оттенки красновато-коричневого

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

9. Мистические темные цвета

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

10. Современные и смелые

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

11. Живые и привлекательные цвета

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

12. Поразительно простые цвета

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

13. Оттенки живого красного

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

14. Вычурные и креативные

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

15. Элегантные и доступные

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

16. Футуристические цвета

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

17. Инновационные и смелые

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

18. Текстурированные и динамичные

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

19. Теплые оттенки и минимализм

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

20. Яркие и контрастные цвета

Темно-розовый, фиолетовый и темно-синий цвета смешаны в этом красивом и привлекательном дизайне. Насыщенные неоновые оттенки действуют как акценты на темно-фиолетовом фоне, привлекая зрителей к навигационному меню, как только они открывают сайт.

21. Чистые и энергичные

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

22. Традиционная бизнес-классика

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

23. Глубокий сдержанный синий

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

24. Чистые и современные

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

25. Яркие и элегантные

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

26. Веселые и задорные цвета

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

27. Минималистичные контрастные цвета

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

28. Эффектные цвета с четким акцентом

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

29. Современные и актуальные цвета

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

30. Природные естественные цвета

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

31. Ярко-розовые и пастельные

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

32. Уникальная необычная комбинация цветов

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

33. Яркие цитрусовые цвета

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

34. Энергичные голубые и апельсиновые цвета

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

35. Оттенки бородово-красного и и синего

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

36. Дерзкие, смелые и современные

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

37. Веселые и энергичные

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

38. Снежный, но теплый

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

39. Богатство насыщенных красок

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

40. Элегантный минимализм

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

41. Простые и бесстрашные цвета

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

42. Плоские и простые цвета

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

43. Комфортный и спокойный

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

44. Классический и традиционный

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

45. Популярные акцентные цвета

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

46. Серьезный корпоративный

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

47. Гламурные и стильные цвета

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

48. Привлекательный и насыщенный

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

49. Контрастные кислотные цвета

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

50. Оптимистичные, живые успокаивающие цвета 

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

Публикация адаптирована в веб-студии АВАНЗЕТ на основе опыта гуру индустрии дизайна и статьи Найоми Чибана. Вдохновляйтесь вместе с visme и найдите для себя идеальную цветовую палитру!

18.07.2021

← Поделиться с друзьями !

7 Сочетаний цветов для Веб-дизайна

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

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

1. Меньше значит Больше

Не перебарщивайте! Хоть и красочные сайты выглядят яркими и красивыми, они обычно отвлекают посетителя от основного контента. Палитра из 3-4 основных цветов — оптимальное решение как для человеческого глаза, так и для удобного пользовательского опыта. 

2. Играйте с контрастностью 

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

3. Изучите психологию цветов

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

4. Вдохновляйтесь природой

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

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

 

Использованная комбинация цветов:

• #d4d1cf
• #873f2d
• #171717
• #1e2223

THE TEA FACTORY

 

Использованная комбинация цветов:

HELLO STUDIOS 

 

Использованная комбинация цветов:

• #E4DBBF
• #DC5B21
• #70AB8F
• #383127

BOOKS AT WORK

 

Использованная комбинация цветов:

• #b6d8d5
• #061b33
• #c45238
• #84b0af

NAMES FOR CHANGE 

 

Использованная комбинация цветов:

ANOTHER PONY 

 

Использованная комбинация цветов:

YUMMY

 

Использованная комбинация цветов:

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

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

 

 

> Посмотреть Шаблоны

 

 

50 идей от лучших дизайнеров

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

Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших! 

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

 

Цвета для сайта: 50 палитр

1. Active Theory

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

#E27D60 — #85DCB — #E8A87C — #C38D9E — #41B3A3

2. Paypr

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

#242582 — #553D67 — #F64C72 — #99738E — #2F2FA2

3. Resn

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

#8D8741 — #659DBD — #DAAD86 — #BC986A — #FBEEC1

4. Grosse Lanterne

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

#05386B — #379683 — #5CDB95 — #8EE4AF — #EDF5E1

5. W&CO

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

#FC4445 — #3FEEE6 — #55BCC9 — #97CAEF — #CAFAFE

6. Stinkdigital

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

#8EE4AF — #EDF5E1 — #5CDB95 — #907163 — #379683

7. Bordel Studio

Элегантная палитра объединяет темные приглушенные оттенки и создает утонченный дизайн. 

#5D5C61 — #379683 — #7395AE — #557A95 — #B1A296

8. ReedBe

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

#2E1114 — #501B1D — #64485C — #83677B — #ADADAD

9. Samsy

Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года. 

#0C0032 — #190061 — #240090 — #3500D3 — #282828

10. Bryan James

Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом. 

#1A1A1D — #4E4E50 — #6F2232 — #950740 — #C3073F

11. Anton & Irene

Это красивое сочетание розового, салатового и серого идеально подойдет для создания яркого и располагающего к себе дизайна.            

#E7717D — #C2CAD0 — #C2B9B0 — #7E685A — #AFD275

12. Bert

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

#0B0C10 — #1F2833 — #C5C6C7 — #66FCF1 — #45A29E

13. BrightMedia 

В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа.

#5D001E — #E3E2DF — #E3AFBC — #9A1750 — #EE4C7C

14. Julie Flogeac

Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.

#D79922 — #EFE2BA — #F13C20 — #4056A1 — #C5CBE3

15. Epic

Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко. 

#EDC7B7 — #EEE2DC — #BAB2B5 — #123C69 — #AC3B61

16. MediaMonks

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

#2C3531 — #116466 — #D9B08C — #FFCB9A — #D1E8E2

17. eDesign Interactive

Три ярких цвета на темно-сером фоне приковывают к себе взгляды и вдохновляют энергичностью.

#272727 — #747474 — #FF652F — #FFE400 — #14A76C

18. HAUS

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

#2F4454 — #2E151B — #DA7B93 — #376E6F — #1C3334

19. Gusto Ids

Цвет яичной скорлупы, насыщенный ванильный и серый в сочетании с акцентным красным смотрятся лаконично и ассоциируются с теплотой и гостеприимством. 

#EAE7DC — #D8C3A5 — #8E8D8A — #E98074 — #E85A4F

20. FCINQ

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

#D83F87 — #2A1B3D — #44318D — #E98074 — #A4B3B6

21. Change Digital

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

#5680E9 — #84CEEB — #5AB9EA — #C1C8E4 — #8860D0

22. Watson/DG

Если вы ищете более классический бизнес-вариант, обратите внимание на эту сдержанную палитру. 

#88BDBC — #254E58 — #112D32 — #4F4A41 — #6E6658

23. Supremo  

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

#25274D — #464866 — #AAABB8 — #2E9CCA — #29648A

24. Umwelt A/S

Эта простая, но эффективная комбинация выглядит профессионально и стильно. 

#17252A — #2B7A78 — #3AAFA9 — #DEF2F1 — #FEFFFF

25. Waaark           

Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.  

#F8E9A1 — #F76C6C — #A8D0E6 — #374785 — #24305E

26. Five Hundred 

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

#A64AC9 — #FCCD04 — #FFB48F — #F5E6CC — #17E9E0

27. Immersive Garden

И снова яркий цвет на темном фоне, в этот раз в главной роли зеленый. Выглядит элегантно.

#61892F — #86C232 — #222629 — #474B4F — #6B6E70

28. SMFB

Здесь яркий акцентный желтый эффективно привлекает и направляет внимание пользователей. 

#FAED26 — #46344E — #5A5560 — #9D8D8F — #9B786F

29. Nurture Digital 

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

#182628 — #65CCB8 — #57BA98 — #3B945E — #F2F2F2

30. Born05

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

#687864 — #31708E — #5085A5 — #8FC1E3 — #F7F9FB

31. Stinkdigital

Яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости. 

#A1C3D1 — #B39BC8 — #F0EBF4 — #F172A1 — #E64398

32. AILOVE

Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание. 

#59253A — #78244C — #895061 — #0677A1 — #2D4159

33. Superhero Cheesecake

Сочные цитрусовые оттенки — лучший выбор для сайтов о спорте и экстриме.

#1F2605 — #1F6521 — #53900F — #A4A71E — #D6CE15

34. Burocratik

Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.

#10E7DC — #0074E1 — #1B9CE5 — #6CDAEE — #F79E02

35. Google Brand Studio

Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта.

#4285F4 — #5C2018 — #BC4639 — #D4A59A — #F3E0DC

36. Details

Неожиданное и современное решение поможет любому сайту стать лучшим в своей нише.

#080F5B — #0D19A3 — #15DB95 — #F4E4C1 — #E4C580

37. Cher Ami

Энергичная и оптимистичная палитра создана для ярких проектов.

#FBE8A6 — #F4976C — #303C6C — #B4DFE5 — #D2FDFF

38. Leavingstone

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

#B23850 — #3B8BEB — #E7E3D4 — #C4DBF6 — #8590AA

39. Elespacio

Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм. 

#F78888 — #F3D250 — #ECECEC — #90CCF4 — #5DA2D5

40. SFCD  

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

#19181A — #479761 — #CEBC81 — #A16E83 — #B19F9E

41. Great Works Copenhagen

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

#314455 — #644E5B — #9E5A63 — #C96567 — #97AABD

42. Resn

Плоский дизайн в современном небанальном исполнении.

#00887A — #FFCCBC — #FFFFFF — #D3E3FC — #77A6F7

43. Play

Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.  

#844D36 — #474853 — #86B3D1 — #AAA0A0 — #8E8268

44. details.ch

Утонченная и классическая палитра с современными нотками, подчеркнет серьезность и актуальность проекта.

#5F6366 — #4D6D9A — #86B3D1 — #99CED3 — #EDB5BF

45. stinkdigital

Палитра — лучшее решение для сайтов с небольших количеством элементов. Акцентный фиолетовый поможет привлечь внимание к вашему посланию.

#802BB1 — #2D283E — #564F6F — #4C495D — #D1D7E0

46. EPIC

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

#265077 — #022140 — #494B68 — #1E4258 — #2D5F5D

47. Apart

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

#806543 — #33266E — #111111 — #542F34 — #A6607C

48. FUTURAMO

Бирюзовый и розовый на фоне приглушенных оттенков привлекают внимание и выглядят профессионально.

#501F3A — #CB2D6F — #CCCCCC — #14A098 — #0F292F

49. Panic

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

#C34271 — #F070A1 — #16FFBD — #12C998 — #439F76

50. madeo

Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.

#026670 — #9FEDD7 — #FEF9C7 — #FCE181 — #EDEAE5

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

100 цветовых сочетаний | Генератор палитры цветов

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

Экспериментировать с оттенками поможет генератор цветовых сочетаний Canva. Он «раскладывает» любое фото на основные оттенки и показывает их hex-коды, чтобы вы легко могли найти их в графическом редакторе.

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

Теплые цветовые сочетания

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

2. Осень

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

3. Теплая листва

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

5. Теплый рустик

6. Ювелирные тона

7. Шоколадный брауни

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

8. Уют и тепло

9. Винный покой

10. Солнечный городок

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

11. Средиземноморский полдень

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

12. Осенний оранж

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

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

13. Золотой полдень

14. Сила знаний

15. Теплая и стильная

Холодные цветовые сочетания

16. Морская волна

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

Редактировать шаблон

Редактировать шаблон

17. Зеленый туман

18. Водная синева

19. Туман мегаполиса

20. Арктический рассвет

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

21. Голубые и серые льды

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

Свежие сочетания цветов

22. Яркая Исландия

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

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

23. Лес после дождя

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

24. Современность

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

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

25. Свежая зелень

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

26. Горное озеро

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

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

27. Свежесть и энергия

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

28. Свежая зелень

29. Зеленые поля

Редактировать» data-3=»шаблон»» data-columns=»1″ data-scaled=»true» data-shortcode=»template»>

Редактировать шаблон

30. Цитрус и трава

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

31. Садовая свежесть

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

32. Летняя фиеста

33. Природная элегантность

Темные цветовые схемы

34. От заката до сумерек

Обратите внимание не только на сами палитры, но и на названия оттенков. Если вы продаете одежду, мебель, текстиль, придумайте красивые названия для цветов, которые используете. «Бледно-розовый» может отпугнуть, а вот нежный «румянец» намекает на красоту и естественность.

35. Лосось и ржаной хлеб

36. С высоты полета

37. Янтарь и лазурь

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

38. Неоновая вывеска

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

39. Экзотика и прочность

40. Солнце и небо

Яркие и смелые палитры цветов

41. Цветочный луг

Красный, желтый и синий — классическая триада цветового спектра. Объединить их все в одном дизайне — очень смелое решение. Здесь такое сочетание цветов смотрится хорошо за счет того, что все оттенки слегка приглушены. Поэтому их можно использовать и в качестве фона, как в этом шаблоне Yellow Illustrated Classroom Preschool Poster.

Редактировать шаблон

42. Утренняя свежесть

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

С зеленым гармонируют красный — его комплиментарный цвет в цветовом спектре. Вместе они создают яркое и насыщенное сочетание цветов.

43. Тропический цветок

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

44. Летний подсолнечник

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

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

45. Корзинка овощей

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

46. Стойка с лимонадом

47. Веселая и тропическая

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

48. Сыр, инжир и базилик

49. Солнечный цитрус

50. Яблочный контраст

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

51. Неоновая ночь

52. Дерзость граффити

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

53. Ночная жизнь

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

54. Вечеринка с бассейном

Классические цветовые палитры

56. Чашка капучино

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

Если хотите создать такие кофейные сочетания, используйте шаблоны Coffee Coupon или Birtday Post.

Редактировать» data-3=»шаблон»» data-columns=»1″ data-scaled=»true» data-shortcode=»template»>

Редактировать» data-3=»шаблон»» data-columns=»1″ data-scaled=»true» data-shortcode=»template»>

57. Ягодная синева

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

58. Изысканная простота

59. Технология и природа

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

Желтый акцент поможет привлечь внимание.

60. Городская жизнь

61. Городской оазис

62. Современный лоск

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

63. Нейтральный шебби шик

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

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

64. Классический металлик

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

65. Зимние краски

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

Оттененный спокойными бело-серыми цветами, красный намекает на силу и роскошь.

66. Море и пшеница

Классическая комбинация: нейтральные темно-синий и cлоновая кость на фоне, ярко-красный — на переднем плане. Если боитесь агрессии красного, то используйте нежный и безопасный цвет слоновой кости.

67. Самобытная и неожиданная

68. Городские виды

69. Индустриальная строгость

70. Профессионализм и власть

Пастельные цветовые палитры

71. Нежные тюльпаны

У каждого цвета есть своя «температура». Теплые оттенки ассоциируются с уютом, летом, защищенностью, детством. Может, именно благодаря такой теплой бирюзе, героиня из фильма «Завтрак у Тиффани» так безопасно чувствовала себя в магазине Tiffany?

Это цветовое сочетание хорошо подойдет, если ваш товар — для малышей или домашнего хозяйства.

72. Птицы и ягоды

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

73. Стильное ретро

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

74. Летнее барбекю

75. Безмятежность СПА

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

76. Пастель

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

77. Клубника со сливками

Красный с примесью оранжевого все так же пробуждает эмоции, но уже не «нападает» на смотрящего. Это интересное цветовое сочетание подходит для социальной рекламы: плакатов о донорстве крови, сайтов о волонтерстве, как в шаблонах Pastel Abstract Classroom Jobs Poster и Cream and Red Hand World Blood Donor Day Poster. Вспомните, к примеру, логотип Красного Креста.

78. Приглушенная античность

80. Солнце в городе

83. Расслабляющее ретро

84. Утонченность

85. Романтическая прогулка

86. Нежный контраст

87. Снова в школу

88. Дымчатый пурпур

Контрастные цветовые сочетания

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

91. Шик без вульгарности

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

92. Ягоды земляники

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

94. Кухня 1950-х

95. Городские контрасты

96. Оранжевый акцент

97. По ту сторону черного и белого

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

98. Прибой у песчаного берега

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

99. Греческие каникулы

100. Морские огни

Как подбирать цветовые сочетания с помощью генератора палитры Canva

• Откройте генератор палитры. Он предложит загрузить свое изображение или проанализировать случайную картинку из коллекции Canva. Нажмите на «Upload an image»

• Загрузите нужное изображение с компьютера: выберите его и нажмите «Открыть».

• Ваша палитра готова. Кликните на понравившийся цвет — и его hex-код автоматически скопируется.

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

Редактировать шаблон

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

Подбор цветовой палитры сайта: 5 бесплатных сервисов

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

Мы собрали 5 генераторов цветовых палитр, которые помогут найти лучшие цвета для вашего сайта.

1. Adobe Color CC

2. Khroma

3. Coolors

4. Color Tool — Material Design

5. ColorSpace

01. Adobe Color: изучите готовые цветовые комбинации или создайте новую.

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

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

Чтобы отредактировать понравившуюся тему, нажмите на три горизонтальные точки и выберите «Edit this theme».

Также обратите внимание на цветовой круг. Здесь вы можете играть с цветами, используя параметры CMYK, RGB, LAB и HSV.

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

Типы правил:

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

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

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

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

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

Тени — используется пять цветов одного оттенка и насыщенности), но с разными значениями яркости.

Настраиваемое — цвета для палитры выбираются вручную.

02. Khroma: бесконечное количество комбинаций и машинное обучение

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

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

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

03. Coolors: профессиональный инструмент охотника

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

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

Кстати, сервис доступен и на смартфонах.

04. Color Tool — Material Design: тест вашего вкуса UI

Material Design — это дизайн система, разработанная Google. Она применяется во всех их продуктах для поддержания единства и согласованности визуального языка.

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

Color Tool — лишь небольшая часть этой ошеломляюще богатой базы данных инструментов и информации, которую предоставляет Google Material Design. Этот простой и удобный инструмент является одним из самых профессиональных и тем не менее простых генераторов цветовых схем. Он позволяет проверить, как выбранная цветовая палитра может выглядеть в дизайне пользовательского интерфейса.

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

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

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

05. ColorSpace: один цвет, множество вариантов.

Если у вас есть цвет, на основе которого вы хотите создать цветовую палитру, например, цвет бренда или просто любимый оттенок, то ColorSpace — это инструмент для вас. Введите значения RGB, HEX-код или найдите свой цвет прямо на цветовом круге, а затем нажмите «Создать». Сервис мгновенно создаст большое количество цветовых комбинаций, вам останется только выбрать лучшее из них.

Команда Wix ❤️

Цвет в веб-дизайне. Особенности использования. Как выбрать цвет для сайта?

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

По данным опросов, 9 из 10 пользователей не доверяют сайтам с плохим дизайном. Около половины людей считают, что охотнее верят сайту с минималистичным оформлением, чем сложным и броским. Не меньше трети интернет-пользователей считают ресурсы с устарефрим оформлением заброшенными и стараются с такими не взаимодействовать.

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

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

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

Что нужно знать о сочетании цветов

О сочетании цветов спектра говорил еще сэр Исаак Ньютон, создавший в 1706 году цветовое кольцо. Цветовое кольцо — это круг, разделенный на сегменты. В базовой версии кольца ­первичной, есть сегменты только трех основных цветов: красного, зеленого и синего. Для получения спектра второстепенных цветов нужно смешать соседние цвета сегментов первичного кольца. Звучит сложно, поэтому лучше один раз увидеть, чем трижды прочитать:

Усложнение цветового кольца: от первичного до третичного

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

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

Помимо схем сочетания цветов, при оформлении сайта учитываются цветовые модели:

• RGB, построена на трех основных цветах: красном, зеленом, синем. Все прочие оттенки образуются путем смешивания этих цветов.

  В HTML оттенки кодируются символами от 00 до FF, перед которыми вводится символ #.

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

Наглядный пример построения цветового сочетания на базе CMYK для оформления сайта: mirkleya.com.ua.

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

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

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

1. Фирменный стиль. Когда есть готовый фирменный стиль и логотип, который уже закрепился в памяти людей, стал узнаваемым, или вы планируете его таким сделать, нужно обязательно обыграть брендовые цвета в дизайне сайта. Но при этом нужно учитывать, как выбранные цвета сочетаются между собой, как они будут смотреться в оформлении сайта. В некоторых случаях цвета из логотипа можно заменить похожими оттенками, регулируя интенсивность, жесткость и другие параметры цвета.
2. Тематика. Цвета для оформления сайта должны соответствовать его тематике или продукту/услугам, которым он посвящен.

   Например, бренды парфюмерии часто выбирают оттенки фиолетового, эко-бренды — зеленого, соцсети — синего, кофейни — коричневого. о это не значит, что вы не можете сделать фирменным цветом кофейни — белый, а соцсеть «покрасить» в красный, как сделал небезызвестный Pinterest.

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

Цвета и психологические особенности их восприятия

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

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

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

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

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

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

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

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

Черный. Изысканность, напряжение, доминирование, минимализм. С этим цветом стоит быть осторожным. Он может восхитить пользователя сочетанием минимализма и роскоши, а может вызвать негативную реакцию, раздражение. Впрочем, последнее случается всё реже. Больше того, наличие на сайте темной темы — один из основных трендов мира разботки корпоративных сайтов в 2020-х.

Сколько цветов нужно выбрать для оформления?

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

Оптимальная рабочая палитра для дизайна сайта — это 3-4 цвета:

• Основной цвет — им выделены ключевые акценты на страницах;
• Дополнительный — используется для второстепенных блоков, выгодно сочетается с основным, но не отвлекает от него.
• Фоновый — спокойный оттенок, на котором не теряются основной и дополнительный цвета.
• Цепляющий — контрастный к основному цвет, который притягивает внимание посетителя к целевым точкам: кнопкам, формам, объявлениям.

На подбор цвета сильно влияет основная цель сайта.

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

Лучшие цвета для оформления сайта можно подбирать самостоятельно или воспользоваться готовыми решениями сервисов: colourlovers.com, color.romanuke.com, paletton.com, flatuicolorpicker.com и их аналогами. Но учтите, что гармония оттенков не даст вам гарантии того, что сайт понравится целевой аудитории и окупит расходы на разработку.

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

Как узнать, что определенные цвета нравятся целевой аудитории

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

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

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

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

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

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

50 великолепных цветовых схем с потрясающих веб-сайтов

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

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

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

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

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

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

СВЯЗАННО: 50 красивых цветовых комбинаций (и как их применить к вашим дизайнам)

1 Красочный и сбалансированный

Активная теория

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

2 ярких акцентных цвета

Paypr

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

3 Натуральный и землистый

Resn

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

4 Прохладный и свежий

Grosse Lanterne

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

5 Смелый и яркий

W&CO

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

6 вермиллионов и русская зелень

Stinkdigital

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

7 Стильный и изысканный

Bordel Studio

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

8 фиолетовых оттенков и тонов

ReedBe

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

9 глубоких пурпурных и блюзовых оттенков

Самсы

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

10 Современные и смелые

Брайан Джеймс

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

11 Живые и манящие

Антон и Ирен

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

12 Поразительно и просто

Берт

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

13 Красный и живой

BrightMedia

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

14 Вычурное и творческое

Джули Флогак

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

15 Элегантный, но доступный

Эпический

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

16 Изящный и футуристический

MediaMonks

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

17 Новаторский и смелый

Интерактивный дизайн eDesign

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

18 Текстурированный и динамический

HAUS

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

19 Минимальный, но теплый

Идентификаторы удовольствия

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

20 Яркие и четкие

FCINQ

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

21 Чистый и энергичный

Изменить цифровой

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

22 Корпоративное и традиционное

Уотсон / ДГ

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

23 Синий и освежающий

Supremo

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

24 Чистый и современный

Umwelt A / S

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

25 Яркий и элегантный

Waaark

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

26 Молодость и веселье

Пятьсот

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

27 Великолепный контраст

Иммерсивный сад

Этот элегантный и ультрасовременный сайт может похвастаться элегантным и привлекательным сочетанием с эффективным контрастом. Яркий желто-зеленый хорошо сочетается с черным и серым фоном.

28 эффективных акцентных цветов

SMFB

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

29 Современность в полном расцвете

Nurture Digital

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

30 Рядом с природой

Родился 05

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

31 Ярко-розовый и пастель

Stinkdigital

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

32 Уникальная комбинация

AILOVE

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

33 ярких цитрусовых цвета

Чизкейк супергероя

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

34 Яркие синие и оранжевые

Бюрократик

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

35 Красная роза и черника

Google Brand Studio

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

36 Смелый и уникальный

Детали

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

37 Веселая и энергичная

Шер Ами

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

38 Снежный, но теплый

Оставляющий камень

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

39 Богатство и красочность

Elespacio

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

40 Модерн и минимализм

SFCD

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

41 Бесстрашный и бесстрашный

Great Works Копенгаген

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

42 цвета Flat Design

Resn

Даже если вы не знакомы с термином «плоский дизайн», вы, вероятно, видели его раньше: веб-сайты без падающих теней, без градиентов, без скосов; Короче говоря, никаких трехмерных элементов.

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

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

43 Эклектичный и мирный

Играть

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

44 Шикарный и традиционный

details.ch

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

45 ярких акцентных цветов

stinkdigital

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

46 Корпоративное и серьезное

EPIC

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

47 Гламурно и модно

Апартаменты

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

48 Привлекательный и гладкий

ФУТУРАМО

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

49 Громко и прямо в лицо

Паника

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

50 живых, но успокаивающих

Мадео

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

Примеры лучших цветовых схем для веб-сайтов

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

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

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

Что такое цветовая схема веб-сайта?

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

Почему цветовые схемы сайта так важны?

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

Эстетика

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

Восприятие бренда

Знаете ли вы, что цвет связан с психологией? Разные цветовые схемы вызывают разные чувства: например, красный — уверенный, желтый — забавный, а синий — надежный.Согласно Buffer, более 90% нашей оценки продукта основывается только на цвете, и это касается и вашего веб-сайта. Это означает, что вы можете задать тон своему веб-сайту, выбрав цветовую схему, которая отражает то, как вы хотите, чтобы ваши посетители чувствовали себя.

Преобразование

Цветовая палитра вашего веб-сайта также может определить, действительно ли посетители вашего веб-сайта покупают у вас. Фактически, цвет настолько силен, что одно недавнее тематическое исследование показало, что выбор правильных цветов может увеличить конверсию до 24%! Например, многие люди считают, что красная кнопка CTA на странице продаж приносит больше продаж, чем синяя или фиолетовая.Точно так же реклама с зеленым баннером будет давать другие результаты, чем та же реклама с желтым или красным фоном.

Какие известные примеры цветовых схем веб-сайтов?

Via G Hacks

Когда вы думаете о платформе социальных сетей Facebook, скорее всего, на ум приходит один цвет: синий! Оказывается, на самом деле это так по интересной причине: основатель Марк Цукерберг не различает красно-зеленый цвет. «Синий для меня самый богатый цвет; Я вижу весь синий цвет », — сказал он однажды.

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

eBay

Через eBay

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

Примеры цветовых схем веб-сайтов, которые вдохновят вас.

Чтобы вы могли начать работу с собственной палитрой, мы собрали 50 красивых веб-сайтов с универсальными цветовыми схемами, на которых вы можете черпать вдохновение.

Цветовая схема веб-сайта №1: Веселая и профессиональная

Марк Дирман

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

Цветовая схема веб-сайта № 2: Неоновые тона и резкий контраст

Play.agency

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

Цветовая схема веб-сайта № 3: Теплый и жирный

Lush Digital

Хотите смешать теплые и более холодные цвета, чтобы создать уникальную атмосферу? Возьмите образец дизайна от Lush Digital’s, сочетая яркие красные и синие тона с более темными индиго и пурпурными.Создает мечтательный и смелый эффект.

Цветовая схема веб-сайта №4: Чистый и выделенный

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

Цветовая схема веб-сайта # 5: Теплые тона

Studio Recode

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

Цветовая схема веб-сайта # 6: Четкий и современный

Frost Festival

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

Цветовая схема веб-сайта № 7: Смелая и яркая

Magoz

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

Цветовая схема веб-сайта № 8: Вдохновение истории искусства

Fabrique

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

Цветовая схема веб-сайта № 9: Оттенки и тона

Ромен Бушеро и Винсент Фреман

Отличный способ добавить объемности вашей палитре, сохраняя при этом минимализм, — это использовать разные оттенки одного цвета. Эта чистая, элегантная цветовая схема сайта от Ромена Бушеро и Винсента Фремана делает именно это, используя немного разные оттенки нейтрального персикового цвета, которые дополняют центральный фиолетовый цвет.

Цветовая схема веб-сайта # 10: Всплеск цвета

Magnium Themes

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

Эта цветовая схема более тонко включена в шаблон Waffle Blog Banner. Оцените это в Canva уже сегодня!

Цветовая схема веб-сайта № 11: Элегантная и утонченная

Julian Damy

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

Цветовая схема веб-сайта № 12: Летнее вдохновение

StrADegy Advertising

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

Цветовая схема веб-сайта № 13: Профессиональная и современная

Avondale Type Co.

Ищете палитру, которая выглядит профессионально, но не скучна и не устарела? Вдохновляйтесь этим дизайном Avondale Type Co. Сочетание серых, глубоких и ярких желтых тонов в сочетании с четким, плоским современным дизайном создает авторитетный, но свежий дизайн.

Цветовая схема веб-сайта # 14: Яркие черные и яркие акценты

Cantina dei Colli Ripani

Если вы ищете более яркий, современный дизайн, попробуйте объединить смелые черные и белые пятна с некоторыми яркими всплески цвета, как в этом примере для Cantina dei Colli Ripani.Контраст между выделенными цветами и черным создает эффектный, смелый и забавный эффект.

Цветовая схема веб-сайта № 15: Чистые градиенты и свежий синий цвет

SHIBUI

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

Цветовая схема веб-сайта # 16: Веселая и элегантная

Huemor

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

Цветовая схема веб-сайта № 17: Современная и чистая

Benedict Leicht

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

Цветовая схема веб-сайта № 18: Роскошный и современный

Zach Klein

Эта цветовая палитра Зака ​​Кляйна привносит мир роскоши, изысканности и характера в дизайн веб-сайта. Благодаря сочетанию темно-синего, теплого загара и ярко-красного оттенка этот сайт остается современным, минималистичным и изысканным.

Цветовая схема веб-сайта №19: Симпатичные пастели

B / C Designers

Пастельные тона подходят не только для стен детской.На этом веб-сайте B / C Designers используются чистые, яркие пастельные розовые, синие и оранжевые тона для создания веселой, яркой и привлекательной палитры. При использовании пастели постарайтесь добавить немного белого пространства, чтобы вещи оставались свежими и светлыми.

Цветовая схема веб-сайта № 20: Уникальная и яркая

Great Works Copenhagen

Этот профессиональный веб-сайт Great Works Copenhagen использует менее нейтральный подход к цвету и вместо этого выбирает яркую палитру. Объединяя яркий красный цвет с различными синими и темно-синими тонами, этот сайт уравновешивает профессиональный вид с уникальным и веселым чутьем.

Цветовая схема веб-сайта # 21: Неожиданные сочетания цветов

Intesys S.r.l.

Фиолетовый и зеленый — это не два цвета, которые часто смешивают, но этот сайт Intesys S.r.l. доказывает, что, возможно, они должны быть! Насыщенный фиолетовый цвет разительно контрастирует с ярким лаймовым и резким белым цветом, создавая уникальный и запоминающийся дизайн сайта.

Цветовая схема веб-сайта # 22: В стиле ретро

Lowdi

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

Цветовая схема веб-сайта № 23: Античный и чистый

Pier-Luc

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

Цветовая схема веб-сайта № 24: Ярко и энергично

Hyperakt

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

Цветовая схема веб-сайта № 25: Свежая и яркая

Baesman

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

Цветовая схема веб-сайта № 26: Чистая и четкая

BrightMedia

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

Цветовая схема веб-сайта № 27: Красочная без колличества

Ярмо

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

Цветовая схема веб-сайта № 28: Приглушенная и минималистичная

Инга Гудоньен / MIOS

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

Цветовая схема веб-сайта № 29: Прохладный и спокойный

Roll Studio

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

Цветовая схема веб-сайта №30: Современная и приглушенная

Расслабьтесь, мы хорошие ребята

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

Цветовая схема веб-сайта № 31: Землистый и свежий

AQuest

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

Цветовая схема веб-сайта # 32: Высокая насыщенность и высокая энергия

El Burro

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

Цветовая схема веб-сайта # 33: Теплая и прекрасная

Fieldwork

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

Цветовая схема веб-сайта # 34: Винтажный шарм

Cafe Frida

Хотите создать винтажный эффект, который не выглядит устаревшим или старомодным? Обратите внимание на эту палитру для Cafe Frida, в которой используются теплые золотые, зеленые, коричневые и белые оттенки, чтобы создать очаровательный эффект, источающий класс.

Цветовая схема веб-сайта # 35: Холодные тона драгоценных камней

GrowCreate

На этом веб-сайте Business Benchmark on Farm Animal Welfare от GrowCreate используются красивые фиолетовые и синие оттенки драгоценных камней с тонкими градиентами для создания простой, но привлекательной цветовой палитры.Случайные всплески ярко-розового цвета делают дизайн привлекательным, свежим и привлекательным.

Цветовая палитра веб-сайта # 36: Яркие оттенки

Cinco Design

Ищете более темный и гладкий вид, но не поклонник прямого черного? Взгляните на этот бурный, капризный дизайн веб-сайта от Cinco Design, в котором используются глубокие пурпурные, синие и розовые тона для создания гладкого и изысканного эффекта.

Цветовая схема веб-сайта № 37: Холодное против теплого

Cinco Design

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

Цветовая схема веб-сайта # 38: Чистый и коллегиальный

details.ch

Хотите профессиональную индивидуальную палитру с яркими цветами? Ознакомьтесь с этой красивой палитрой на сайте details.ch, в которой используются четкие, чистые, опрятные оттенки для создания простой цветовой схемы. Не бойтесь добавить розового оттенка к своей синеве, чтобы добавить уникальности.

Цветовая схема веб-сайта # 39: Простая и свежая

MadeByShape

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

Цветовая схема веб-сайта # 40: Тропические тона

Thomas Schrijer

Этот красивый дизайн сайта для Топ-10 Томаса Шрайера 2014 года использует яркие тропические тона для создания прекрасного эффекта.Использование теплых желтых, красных, зеленых и синих оттенков создает веселую, легкую и красивую палитру, подходящую для любого энергичного бренда.

Цветовая схема веб-сайта # 41: Полужирные основные цвета

Joy Intermedia

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

Цветовая схема веб-сайта # 42: Античные тона

Leibowitz Branding & Design

Веб-сайт Athena Art Finance, созданный Leibowitz Branding & Design, использует красивые старинные тона для создания элегантного и утонченного дизайна с большим шармом. Черпая вдохновение в истории искусства и используя темно-фиолетовый, синий, зеленый и теплый золотой, вы можете превратить любую веб-страницу в изысканное потрясающее зрелище.

Цветовая схема веб-сайта # 43: Неоновый и жирный

Calvi on the Rocks

Этот пример для Calvi on the Rocks показывает нам, как именно искусно использовать яркие неоновые тона, уравновешивая их.Эта палитра состоит из яркого зеленого, яркого пурпурного и оттенка королевского синего, но она уравновешивает эту яркость с большим количеством нейтрального кремового белого, поэтому она не подавляющая.

Цветовая схема веб-сайта # 44: Приглушенные тона

The Martin Agency

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

Цветовая палитра веб-сайта # 45: Простая, но смелая

Mambo Mambo

Хотите легкость маленькой палитры, но с яркостью большой? Обратите внимание на этот для Mambo Mambo, который использует желтый и несколько оттенков зеленого / синего, чтобы сформировать простую, но стильную палитру. Эта цветовая гамма тропическая, веселая, свежая и, что самое главное, простая!

Цветовая схема веб-сайта # 46: Корпоративный и элегантный

Райан Боркер, Джермейн Крейг, Майк Парсонс и Кайл Миллер

Вам нужно меньше яркости и немного больше профессионализма? Вдохновитесь красивыми цветами, использованными в этой палитре Райаном Боркером, Джермейн Крейг, Майком Парсонсом и Кайлом Миллером.Яркий темно-синий цвет прекрасно сочетается с не совсем белым фоном яичной скорлупы, чтобы создать простой и элегантный дизайн веб-сайта.

Цветовая схема веб-сайта # 47: Современная и минималистичная

Huemor

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

Цветовая схема веб-сайта # 48: Веселые и веселые

Marie Catribs

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

Цветовая схема веб-сайта # 49: Солнечно и спокойно

TRAFFIC

Хотите создать теплый, привлекательный веб-сайт? Поэкспериментируйте с теплыми тонами, как это сделал здесь TRAFFIC. Используя теплые желтые и золотые тона и уравновешивая их глубокими темно-синими тонами, он создает успокаивающую, умиротворяющую и привлекательную палитру.

Цветовая схема веб-сайта # 50: Поп-арт

Visualsoft

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

Как выбрать цветовую схему для своего сайта

Итак, как создать свою цветовую схему с нуля? Вот несколько советов, которые помогут вам в этом процессе.

Воспользуйтесь помощью цветового круга

Вам не нужно изобретать колесо, когда вы выбираете цвета для своего бренда — просто воспользуйтесь нашим! Цветовой круг Canva — удобный инструмент, используемый в теории цвета, чтобы определить, какие оттенки смотрятся вместе. Есть два типа цветовых кругов — RYB и RGB. Первый — это красный, желтый, синий цветовой круг, который обычно используется художниками для комбинирования цветов краски. Затем есть красный, зеленый и синий цветовой круг, который используют графические дизайнеры, поскольку он включает смешивание света для использования в Интернете.

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

Рассмотрим демографию

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

Однако, в конце концов, восприятие цвета не является универсальным опытом. Разные люди воспринимают цвета по-разному, в зависимости от своего возраста, культуры и жизненного опыта.

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

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

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

Создаете что-нибудь для более молодой аудитории? Шаблон веб-сайта Canva для малого бизнеса Pink and Blue Pet Care отличается забавной и свежей эстетикой, которую можно легко перенастроить для вашего собственного бренда.

Создание цветовой палитры

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

Веб-сайт Фаррелла Уильяма красочный и динамичный

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

Как использовать цветовую палитру из фирменного набора

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

Активы ThisThatApp от Хелены. Изображение через Dribbble.

В большинстве наборов брендов есть раздел, посвященный вашей цветовой палитре, где вы определяете цвета своего бренда и соответствующие коды. Они могут включать коды Pantone (специальные цвета) и CMYK (стандартные цвета печати), но для веб-дизайна вам в основном нужны коды RGB и HEX (шестнадцатеричные). В зависимости от эстетики вашего бренда вы также можете использовать разные оттенки и оттенки одного и того же цвета.

Благодаря тому, что ваша цветовая палитра будет легко доступна в вашем фирменном наборе, вы гарантированно получите точное соответствие цветов каждый раз, когда вы создаете somedeskg new для своего бренда. Функция Brand Kit в Canva Pro позволяет вам установить цвет и коды вашего бренда для облегчения доступа при разработке дизайна в приложении.

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

11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру

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

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

Учет психологии цвета для цветовых схем веб-сайта

—

Возьмите прекрасного художника Йозефа Альберса.Мастер цвета, он посвятил свою практику пониманию цвета и того, как он влияет на настроение зрителя и адаптируется к различным контекстам. Огромная часть его исследований заключалась в изучении различных способов взаимодействия цветов друг с другом. Возьмем, к примеру, его картину ниже: сочетание темно-зеленого и оранжевого цветов вызывает неприятные ощущения, тогда как в сочетании зеленого с серым Альберс создает баланс с гораздо более спокойным, современным настроением для публики.

Взаимодействие цвета. Джозеф Альберс через Phillips

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

Этот разговор представляет собой введение в психологию цвета, то есть изучение цветов и того, как они влияют на нас на мозговом уровне. Как показал Марк Ротко со своими одноименными картинами «Цветовое поле», определенные цвета требуют определенной реакции. Итак, когда мы рассматриваем цветовые схемы веб-сайта, важно понимать, как разные тона и оттенки влияют на наше настроение. Например, если бы мы разработали веб-сайт для благотворительной организации в области устойчивого развития, мы могли бы использовать оттенки зеленого и синего, потому что они вызывают чувство доверия, природы и здоровья.

Выбор идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.

Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но также можете использовать их для управления тем, как они воспринимают ваш веб-сайт. Почему именно Facebook всегда придерживался синей цветовой схемы? Неужели это действительно потому, что Марк Цукерберг дальтоник к красно-зеленому, а это значит, что синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый цвет.Фактически, синий цвет присутствует более чем в половине всех логотипов. Имея это в виду, давайте посмотрим на основные психологические принципы всех ключевых цветов:

1. Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем на веб-сайтах электронной коммерции, а также в ресторанах и приложениях для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Апельсин : оптимизм и счастье.Оранжевый цвет повсеместно считается «забавным», и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленый: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда.Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
6. Фиолетовый : творчество, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет, который можно использовать в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
7. Розовый : креативность и изобилие.Пинк сейчас радуется своей жизни, больше, чем когда-либо, его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и включают его в целый ряд отраслей.
8. Коричневый : доброта, тепло и честность. При использовании в веб-дизайне коричневый цвет утешает. Это придает веб-сайтам естественную, приземленную атмосферу и часто сочетается с традиционным винтажным дизайном.
9. Черный: современный, гладкий, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды выбирают черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
11. Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.

Мы только что отправили вам ваш первый урок.

Автор OrangeCrush

11 красивых цветовых схем веб-сайта, которые вдохновят вас

—

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

1. Цвета для умных экологически чистых продуктов

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

Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:

Цветовая схема сайта с тонировкой конопли от Tonitrix: # f5eec2 # 416a59 # 39395f # 73a24e # a9c25d

2. Яркие и полезные для здоровья цвета

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

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

Бледно-персиковый, апельсиновый, мятный и темно-зеленый:

Эко-тона тысячелетия от Your Daye: # f6c453 # fefbe9 # f0a04b # 183a1d # e1eedd

3. Стильные, тщательно подобранные цветовые схемы

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

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

Сирень, ржавчина, крем и уголь:

Цветовая схема Contemporary Lilac от Collagerie: # e4ddf4 # 943d24 # fffbf0 # 2d2d2d # 282612

4.Веселые, юные цветовые палитры

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

Нежно-розовый, зеленый, оранжевый и фиолетовый:

Цветовая схема полихромного сайта от Brent & Jo Studio: # 397754 # f0a3bc # 70be51 # eb6b40 # 9b45b2

5.Цвета для креативщиков потрясающие

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

Желтый, неоновый синий и черный:

Контрастная цветовая схема сайта от e2infinity: # 5bccf6 # fcde67 # 030e12

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

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

Персик, сливки и уголь:

Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: # ef9273 # fef9f8 # 0d0d0d

7.Надежные тона

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:

Надежные бирюзовые тона через N26: # 2b6777 # c8d8e4 #ffffff # f2f2f2 # 52ab98

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

Медитативная цветовая схема Spoon Lancer: # fae5df # f5cac2 # ed7966 # 303179 # 141850

9. Современные модные цветовые схемы

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

Фиолетовый, лиловый, мята и апельсин:

Via Saluto: # 5f2c3e # d1adcc # c2d2bd # c65032 # f6e9d7

10. Веселые и благотворительные цветовые палитры

.

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

Синий, желтый, шалфейный и белый:

Веселые некоммерческие цвета от Lovely Grit Studio: # 1b4d89 # f9e45b # 6db784 #ffffff

11. Сильные и женственные цветовые схемы

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

Пудрово-розовый, фуксия и нефрит:

Цветовая схема Fuschia и Green для Fertility Tribe от Lovely Grit Studio: # eddcd9 # f2ebe9 # de5499 # 264143 # e99f4c

Поиск цветовых схем для веб-сайтов начинается сейчас

—

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

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

Ищете единственную в цветовой гамме?

Позвольте нашим дизайнерам подобрать ваши оттенки.

Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.

цветов, которые сочетаются с зеленым на веб-сайтах

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

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

.

• Лучше подходит для одних ниш и совсем непопулярно для других
• Популярны в сфере энергетики, технологий, финансов, домашнего хозяйства и продуктов питания
• Непопулярно для автомобилей, самолетов и одежды
• Сомнительно для здравоохранения
• От 62% до 90% оценки продукта основаны только на цвете
• Цветной оттиск отвечает за 60% принятия или отклонения продукта.

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

Источник

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

• Западные культуры — зеленый цвет означает природу и свежесть, весну, экологию, удачу, богатство и положительные стороны.
• Ближний Восток — зеленый символизирует удачу и богатство
• Восточные культуры — зеленый символизирует молодость и новую жизнь

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

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

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

Цветовая схема зеленого, фиолетового и оранжевого цветов

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

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

Цвета, которые сочетаются с зеленым: коричневый и белый

На этом веб-сайте сочетание цветов является естественным: фотография объединяет зеленый и коричневый (+ некоторые оттенки туманного серого), текст которых отображается белым.Учитывая, что фон имеет более темные цвета, белый цвет пригодится для создания контраста. Это также соответствует естественности изображения, при этом акцентируя внимание на заголовке и призыве к действию. Весь текст страницы отображается белым цветом, включая логотип, заголовок и подзаголовок, а также текст кнопки CTA. Замечательно, как благодаря использованию цветов текст и изображение поддерживают друг друга: зеленый, коричневый и некоторые оттенки серого продвигают текст вперед, а белый обеспечивает гармонию с естественностью изображения.

Такое же цветовое сочетание используется на таких веб-сайтах, как:

Первый пример зеленого и белого:

Второй пример 2 зеленый и белый:

Третий пример 3 светло-зеленый и белый:

Четвертый пример 4 темно-зеленый и белый:

Цвета, сочетающиеся с разными оттенками зеленого: красный, белый

На веб-сайте Geli очень хорошо сочетаются различные оттенки зеленого: зеленый фон, зеленый цвет листьев, другой зеленый цвет других листьев… В целом, зеленый цвет распространяется по всей странице, а другие цвета мешают только точка лучшей гармонизации игры «зеленых».Немного красного и немного больше белого — все, что нужно сайту для создания красивой презентации «Товары для зеленого». Особенность сайта заключается в точном сочетании нюансов, которые отличаются друг от друга, во взаимно дополняющих друг друга и легко образующих единое целое. Текст отображается контрастным белым цветом, как это рекомендуется для зеленых веб-сайтов.

По аналогичной схеме сочетания цветов:

Пример зеленый, красный и белый

Другие цвета, которые сочетаются с зеленым: желтый, белый

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

Зеленый, синий и черный

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

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

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

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

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

Хотите узнать о главных тенденциях веб-дизайна 2021 года?

I. Мягкие и бледные цветовые схемы веб-сайта: Feelin ’Comfy

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

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

1. Beauregard

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

• ISABELLINE
• БЫСТРЫЙ СЕРЕБРЯНЫЙ
• AUROMETALSAURUS
• СВЕТЛО-СЕРЫЙ
• ЧЕРНЫЙ ОЛИВКОВЫЙ

2.Squilla Fund

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

• ЧЕРНО-СИНИЙ
• ЛУННЫЙ КАМЕНЬ
• СИНИЙ ПОРОШОК
• ВОЛШЕБНАЯ МЯТА
• БЕЛЫЙ ДЫМ

3. Либенар

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

• СНЕГ
• РОЗОВЫЙ ИСПАНСКИЙ
• ПЫЛЬНАЯ БУРЯ
• МЫЛО
• ЯЛЕ СИНИЙ

4. Mont Roucous

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

• КАРОЛИНА СИНИЙ
• ПАСТЕЛЬНЫЙ РОЗОВЫЙ
• ЧАЙНАЯ РОЗА
• МАКСИМАЛЬНЫЙ СИНИЙ ФИОЛЕТОВЫЙ
• СИНИЙ
ОРГАНИЗАЦИЯ ОБЪЕДИНЕННЫХ НАЦИЙ

5.Ковбойские велосипеды

Сайт о новом поколении электровелосипедов. Этот дизайн был выполнен с мягкими золотисто-розовыми оттенками, яркими цветами типографики и забавными золотыми деталями. Цветовая гамма сайта состоит из:

• ЛАВАНДОВАЯ РУМАЯ
• ЧАЙНАЯ РОЗА
• РОЗОВОЕ ЗОЛОТО
• КРАСНЫЙ РАДИКАЛЬНЫЙ
• СВЕТЛЫЙ ФРАНЦУЗСКИЙ БЕЖЕВЫЙ

Вдохновляющие цветовые схемы веб-сайта фиолетовый пастельный фиолетовый и розовый веб-сайт

6. Сахель

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

• ТЕМНОЕ ЗОЛОТО
• ТАН
• ПЫЛЬНАЯ БУРЯ
• БЕЛЫЙ ДЫМ
• VAN DYKE КОРИЧНЕВЫЙ

7. Я и мистер Дарси

Блог в очень женственном веб-дизайне радует глаз красивыми теплыми цветами. Этот блог о «жизни и любви», по словам владельца, был выполнен в цветовой гамме с этими ведущими цветами:

• МИНДАЛЬ
• РОЗОВЫЙ ШАМПАНСКИЙ
• СРЕДНИЙ ФИОЛЕТОВЫЙ
• КОБИ
• СОЛНЕЧНИК

8.Спасай воздух

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

• АЭРО СИНИЙ
• ОРХИДЕЯ СВЕТЛАЯ СРЕДНЯЯ
• HONEYDEW
• СВЕТЛЫЙ КОРАЛЛ
• ШЕЛК НЕБЕЛЫЙ

9. Менд Зельцер

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

• ПЛАТИНОВЫЙ
• ТАНГО РОЗОВЫЙ
• ОРАНЖЕВО-ЖЕЛТЫЙ
• ЯЩИК ИНСТРУМЕНТОВ
• ЯРКАЯ ЛАВАНДА

Вдохновляющий веб-сайт Цветовые схемы красочные пастельные тона веб-сайт

10. Лобстер

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

• ЯРКИЯ
• СИНИЙ ПОРОШОК
• ЗЕЛЕНО-СИНИЙ
• БЕЛЫЙ
• РОЗОВЫЙ ФАНДАНГО

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

II. Пастельные и землистые цветовые схемы веб-сайта: навеяны природой

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

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

11. Лечение ногтей

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

• ПЛАТИНОВЫЙ
• ЧЕРЕПАХА ЗЕЛЕНЫЙ
• СЕРЫЙ-СИНИЙ
• ТАН
• КОКОС

12. Горный человек

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

• БЕЛЫЙ ЗОЛОТО
• ОЛЕНЬ
• АРТИШОК
• ТЕМНО-КОРИЧНЕВЫЙ-ТАНГЕЛО
• СОЛОМА

вдохновляющий веб-сайт Цветовые схемы ретро-цвета веб-сайт

13.Андрис Горакс

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

• ПУСКИ СИНИЙ
• ФРАНЦУЗСКИЙ НЕБО-СИНИЙ
• АЛИСА СИНИЙ
• БЕЛЫЙ
• МЕДЬ

14. Зеленый экологический голландец

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

• БИСТР
• VEGAS GOLD
• ПУСТЫННЫЙ ПЕСК
• БЕЛЫЙ
• ЛАДОНИЛЬНЫЙ ЛИСТ

15. 10 × 18

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

• БЕЛЫЙ ДЫМ
• ГЛУБОКОЕ КОСМИЧЕСКОЕ Блеск
• ПЕСОЧНО-КОРИЧНЕВЫЙ
• ПАСТЕЛЬ ОРАНЖЕВЫЙ
• СВЕТЛЫЙ КОРАЛЛ

Реклама

16.Адриан Лоран

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

• ПЫЛЬНЫЙ БУРЯ
• УПЛОТНЕНИЕ КОРИЧНЕВОЕ
• ОРАНЖЕВЫЙ (PANTONE)
• БЕЛЫЙ МЕДНЫЙ
• БЕЛЬЁ

Вдохновляющие цветовые схемы веб-сайта теплые тона веб-сайт

17. Бронзовая коллекция Bang Olufsen

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

• ACAJOU
• СТАРОБОРДОВЫЙ
• БЕЛЫЙ
• ИНДИЙСКИЙ ЖЕЛТЫЙ
• РУССКАЯ

Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для вашего интернет-магазина

III. Яркие и смелые цветовые схемы веб-сайта: кричать о внимании

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

18. MA-TEA

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

• РОЗОВЫЙ РАЙСКИЙ
• КОСМИЧЕСКИЙ КОБАЛЬТ
• AUREOLIN
• КЕЛЛИ ГРИН
• Шалфей

19. Мяу Волк

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

• AUREOLIN
• АЭРО
• MANTIS
• СВОБОДА
• РОЗОВЫЙ МЕКСИКАНСКИЙ

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

• РОЗОВЫЙ РАЙСКИЙ
• ПАЛАТИНАТ-СИНИЙ
• ПОЛУНОЧНО-СИНИЙ
• ТЕМНАЯ ОРХИДЕЯ
• RICH ELECTRIC СИНИЙ

21. Анимат Креатик

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

• КОБИ
• ХАНЬ ПУРПУРНЫЙ
• СРЕДНЕ-СИНИЙ
• МАКСИМАЛЬНЫЙ ЖЕЛТЫЙ
руб.

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

22. Счастливый онлайн

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

• ЯНКИ СИНИЙ
• СИНИЙ
• ФОЛЛИ
• ОРАНЖЕВЫЙ (WEB)
• СРЕДНИЙ МОРСКИЙ ЗЕЛЕНЫЙ

23. Саммит Грамаду

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

• ЦЕРИЗ РОЗОВЫЙ
• ГРУША
• СИНИЙ
• УЛЬТРАМАРИНОВЫЙ СИНИЙ

24.La Phase 5

Еще один бренд, который делает ставку на яркие однотонные геометрические детали для своего веб-присутствия. Белый фон по-прежнему передает ощущение надежности, а красочные детали делают общий вид более забавным. Цвета в этой палитре:

• RICH CARMINE
• ЗОЛОТОЙ МАК
• КАРОЛИНА СИНИЙ
• МОРСКОЙ ЗМЕЙ
• ISABELLINE

25. Синдикат ICO

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

• ЦВЕТОЧНЫЙ БЕЛЫЙ
• банановая мания
• БЕЗОПАСНЫЙ ЖЕЛТЫЙ
• MAUVE
• БОГАТАЯ ЛАВАНДА

26. Securinvest

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

• ПОЛУНОЧНО-СИНИЙ
• ГОЛУБОЙ
• БЕЛЫЙ РОЗОВЫЙ
• МАНДАРИН
• СРЕДНИЙ АКВАМАРИН

27. HtmlBurger

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

• ЖЕЛТЫЙ (CRAYOLA)
• ГЛУБОКОЕ МОРКОВНО-ОРАНЖЕВОЕ
• ВЕРМИЛИОН
• АЭРО
• НЕБЕСНЫЙ СИНИЙ

28.Сочная еда

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

• AUREOLIN
• КОРОЛЕВСКИЙ ПУРПУРНЫЙ
• БЕЛЫЙ АНТИВСПЫШКА
• БЕЛЫЙ
• ОКСФОРД СИНИЙ

IV.Темные и драматические цветовые схемы веб-сайта: разгадывайте тайну

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

29. Зеркало My 360

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

• ONYX
• ТАУП СЕРЫЙ
• БЕЛЫЙ ДЫМ
• КОРОЛЕВА СИНИЙ
• БИРЮЗОВЫЙ СРЕДНИЙ

30. Марго Леруа

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

• KEPPEL
• GUNMETAL
• ВНЕШНЕЕ ПРОСТРАНСТВО
• МЫШИ
• РИТМ

31.Иван Ибаньес

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

• ТРОЛЛЕЙ СЕРЫЙ
• ТЕМНО-ФИОЛЕТОВЫЙ
• СВЕТЛО-СЕРЫЙ
• ДЭВИ ГРЕЙ
• JET

32. Производство Португалия

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

• БЕЛЫЙ
• ИСПАНСКИЙ СЕРЫЙ
• ВИНТОВКА ЗЕЛЕНЫЙ
• ЖАРАЧНЫЙ ЧЕРНЫЙ
• ПОСТОЯННОЕ ГЕРАНИЕВО ОЗЕРО

33. Microsoft в цифрах

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

• ЧАРЛСТОН ГРИН
• ТЕМНАЯ ПЕЧЕНЬ
• СВЕТЛО-СЕРЫЙ
• РОЗОВАЯ ОРХИДЕЯ
• ЧАЙНАЯ РОЗА

Вы хотите проверить несколько удивительных примеров параллакса CSS?

В.Цветовые схемы монохромных веб-сайтов: один цвет для победы

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

34. Ефрем Иосиф

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

• КРАСИТЕЛЬ ИНДИГО
• СИНИЙ ОКЕАН
• ЯЩИК ИНСТРУМЕНТОВ
• ДЕТСКИЙ ПОРОШОК
• ПАЛЕ АКВА

35. Джин Whitetail

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

• БЕЛЫЙ
• ЯРКИЯ
• ОКСФОРД СИНИЙ
• СЕРЫЙ ПЕЙН
• КОРОЛЕВСКИЙ СИНИЙ

36. Fitspirit Fashion

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

• ТИРИАНСКИЙ ПУРПУРНЫЙ
• АМАРАНТ ГЛУБОКИЙ ФИОЛЕТОВЫЙ
• СРЕДНИЙ ФИОЛЕТОВЫЙ
• ЛАВАНДОВАЯ РУМАЯ
• ГОЛЛИВУДСКИЙ ЦЕРИЗ

37.Sikkema

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

• ТАНЖЕРИН
• СЕЛЕКТИВНЫЙ ЖЕЛТЫЙ
• ПЕСЧАЯ БУРЯ
• МИНЬОН ЖЕЛТЫЙ
• ВКУС

38. Готэм-Сити

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

• ТАУП СЕРЫЙ
• ИЗЮМ ЧЕРНЫЙ
• тусклый серый
• СЕРЕБРЯНЫЙ
• РЕГИСТРАЦИЯ ЧЕРНЫЙ

39. Аджа Уилсон

Дизайн веб-сайта, приветствующий посетителя багрово-серым монохромным видео для области героя со следующими оттенками и оттенками:

• БЕЛЫЙ АНТИВСПЫШКА
• СВЕТЛО-СЕРЫЙ
• СТАРАЯ ЛАВАНДА
• ИЗЮМ ЧЕРНЫЙ
• ПУРПУРНЫЙ КОЛПАЧОК

Вот и все!

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

Возможно, вам будет интересно прочитать эти статьи по теме:

Реклама

6 советов по выбору потрясающей цветовой схемы веб-сайта

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

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

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

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

1. Познакомьтесь с основами психологии цвета
2. Познакомьтесь с теорией цвета
3. Подумайте о смешивании цветовых комбинаций
4. Будьте проще
5. Контрастите свои цвета
6. Добавьте свой брендинг

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

1. Изучите основы психологии цвета

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

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

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

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

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

2. Познакомьтесь с теорией цвета

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

Во-первых, вам необходимо понять первичных , вторичных и третичных цветов.

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

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

Третичные цвета создаются путем смешивания основного и дополнительного цветов, расположенных рядом друг с другом на цветовом круге. Они создают сложные цвета; например, смешивание синего (первичного) и фиолетового (вторичного) создает сине-фиолетовый (третичный).

Во-вторых, давайте поговорим о теплых и холодных цветах.

Вы, наверное, уже имеете представление о том, что такое теплые и холодные цвета. Красные, оранжевые и желтые цвета классифицируются как теплые, а синие, зеленые и фиалки — как холодные.

В-третьих, важно понимать цветовых нюансов .

Не все цвета, которые вы видите, являются чистыми. Многие цвета, которые вы видите в Интернете, так или иначе пострадали.

Возможно, вы видите оттенок (цвет с добавлением белого), оттенок (цвет с добавлением черного) или оттенок (цвет с добавлением серого).

Или вы можете видеть перенасыщенных цветов или ненасыщенных цветов . Насыщенность цвета — это яркость или тусклость цвета.

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

3. Подумайте о смешивании цветовых комбинаций

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

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

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

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

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

• Дополнительные цвета располагаются напротив друг друга на цветовом круге. Дополнительная цветовая комбинация будет состоять из одного теплого и холодного цветов. Красный и зеленый — одна популярная взаимодополняющая пара.
• Разделенные дополнительные цвета состоят из основного цвета и двух цветов, смежных с дополнительным основным цветом.
• Триады и тетрадные цвета имеют похожие отношения. Триады используют цвета, равномерно распределенные на цветовом круге (например, красный, синий и желтый).Тетрадические цвета — это четыре цвета, состоящие из двух пар дополнительных цветов (например, красный, зеленый, синий и оранжевый).
• Аналогичные цвета располагаются рядом друг с другом на цветовом круге. В результате аналогичные цвета очень похожи, например, зеленый и желто-зеленый.
• Наконец, монохромных цветов — это просто вариации одного цвета. Это достигается за счет использования оттенков, оттенков и тонов.

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

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

4. Будьте проще

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

У простоты есть два больших преимущества.

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

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

Цветовая схема

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

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

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

Эта цветовая схема одинакова для всего сайта.Вот как выглядит одно из сообщений в блоге:

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

Блог

Evernote — еще один отличный пример:

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

Желтый появляется часто, что делает эту цветовую схему аналогичной.

Эти простые дизайны имеют огромное влияние — помните об этом при выборе цветовой схемы своего веб-сайта.

5. Контрастите свои цвета

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

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

Еще раз взгляните на сайт WordStream:

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

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

6. Добавьте свой брендинг

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

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

В этом и есть ключ — подумайте о цветовых ассоциациях, которые у людей возникают с цветами, которые вы выбрали. Соответствуют ли эти ассоциации ценностям, на которых вы построили свой бренд?

Полезно узнать, что сделали и другие бренды.Вот пример с Medium:

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

А теперь приступим к (цветному) проектированию!

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

Все, что осталось, — это пойти и сделать это.

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

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

Об авторе

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

50 цветовых схем веб-сайта для вашего вдохновения

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

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

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

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

01. Смелая и дерзкая

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

02. Шикарный и элегантный

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

03. Осенний бриз

Этикетка детских аксессуаров Sticky Lemon — мастера цвета. Каждая фотография, представленная на их веб-сайте, была искусно обработана с точки зрения композиции и цвета.Их цветовая гамма немного ретро, ​​с апельсиновым и коричневым оттенками, которые напоминают нам набор посуды наших бабушек и дедушек. Их меню состоит из двух дополнительных цветов — синего и оранжевого, что помогает нам различать отдельные пункты меню.

04. Чистый и минималистичный

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

05. Candy delight

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

06. Dreamy skies

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

07. Изящный и аккуратный

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

08. Естественный и нежный

Иллюстратор Кристин Ми Лин, создательница Blush & May, использует мягкие оттенки и много белого пространства на главной странице своего веб-сайта. Она свела к минимуму использование цвета, выбрав светло-розовые и бежевые тона, а также несколько естественных оттенков коричневого и зеленого. Эти цветовые решения вызывают воодушевляющее и успокаивающее ощущение, что идеально сочетается с ее иллюстрацией.

09. Флуоресцентный зеленый

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

10. Городское и промышленное строительство

Выбор цветовой схемы для веб-сайта фотографии может быть сложной задачей.В этом портфолио, посвященном фотографии и архитектуре, Béton Brut от Kimberley Jane Harris, домашняя страница представляет собой полноэкранную фотографию бетонного здания. Тусклые промышленные оттенки коричневого меняются от темного к светлому, образуя интересные композиции, несмотря на монохроматичность изображения. Белый шрифт меню виден, не отвлекая внимание от фотографии.

11. Поп-ретро

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

12. Футуристические градиенты

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

13. Яркий и энергичный

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

14. Землистый и минималистичный

Керамическая студия Noni São Paulo использует цветовую палитру, которая идеально отражает их бренд и продукцию. Теплые оттенки коричневого и другие землистые тона заставят вас собраться за чашкой горячего чая в красиво оформленной кружке. Белый фон уравновешивает естественные оттенки, чтобы сайт выглядел профессионально и качественно.

15. Техническая изысканность

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

16. Золотые лучи

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

17. Пурпурный с оттенками серого

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

18. Кобальтовый синий

Вот еще один веб-сайт, который выбрал очень доминирующий цвет «вне дома».Studio & more выбрали для своей домашней страницы яркий кобальтовый синий цвет, сочетающийся с чистым белым заголовком, меню и значками социальных сетей. Белый цвет на синем выделяется, обеспечивая разборчивый и доступный дизайн веб-сайта. Если вы выберете только два цвета, вы можете добавить третий, который появляется только при наведении курсора на кнопки, как это сделали Studio и другие.

19. Радужная пастель

Эти карамельные оттенки — именно то, что вы ожидаете найти на веб-сайте агентства Unicorn Adoption.Чтобы создать ощущение порядка и иерархии в этом красочном мире, дизайнеры остановились на трех цветах (белом, голубом и жевательно-розовом) для основных элементов сайта — логотипа, меню, значков и кнопок. Большое количество белого пространства также гарантирует, что дизайн не будет казаться слишком загруженным.

20. Успокаивающий и естественный

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

21. Теплый с холодными оттенками

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

22. Мягкие осенние оттенки

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

23. Глубокий и мистический

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

24. Крутой и освежающий

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

25. Изысканный и яркий

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

26. Классический двухцветный комбо

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

27. Посыпать вечеринку

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

28. Легкий и профессиональный

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

29. Смелая и радостная

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

30. Эффектный черный фон

Черный фон становится все более модным в дизайне веб-сайтов — и дизайнер Эстер Меджибовски как раз вписала его в свое дизайнерское портфолио.Темный фон выделяет ее работы, привлекая внимание посетителей к главному событию. Благодаря высокому контрасту белый текст может быть маленьким и ненавязчивым, но при этом сохранять разборчивость.

31. Приглушенная винтажная тема

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

32. Простой и монохромный

Вместо обычного черного текста на белом фоне подумайте о том, чтобы переключить его, как это сделал графический дизайнер Стивен Брэдбери. Он выбрал изящную цветовую палитру веб-сайта, используя черный, белый и иногда дополнительные цвета. Добавив ненавязчивую анимацию и слайд-шоу с автоматическим воспроизведением, на его сайте никогда не будет скучно.

33. Резкий контраст

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

34. Сюрреалистичный и металлический

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

35. Яркие акцентные цвета

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

36. Игривый, но изысканный

Бренд Little Paper Warriors иллюстратора Софи Рид имеет отличную цветовую палитру для веб-сайта. Она выбрала землистые фактурные тона для фона веб-сайта и объединила их с яркими цветами. Результат игривый, но при этом зрелый и изысканный благодаря нейтральным оттенкам.

37. Черничный молочный коктейль

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

38. Поразительно высокая контрастность

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

39. Пастельные тона

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

40. Темный и жуткий

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

41. Аппетитные оттенки

Пастельные карамельные тона на сайте Kokos Ice Cream источают игривость и создают соблазнительную палитру. Они выбрали чистый сплошной фон, который помогает изображению мороженого выделяться благодаря своей текстуре. Темно-серый текст на светлом фоне обеспечивает достаточный контраст, но при этом выглядит забавным и дружелюбным.

42. Мощный и смелый

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

43. Яркий и веселый

Смелый выбор оранжевого цвета на веб-сайте Dogs on the Streets сразу вызывает положительные эмоции, особенно в сочетании с белым. В дополнение к этому очень живому оранжевому, они выбрали вторичный цвет — темно-серый, а не черный, чтобы тон оставался дружелюбным и доступным.

44. Простота космического пространства

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

45. Bubblegum Shades

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

46. Нейтральный и элегантный

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

47. Основные цвета с изюминкой

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

48. Уникальные комбинации

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

49. Контрастный акцентный цвет

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

50. Оттенки серого с оттенком цвета

Фирма промышленного дизайна Studio Sahil выбрала минималистичную цветовую схему.