Подбор цвета онлайн: 15 генераторов сочетания цветов
Подбор цвета – это ответственный момент в работе любого дизайнера. Эксперименты с цветом порой дают неожиданные результаты. Цвет может объединять значимые элементы дизайна, помогать выделять значимые части, таким образом цвет может помогать выстраивать композицию.
Известно значение цвета и в психологии – влияние на настроение, на работоспособность, душевное равновесие. Для творчества необходима подпитка, поиск идей, нестандартных решений. Чувство цвета поможет определиться с выбором.
Однако возможности дизайнера, который постоянно ищет что-то новое, не безграничны. В этом случае на помощь приходят онлайн сервисы по подбору сочетания цветов. Здесь можно найти неплохие варианты.
Необходимо уметь пользоваться этими сервисами подбора цвета. В этом вам помогут знания, а именно как пользоваться цветовым кругом для сочетания цвета. Здесь на примерах и с картинками подробно изложены все цветовые схемы.
В подборке нашего сайта я выделила 2 категории подобных сервисов – русскоязычные и англоязычные.
Русские сервисы сочетания цветов
Среди множества русскоязычных онлайн сервисов можно выделить 5 основных (самых популярных), каждый из которых обладает своими достоинствами и недостатками:
Colorscheme
Цветовой круг онлайн. Это инструмент для подбора и генерации цветовых схем. Вы можете выбрать один и вариантов сочетания цвета. Вы можете посмотреть шаблон дизайна страницы в выбранном сочетании цветов. Интересно также и то, что вы можете “посмотреть” на вашу палитру глазами других людей, имеющих некоторые отклонения в цветовосприятии.
https://colorscheme.ru/
In colour balance
Всевозможные цветовые палитры, выделенные из лучших образцов фото.
https://color.romanuke.com/
Colorup.tikkurila
https://colorup.tikkurila.com/
Помощь в поиске удачной цветовой схеме для интерьера, а также палитры для внешней отделки. Пригодится для работы дизайнерам интерьеров, архитекторам.
Color Adobe
Сайт этот, конечно же не русский, но с поддержкой русского языка, и он будет понятен русскоговорящим, поэтому я и отнесла его в эту группу. Очень удобный подбор цвета. Изменяйте положение указателя на цветовой круге и выбирайте схему по определенной цветовой системе.
https://color.adobe.com/
Генератор цветовых схем
https://colory.ru/colorgenerator/
Англоязычные сайты по подбору цвета
Не смотря на то, что эти сайты зарубежные, пользоваться ими несложно даже без знаний языка, так как генераторы интуитивно понятны. В обзоре я буду делать акценты на основные моменты их использования.
Random Material Generator
Название генератора указывает на случайность выбора цветовой палитры. Нажмите на кнопку “Generate different random combination” для генерации цветовой схемы.
https://codecrafted.net/randommaterial/
Material Mixer
Позволяет смешать и посмотреть сочетания двух цветов.
https://sankk.in/material-mixer/
Colorhunter
Готовые цветовые решения.
https://colorhunter.com/
Palette Generation
https://mcg.mbitson.com/
Генерация оттенков цвета.
Material Palette
Выберите 2 цвета, и вы увидите еще цвета, которые подходят для вашего дизайна.
https://www.materialpalette.com/blue/light-green
Colorotate
Воспользуйся конусом для создания собственной цветовой схемы. Чтобы пользоваться сайтом, разрешите загрузку Adobe Flash плеера в вашем браузере.
https://web.colorotate.org/
Colorblender
Вам нужно определить алгоритм сочетания цвета и, перемещая ползунки, выберите сочетания цвета по RGB. Если вы затрудняетесь, то на этой же странице вы найдете ссылку на полную таблицу сочетания цвета.
https://colorblender.com/
Colorspire
Еще один простой цветовой круг, который поможет вам выбрать базовые цветовые сочетания, подобрать светлые, темные оттенки и т.д.
https://colorspire.com/
Paletton
Подбор сочетания цветов в зависимости от разных цветовых систем.
https://paletton.com/
Colorexplorer
Двигайте ползунки и выбирайте схему!
https://colorexplorer.com/
Крутая шпаргалка по сочетанию цветов. Цветовой круг Подбор цветовых сочетаний онлайн
Подборка цвета – один из важнейших этапов в процессе создания хорошего дизайна.
Чтобы облегчить вам задачу, мы решили составить подборку, состоящую из лучших сервисов для создания цветовых схем. Они помогут сэкономить время, и при этом получить достойный результат.
01. Adobe Colour CC
Компания Adobe переименовала свой проект Kuler в Colour
Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler . Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC .
Он позволяет подбирать, создавать и сохранять различные цветовые схемы, в каждой из которых может присутствовать до пяти цветов. Инструмент доступен как в браузерной, так и в настольной версии. Если вы используете настольную версию, то вы сможете экспортировать цветовую схему прямо в Photoshop , Illustrator и InDesign .
02. Mudcube Colour Sphere
Если вы не уверены по поводу вашей цветовой схемы, то у Mudcude есть собственная галерея готовых ресурсов
Mudcube Colour Sphere – очень удобный миниатюрный ресурс для дизайнеров, который не только предлагает hex-коды выбранных цветов, но и позволяет создавать цветовые схемы для собственных проектов. Также стоит отметить, что в Mudcube имеется собственная галерея готовых ресурсов, которые также можно использовать.
03. Check my Colours
Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов . А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium (W3C ).
04. The Color App
Приложение поможет узнать RGB, HEX, а также HSLA-значения выбранных цветов
iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB , HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.
05. Color Hunter
Color Hunter формирует цветовую схему на основе выбранного изображения
Это очень удобный инструмент, особенно если необходимо найти какой-то конкретный цвет. Выберите изображение и загрузите его в Color Hunter . Инструмент создаст цветовую палитру на основе выбранного изображения. Это отличный метод создания собственных цветовых схем.
06. TinEye
Если вам нужно получить конкретный цвет, просто введите HEX-значение в URL
На этом сайте используется база данных, состоящая из 10 миллионов изображений, доступных бесплатно по лицензионному соглашению Creative Commons , которые создатели тщательно отобрали с Flickr . Их можно использовать для генерации соответствующих цветовых схем.
07. Color
Удобное миниатюрное веб-приложение. Наведите курсор мыши на экран, и определите нужный цвет, затем прокрутите немного, чтобы подобрать оттенок. После чего инструмент выдаст все необходимые HEX-коды , которые можно использовать в собственных проектах. Один из самых простых в использовании инструментов.
08. SpyColor.com
Бесплатный генератор цветовых схем, который предоставляет информацию о цвете, а также позволяет конвертировать его в любые схемы (RGB , CMYK и другие ). Здесь доступны различные форматы цветовых схем, включая триадные, монохромные и другие.
09. Designspiration
На Designspiration можно выбрать до пяти оттенков при помощи удобной палитры на всю страницу, которая поможет без труда найти именно те цветовые схемы HTML , которые вы ищете. После этого сайт сгенерирует страницу со всеми изображениями из базы данных, в которых используется похожая цветовая комбинация. Также будут предоставлены HEX-значения , которые можно использовать в собственных проектах. А изображения можно сохранять в коллекциях на сайте.
10. ColorExplorer
Один из самых продуманных веб-инструментов, который предлагает множество функций, связанных с дизайном, настройкой и аналитикой цветовых схем. Здесь представлены инструменты, которые помогут определить WCAG-валидность цветовых схем , а также сгенерировать собственные цветовые палитры.
11. Hex Color Scheme Generator
Небольшой удобный инструмент для генерирования комбинации цветов на основе одного выбранного оттенка. Вставьте Hex-значение цвета, а инструмент предоставит набор подходящих цветов, которые можно будет использовать вместе с основным.
12. COLOURlovers
COLOURlovers представляет собой сообщество для обмена цветовыми схемами. Здесь можно черпать вдохновение из цветовых наборов других пользователей, а также создавать собственные и делиться ими.
13. Color Scheme Designer
Этот онлайн-инструмент предлагает интересные способы генерирования цветовых схем, позволяя настраивать их яркость и регулировать контраст. Здесь можно создать несколько популярных математических моделей цветовых схем, включая монохромную.
14. COPASO
Один из инструментов с сайта COLOURlovers . Но COPASO достоин отдельного внимания, так как представляет собой невероятное решение «все в одном », и позволяет легко генерировать готовые цветовые схемы для сайта. Здесь представлено множество инструментов для подбора цвета, и все они размещаются в удобном и простом интерфейсе. Кроме этого к палитрам можно добавлять заметки, загружать изображения и т.п.
15. Colourmod
Colourmod представляет собой программное обеспечение, которое позволяет выбирать отдельные цвета из области виджетов, независимо от того, используете ли вы Mac или Konfabulator на Windows . Это не совсем простой инструмент для работы с цветовыми палитрами, однако он поможет быстро и просто определять цвета без необходимости загружать тяжеловесные программы.
16. ColorZilla
ColorZilla доступен как для Chrome, так и для Firefox
Этот проект начинался как плагин для Firefox , однако сегодня он также доступен и для Google Chrome . ColorZilla представляет собой расширение, которое включает в себя несколько инструментов, предназначенных для работы с цветом, среди которых палитра, генератор css-градиентов и пипетка.
17. Colormunki
Удобный онлайн-инструмент для подбора цветовых схем от создателей Colormunki . С его помощью можно без труда создавать привлекательные цветовые палитры из образцов на основе Pantone с использованием нескольких методик.
18. colr.org
Colr.org позволяет установить диапазон цветов любого изображения
Этот инструмент позволяет провести подробный анализ цветов изображения, который обычно автоматизирован в других инструментах. Это позволит выбрать наиболее подходящий цвет. Мы рекомендуем познакомиться с этим инструментом, хотя его интерфейс не настолько продуман, как в других приложениях.
19. ColourGrab
Этот удобный инструмент создает цветовые палитры из любого изображения. Вставьте адрес изображения, которое хотите проанализировать, и сервис автоматически сгенерирует трехмерный график с информацией по использованным цветам. Хотя это приложение не совсем подходит для подбора цветовой схемы для сайта, но с его помощью можно изучить изображения и их цветовые характеристики.
20. ColorBlender
ColorBlender генерирует палитру из пяти сочетающихся цветов
Один из простейших инструментов, который позволяет настраивать цветность и в режиме реального времени получать пять сочетающихся между собой цветов. Сгенерированную палитру можно скачать в Photoshop или Illustrator в виде EPS-файла .
21. GrayBit
GrayBit позволяет анализировать сайты, чтобы понять, как бы они выглядели в градации серого
Этот инструмент поможет увидеть, как ваш сайт смотрится в серых тонах. Отличный сервис, который позволит выявить проблемные по контрасту места.
22. COLRD
Инструмент, который можно использовать в качестве источника вдохновения или для обмена цветовыми схемами. Конечно, этот ресурс не поможет с генерированием схем, но его обязательно следует взять на заметку.
23. Shutterstock Spectrum
Изображения можно фильтровать по цветовому балансу и яркости
Иногда проверить будет ли цветовая схема сочетаться легче всего путем просмотра стоковых картинок. Практически все основные стоковые ресурсы предлагают подобные инструменты, однако Shutterstock Spectrum имеет очень удобный интерфейс. После использования слайдера для определения цвета вы сможете указать ключевые слова, которые позволят определить тему снимков. Кроме этого можно отфильтровать изображения по цветовому балансу и яркости.
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.
Вот такие инструменты есть у меня в закладках.
Напишите в комментариях, какими сайтами подбора цвета для веб-дизайна пользуетесь вы?
Нужен сайт с правильными цветами? , сделаем:)
Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER
Профессиональный веб-дизайн не обходится без создания цветовой схемы. В этой статье рассказывается о 20-ти фантастических инструментах, которые помогут вам идеально подобрать цветовое решение.
Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них — всего лишь измененные версии более популярных и полезных инструментов.
Поэтому, чтобы упростить процесс выбора цветового решения, мы собрали 20 лучших доступных инструментов. Они помогут вам не растеряться в поисках подходящего варианта и ощутить «цветовое блаженство»
01. KulerKuler, возможно, самый известный инструмент для работы с цветом.
Adobe Kuler, пожалуй, самый популярный online-инструмент для цветовых тем, который прошел путь от простого инструмента для работы с цветом в Интернете до полноценного ресурса, на котором можно создавать темы и делиться с другими. Плагины доступны для всех основных приложений Adobe, включая Photoshop, Illustrator и InDesign, что делает Kuler прекрасным многофункциональным инструментом для постоянных пользователей программ Creative Suite.
02. ColorExplorerColorExplorer может выполнять множество различных функций.
Можно сказать, что это один из самых продуманных инструментов, которые есть в Интернете. Он предлагает большой набор инструментов для дизайна, адаптирования и анализа ваших цветовых палитр. Например, инструменты, которые помогают определить доступность WCAG выбора цвета, средства для конверсии, которые позволяют перемещаться между разными системами, а также все необходимое для выбора цвета и создания палитр.
03. Colors on the WebColors on the Web работает на базе Flash.
В Colors on the Web загружаются однотонные цвета в кодах HEX или RGB, и он выдает набор схем на базе различных математических пропорций. Данный инструмент не работает на iPad или iPhone, поскольку использует Flash для запуска программы.
04. COLOURloversCOLOURlovers слегка напоминает Pinterest для цвета
05. PictaculousPictaculous позволяет вам загружать изображение и на его основе генерировать цветовую схему.
Этот инструмент от создателей MailChimp позволит загрузить изображение и создать цветовую схему на базе его же цветов. Он совместим с некоторыми другими инструментами, такими как Kuler и Colourlovers. Pictaculous имеет удобный Adobe Swatch для загрузки тем, что позволяет быстро и легко «захватывать цвета», которые необходимы, чтобы дополнить фотографию.
06. Contrast-AContrast-A создает имитацию разных визуальных дефектов.
Это не совсем обычный инструмент для цветовых схем. Он разработан для того, чтобы можно было убедиться, что вы создали WCAG-совместимую цветовую схему, это происходит путем предварительного просмотра уровней контраста, и использования техники имитации отсутствия восприятия цвета и низкой видимости. Contrast-A имеет массу ссылок на руководства, в которых все изложено в более удобной для пользователя форме, чем в самом документе о технических свойствах.
07. ColoRotateColoRotate может похвастаться красивой визуалиацией «цветового колеса»
ColoRotate имеет схожие функции с Kuler, но отличается изображением палитры на красивом трёхмерном конусе и способностью генерировать более, чем 5 цветов в одной схеме. Инструмент можно интегрировать с некоторыми приложения Creative Suite. Также он доступен в качестве приложения для iPad и может работать совместно с Photoshop в режиме «цветовой консоль».
08. Hex Color Scheme GeneratorHEX создает цвета, которые хорошо сочетаются с имеющейся цветовой гаммой.
HEX — это небольшой удобный инструмент для генерирования цветов. Просто задайте код цвета, и он выведет на экран набор приятных цветов, которые будут идеально сочетаться с вашими базовыми цветами.
09. Color Scheme DesignerColor Scheme Designer имеет несколько интересных способов создания цветовых тем.
Этот online-инструмент обладает схожими функциями с Adobe Kuler. Но благодаря интересным приемам для создания цветовых тем, позволяет выбирать из свойств схемы параметры яркость/насыщенность и контраст, вместо того, чтобы «возиться» с отдельными цветами, из которых состоит тема. Color Scheme Designer предоставляет доступ к набору стандартных математических методов, включая возможность гармоничного подбора цветовой гаммы дизайна для одного (mono) , двух (complement) , трёх (triad) или четырёх (tetrad) цветов с оттенками и полутонами.
10. COPASOCOPASO — это прекрасное средство для решения сразу нескольких задач.
Один из инструментов сайта COLOURlovers , COPASO заслуживает отдельного внимания, как как позволяет одновременно решать множество вопросов при создании палитр. Он предоставляет собой полный набор инструментов для выбора цвета на простом интерфейсе. С его помощью можно делать пометки к палитрам, загружать изображения, сразу переходить по ссылкам CMYK и выбирать способы создания вашей цветовой схемы.
11. ColourmodВиджет Colourmod на рабочем столе помогает легко выбирать и определять цвета.
Colourmod — это инструмент на рабочем столе, который позволяет легко выбирать один из цветов в той зоне, где находятся виджеты, даже если вы работаете с программой Dashboard для MacBook или используете Konfabulator для Windows. Colourmod,сам по себе, не является инструментом для выбора палитры, но, тем не менее, с его помощью можно выбирать и определять цвет. При этом вам не понадобится запускать другие более тяжёлые программы.
12. ColorZillaColorZilla работает в Chrome и Firefox.
Это приложение изначально разабатывалось как плагин для Firefox, но его также можно применять в браузере Google Chrome. ColorZilla — это расширение, в котором есть масса различных инструментов для работы с цветом, в том числе: выбор цвета, пипетка, создание градиента css и просмотр палитр.
13. ColormunkiColormunki позволяет создавать цветовую схему на основе образцов Pantone.
Удобный инструмент для работы online, представленный создателями Colormunki для калибровки цвета. Вы можете создавать палитры на основе цветовых образцов Pantone в режиме online и использовать разные приемы, чтобы подобрать приятные сочетания.
14. colr.orgС помощью Colr.org можно увидеть цветовую гамму ваших изображений.
Этот простой инструмент дает уникальную возможность проанализировать цветовую схему изображения (в других программах эта функция выполняется автоматически). Таким образом, вы можете увидеть, из каких цветов состоит ваша картинка, и выбрать те из них, которые вам нравятся, чтобы задать их в качестве основных цветов темы.
15. ColourGrabColourGrab — отличный компактный генератор цветовых схем изображений.
Этот удобный инструмент создает цветовую палитру на основе любого изображения в интернете. Просто введите адрес изображения, которое вы хотите проанализировать, сайт «захватит» его, определит его цветовую гамму и создаст несложную 3D- диаграмму, которая будет отражать использование различных цветов для этого изображения. Пусть он является и не самым лучшим вариантом для стандартных тем, но ColourGrab отлично подойдет для анализа распределения цвета на изображениях.
16. ColorBlenderColorBlender создает набор из пяти цветов, которые хорошо сочетаются между собой.
Этот сайт представляет собой простой инструмент, который позволяет создать образец изображения, настроить цвета и проследить в реальном времени за тем, как подбирается набор из 5 прекрасно сочетающихся цветов. Палитры можно загрузить прямо в Photoshop или в Illustrator в формате файла EPS.
17. GrayBitGrayBit позволяет проанализировать сайт, чтобы узнать, как он выглядит в оттенках серого.
Этот удобный инструмент не подбирает напрямую цветовые темы, но он позволяет проанализировать сайт, чтобы увидеть, как он выглядит, если перевести его в оттенки серого. Это поможет проверить, добились ли вы достаточного контраста цветовой палитры, чтобы она была удобной для восприятия.
18. COLRDCOLRD идеально подходит для того, чтобы делиться своими цветовыми схемами и узнавать о новых.
Этот красочный сайт — отличный источник вдохновения, здесь пользователи делятся своими цветовыми палитрами, а также градиентами и картинками. Это не просто сайт для создания цветовых схем, а скорее, настоящий праздник для эстетического восприятия, и сюда стоит заглянуть, чтобы сделать пару потрясающих открытий.
19. Color HunterColor Hunter — это замечательный сайт, на котором можно найти новые цвета.
Color Hunter помогает быстро подобрать цветовую гамму загруженных изображений, через поиск подходящего тэга или с помощью ссылок HEX. Быстрый и легкий в применении, сайт позволяет совершать интересные цветовые открытия.
20. Stripe Generator 2.0Stripe Generator 2.0 помогает привлекать внимание к вашим цветовым решениям.
О нем часто говорят, как о «последнем инструменте для веб2.0». Stripe Generator 2.0 — хорошее средство для создания приятных цветовых комбинаций и необычных картинки одновременно.
Выбор цветовой схемы для сайта является одним из важных моментов в процессе дизайна. Подбор сочетания цветов — достаточно сложный и творческий процесс. К счастью, существует достаточно много сервисов, которые могут оказать существенную поддержку для правильного выбора.
Некоторые ресурсы, упомянутые в данном обзоре, предоставляют возможность выбора из большого количества уже готовых цветовых схем, а другие позволяют в интерактивном режиме построить собственную схему.
Kuler
Adobe Kuler содержит большую библиотеку готовых цветовых схем. Вы можете просмотреть схему онлайн и загрузить ее для использования в продуктах серии Adobe Creative Suite.
Colour Lovers в текущий момент имеет почти 2 миллиона созданных пользователями цветовых схем. Вы можете просматривать их, сортируя по дате, рейтингу, количеству просмотров.
ColoRotate имеет библиотеку готовых цветовых схем. Также вы можете создать свою собственную схему с помощью уникального 3D инструмента. Цветовую схему можно использовать напрямую в Photoshop и Fireworks с помощью плагина ColoRotate .
Color Scheme Designer позволяет выбрать тип цветовой схемы (моно, комплиментарную, триада, тетрада, аналоговая). Затем можно будет настроить цвета и посмотреть действие схемы на примере.
ColorSchemer располагает большой библиотекой созданной пользователями цветовых схем. Вы можете сортировать их по дате размещения, рейтингу или количеству загрузок.
Pictaculous — простой онлайновый инструмент для генерации цветовой схемы. Вы можете загрузить изображение, а сервис сгенерирует схему для использования с картинкой.
Color Spire
Color Spire очень простой в использовании сервис. Вы выбираете базовый цвет, а он предлагает цветовую схему. Также можно посмотреть внешний вид схемы на простом шаблоне.
Подбор цветов онлайн | Дорога к Бизнесу за Компьютером
Подбор цветов онлайн — сервис, помогающий создать комфортную среду для нашего обитания. Несмотря на внешнюю простоту, он позволяет генерировать исключительно гармоничную цветовую гамму, которую Вы можете использовать в самых разных областях своей жизни: от подбора цветовой гаммы для сайта до выбора одежды, или цветов интерьера.
Все, что нужно сделать — это, подвигав бегунки, выбрать исходный цвет. Он выбирается по принципу цветовой модели RGB, в которой можно отобразить любой цветовой оттенок — с помощью сочетания основных цветов: красного (red), зеленого (green) и синего (blue). Итак, подвигав красный, зеленый и синий бегунки, Вы выбираете цвет, который отображается в большом квадрате, а ниже Вы увидите цвета, которые будут гармонично сочетаться с ним. Можно также кликнуть по любому из нижних цветов, и он станет основным — попадет в большой квадрат, а ниже появятся уже другие цвета. Вот, в принципе и все — можете брать и использовать.
Цветовые сочетания вызывают у нас самые разные ассоциации, эмоции и чувства — от откровенного неприятия до чувства комфорта, уюта и расслабленности. Они могут раздражать и успокаивать, вызывать тоску и взбадривать. Цвета влияют на наше ощущение пространства, на трудоспособность и общение. Подобрать гармоничные цвета гораздо проще, чем кажется. Цветовая гармония подчиняется своим законам, и они универсальны для всех случаев нашей жизни, не важно, чем мы занимаемся — создаем сайты или делаем ремонт в квартире, покупаем одежду или мебель.
Давайте рассмотрим различные цветовые схемы, с помощью которых Вы можете создать гармоничные сочетания, радующие глаз. Все они основаны на концепции цветового круга, который широко используется дизайнерами.
Монохромные цвета
Комбинация цветов одного цветового тона, которые отличаются насыщенностью и яркостью, то есть степенью разбавленности белым и черным цветами. Такие сочетания не раздражают, не отвлекают, но не хватает «изюминки», глазу не за что зацепиться.
Аналоговые цвета
Комбинация соседних цветов цветового круга. Мягкое, спокойное сочетание, которое действует успокаивающе, умиротворяюще на психику.
Классическая триада
Цвета, расположенные в углах воображаемого равностороннего треугольника, который накладывается на цветовой круг. Таким образом получаются наиболее гармоничные сочетания цветов, которые не приедаются, не вызывают скуку, и в то же время не раздражают. Триада используется и тогда, когда нужны всего лишь два цвета: они выбираются из трех триадных цветов, и результат все равно получается исключительно гармоничным.
Противоположные цвета
Резко контрастные, привлекающие внимание, яркие сочетания. Могут раздражать, поэтому использовать их следует крайне осторожно, и в небольших количествах. В дизайне, например, используется цвет, противоположный основному, только в виде небольшого фрагмента. А если Вы хотите выделиться из толпы — оденьтесь в одежду контрастных цветов, и внимание будет Вам обеспечено, все будут оглядываться на Вас. Данные схемы не ограничивают все возможности цветовых сочетаний. Например, можно вписывать в цветовой круг четырехугольники и шестиугольники, и брать цвета из углов, но эти методы требуют более четкого соблюдения баланса, и наличие определенного вкуса у составителей. Также можно яркие и сочные цвета без опаски сочетать с универсальными цветами: черным, белым, серым и бежевым. В этом случае Вы не рискуете перестараться и сделать слишком яркую расцветку, как у попугаев.
Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:
Круг Иттена: как правильно сочетать цвета в интерьере
Цвет — основа любого интерьера. При самостоятельном выборе оттенков возникают сомнения «а вдруг получится слишком ярко, или уныло, или неэстетично». Отбросьте опасения, вооружитесь цветовым кругом сочетания цветов в интерьере и создайте шедевральный декор. Сейчас вы убедитесь, что это легко и увлекательно.
Круг Иттена в интерьере: что это
Цветовой круг Иттена — шпаргалка по подбору оттенков. Это спектр тонов, которые образуют между собой различные сочетания. С помощью такого изобретения вы быстро и безошибочно определите удачные комбинации для интерьера. Вы сможете вплетать в дизайн даже такие необычные оттенки, как марсала — цвет терпкого красного вина, ставший модным трендом и фаворитом экспериментаторов.
В основе спектра базовые цвета: красный, желтый, синий. Остальные оттенки образуются в результате их сочетания. Получается множество тонов, отличающихся друг от друга яркостью и контрастностью.
На глаз сложно определить удачные сочетания оттенков. Еще сложнее грамотно объединить теплые и холодные тона в декоре. С помощью круга вы узнаете, насколько необычные гармоничные цветовые ансамбли можно создавать. Пример — использование лавандового в тандеме с другими тонами.
Вариант цветового круга Иттена
Как пользоваться кругом Иттена в интерьере
Существует несколько схем работы со спектральной шпаргалкой. Каждая основана на сочетании разных типов оттенков. В круг сочетания цветов в интерьере заложено десять комбинаций:
- Главные;
- Составные;
- Сложные;
- Дополнительные;
- Контрастные;
- Родственно-контрастные;
- Родственные;
- Монохроматические;
- Нейтральные;
- Ахроматические.
Подробный разбор оттенков вы найдете в видео. Ваша основная первоначальная задача — разобраться с базовыми принципами сочетания оттенков. Предлагаем простые схемы.
Монохромная
Другое название — аналоговая. Чтобы получить удачное сочетание, нужно взять три соседних оттенка на круге. Это будут тона из одной цветовой гаммы, которые заиграют в интерьере именно в такой комбинации.
Комплиментарная
Эту схему иначе называют контрастной. Комбинация строится из двух оттенков, находящихся на противоположных сторонах круга. Иногда кажется, что эти цвета не могут сочетаться, однако в декоре смотрятся потрясающе.
Триада
В основе сочетания — три главных тона. Чтобы грамотно их подобрать, постройте на круге цвета для дизайнеров интерьера треугольник с равными сторонами. Можно применить яркие чистые оттенки или полутона. Во втором случае получится более спокойный ненавязчивый декор.
Полихромная или тетрада
Цветовой состав: основной тон, два дополнительный и один акцентный. Чтобы найти его, нужно вписать квадрат в окружность спектра и взять оттенки, которые окажутся по углам. Такая схема подходит для многих современных стилей интерьера. Если найти правильное сочетание, подобное оформление станет дизайнерской находкой для дома и квартиры.
Схемы выбора цветов
Примеры применения схем для выбора оттенков
Комплексное сочетание оттенков
Самый популярный и универсальный способ создать потрясающий декор. В основе цветового оформления классические тона: белый, бежевый и серый. Их можно скомпоновать с другими оттенками, грамотно расставив акценты. При желании перемен в будущем можно оставить базовые цвета и дополнить их новыми красками. Вариант — использовать в декоре розовый.
Чтобы сочетать классические оттенки в интерьере, не обязательно применять цветовой круг. Однако с его помощью вам будет удобнее различить даже малейшие переливы тона и уловить контраст. Можно воспользоваться специальными программами онлайн для подбора оттенков.
Пример комплексного сочетания цветов в интерьере
Градиент в интерьере: прием для создания изысканного декора стен
Если вы освоили цветовой круг для интерьера комнаты, можете подобрать оттенки и создать мягкие переливы. Используйте для такого декора монохромную схему на спектре. Главное правило — переходите от темного тона к более светлому. На фото видно, насколько преображается комната с градиентным дизайном.
Пример применения цветного градиента
Совет! Чтобы визуально увеличить пространство, лучше применить темный тон ближе к полу, а светлый — к потолку.
Характер цвета: теплые и холодные тона
Одни цвета вызывают ассоциации с летом и солнцем, другие с прохладой, ветром, кубиками льда, морским бризом. Первые будут теплыми, а вторые — холодными.
Теплые цвета содержат больше желтого пигмента, холодные — синего. Для понимания принципа цветовой круг Иттена можно условно разделить на две части, как показано на фото. В одном секторе будут теплые тона, во втором — холодные.
Существует третья группа оттенков — нейтральные. Примеры: черный, вариации серого, белый. Такие тона не вызывают ассоциаций с желтым и синим, поэтому не имеют условной тепловой окраски. Зато они служат отличной базой для сочетаний оттенков. Есть несколько способов создать потрясающий интерьер в нейтральных цветах.
Схема определения холодных и теплых цветов на круге
Таблица сочетаний: удобная схема поиска гармонии
Для подбора цветов и поиска сочетаний можно использовать не только цветовой круг. Все оттенки спектра есть в таблице, с помощью которой вы сразу увидите, насколько теплые и холодные тона гармонируют между собой. Пользоваться шпаргалкой очень просто — в ячейки вписаны символы, обозначающие степень совместимости.
Как определиться с оттенками, используя круг дизайнера для подбора цветов в интерьере
Опытные дизайнеры при выборе цветов руководствуются профессиональными навыками. А вы можете использовать их советы и подключить свои предпочтения. В помощь 5 простых правил:
- Выбирайте 3 главных оттенка и комбинируйте их в дизайне. Не стоит увлекаться большим количеством цветов и создавать излишнее буйство красок — это признак безвкусного декора;
- Соблюдайте баланс между теплыми и холодными оттенками. Разбавляйте выбранную гамму, опираясь на цветовой круг для дизайнеров интерьера;
- Помните, что в полихромном интерьере базовый оттенок приходится примерно на 60% декорируемой площади;
- Используйте разные оттенки понравившихся цветов. Чтобы дизайн получился стильным и гармоничным, старайтесь вписаться в изначально выбранную гамму;
- Не игнорируйте интуитивный выбор. Проанализируйте любимые оттенки и постарайтесь понять, какие ассоциации в вас отликаются при виде их. Например, вы предпочитаете одежду зеленого цвета, потому что комфортно чувствуете себя в ней. Возможно, и в интерьере этот тон тоже окажется уместным.
Попытки угнаться за модными тенденциями в декоре без опоры на тип помещения и личные предпочтения окажутся провальными. Интерьер прежде всего должен быть комфортным для восприятия. Яркий пример — правильное использование розового в дизайне.
Психология цвета: с чем ассоциируются оттенки
Каждый оттенок находит отражение в душе человека, поэтому разумно подбирать цвета и с точки зрения психологии. Правильные тона в интерьере помогают взбодриться, успокоиться, настроиться на работу и даже заснуть. И напротив — даже любимый оттенок может угнетать нервную систему. Вы не планируете регулярно обновлять интерьер? Тогда сразу подбирайте оптимальные сочетания. Разберем популярные оттенки и их влияние на организм.
Белый
Если рассмотреть круг цветов для интерьера, то белый — не оттенок, а отсутствие окраски. Но это не мешает ему быть как базой для других сочетаний, так и самостоятельным тоном в интерьере. Ассоциации с белым: умиротворение, свобода, широкое пространство. Этот цвет зрительно увеличивает площадь комнаты и гармонирует с яркими оттенками. Секреты использования белого помогут создать уникальный дизайн.
Пример использования белого в дизайне
Красный
Ассоциации с этим цветом у людей кардинально разные. Кто-то воспринимает его как агрессивный оттенок, а кому-то он кажется теплым и бодрящим. Красные оттенки пробуждают аппетит, однако могут сильно утомлять. Лучше использовать его дозированно, например, в оформлении аксессуаров или в качестве яркого пятна на фоне других цветовых сочетаний.
Пример использования красного в дизайне
Схожие свойства имеет терракотовый цвет в дизайне. Как и красный, он будоражит воображение, создает волнующую атмосферу и согревает теплом.
Черный
Если учитывать круг Иттена и цветовые гармонии в интерьере, то черный — оттенок-акцент. Он идеально дополняет другие тона и создает ощущение таинственности. Если нужно создать удивительный антураж и некую интригу, смело используйте его в оформлении. В помощь несколько идей, как экспериментировать с черным.
Пример использования черного в дизайне
Оранжевый
Оранжевый — энергичный сочный цвет, создающий хорошее настроение и располагающий к общению. С помощью апельсиновых оттенков можно реанимировать неудачный интерьер и добавить помещению яркости. А еще его советуют использовать в оформлении кухни, потому что он стимулирует аппетит.
Пример использования оранжевого в дизайне
Совет! Оранжевый делает холодные тона более выразительными и глубокими.
Серый
Этот цвет редко применяется в качестве основного, потому что большинству людей он кажется угнетающим. Оттенки серого хороши для комбинации с яркими тонами. В тандеме с другими цветами они приобретают глубину и вызывают ощущение покоя. Из другой статьи вы узнаете, как удачно вписать серый цвет в декор помещений.
Пример использования серого в дизайне
Коричневый
Это нейтральный цвет, гармонирующий с большинством других оттенков. Он вызывает приятные ассоциации с надежностью, защитой, спокойствием. А еще коричневый может быть базовым в помещении любого назначения. Это идеальный вариант, если вам хочется чего-то оригинального и неброского. Предлагаем идеи использования коричневого в декоре.
Пример использования коричневого в дизайне
Фиолетовый
Манящий, роскошный и загадочный фиолетовый вызывает противоречивые чувства. Обилие этого оттенка может нервировать и утомлять, а вот умеренное использование подарит ощущение комфорта и эйфории.
Пример использования фиолетового в дизайне
Синий
Это оттенок холодной гаммы, если судить по цветовому кругу сочетаний в интерьере. Синий визуально увеличивает пространство и успокаивает. Не можете настроиться на работу или домашние дела? Используйте в декоре оттенки синего. Они подойдут для любой комнаты — начиная от детской и заканчивая ванной. Узнайте подробнее, как грамотно использовать синий в интерьере.
Пример использования синего в дизайне
Зеленый
Цвет природы, умиротворения и расслабления. В зеленой комнате вы будете чувствовать себя уютно и спокойно. Однако стоит быть осторожнее с оттенками — слишком темные могут спровоцировать подавленность. Такую гамму лучше сочетать с другими холодными цветами и нейтральными тонами. Дизайнеры дали несколько советов, как оформить помещение с помощью зеленого цвета. Также предлагаем варианты использования оттенков: благородного оливкового и альтернативного фисташкового.
Пример использования зеленого в дизайне
Желтый
Приятный солнечный тон тонизирует и повышает концентрацию внимания. У цвета очень много оттенков, включая нежные кремовые. Желтый — надежный помощник в создании уюта, однако кому-то он покажется навязчивым.
Пример использования желтого в дизайне
Голубой
У этого цвета есть волшебное свойство — он способен нормализовать кровяное давление. Если вы нуждаетесь в уютном уголке, где можете полностью расслабиться, включайте в декор оттенки голубого. Круг цветов для дизайнеров интерьера гласит, что это холодный тон, который визуально расширит небольшое помещение.
Пример использования голубого в дизайне
Стиль и цвет: рекомендации для разных направлений
Выбирая цвет, не забывайте о канонах стилей интерьера. Для каждого есть предпочтительные тона, которые полностью раскрывают особенности направления. Чтобы уверенно подобрать оттенки, откройте цветовой круг Иттена онлайн или изучите таблицу.
Стиль | Предпочтительные цвета |
---|---|
Классика | Белый, бежевый, коричневый |
Модерн | Зеленый, голубой, бежевый, серый, коричневый |
Барокко | Сочетание пастельных оттенков |
Эко | Бежевый, травяной, коричневый |
Лофт | Темно-серый, синий, зеленый, красный, оранжевый |
Прованс | Розовый, бежевый, голубой, молочный |
Кантри | Коричневый, приглушенно-желтый, кирпичный |
Хай тек | Металлический, серый, черный, белый |
Гораздо сложнее с направлениями фьюжн и футуризм. Эти направления позволяют использовать буйство сочных красок. В рамках этих стилей можно экспериментировать с яркими тонами: бирюзовым, салатовым, желтым. Чтобы приглушить слишком кричащие сочетания, включайте в комбинации белый.
Сейчас модно использовать в интерьере цвет фуксии. Этот тон тоже можно найти на цветовом круге сочетаний и грамотно вписать в декор.
Оттенки для разных помещений
Для каждого помещения есть предпочтительные и нежелательные тона. Например, некоторые хороши для оформления кухни и совершенно не годятся для гостиной. Цветовой круг сочетаний оттенков в интерьере спальни, ванной и других помещений не даст вам растеряться. В таблице можно увидеть самые популярные решения.
Помещение | Цвета |
---|---|
Кухня | Желтый, красный, оранжевый, бирюзовый |
Прихожая | Зеленый, бежевый, голубой, желтый |
Спальня | Пастельные оттенки, золотистый, серебряный, фиолетовый |
Гостиная | Белый, бежевый, серый, коричневый, желтый |
Кабинет | Синий, коричневый |
Ванная | Голубой, розовый |
Предлагаем вариации на тему оформления кухни: сочный дизайн в фиолетовых тонах и роскошный декор в зеленом цвете. Если предпочитаете темные тона, можете использовать оттенки синего.
В оформлении спальни тоже есть свои секреты. Помещение должно располагать к комфортному отдыху и умиротворению. Если вы еще не решили, какой дизайн выбрать, ознакомьтесь с лучшими идеями для преображения спальни.
Для детской комнаты лучше выбрать светлые базовые тона и дополнить их яркими акцентами. Не используйте кричащие кислотные оттенки — они негативно влияют на психику ребенка. Осторожнее с красным — этот цвет тоже может вызвать перевозбуждение.
Ванная комната — ваш личный спа-салон. Почему бы не создать там уютный островок, напоминающий о ласковых морских волнах и чистом небе с помощью оттенков голубого цвета в интерьере.
Цвета, которые не стоит сочетать
На цветовом круге можно увидеть оттенки, которые не гармонируют между собой. Это не значит, что их совсем нельзя комбинировать — если хотите экспериментировать, дайте волю фантазии. Чтобы креативить было легче, изучите самые коварные сочетания.
Основной цвет | С какими не сочетается |
---|---|
Красный | Желтый, каштановый, красно-желтый, кирпичный, фиолетовый |
Оранжевый | Красный |
Розовый | Коричневый, фиолетовый, сиреневый, красный, синий |
Желтый | Розовый, бордовый |
Бордовый | Коричневый, красный, фиолетовый, золотой, голубой |
Голубой | Бордовый, фиолетовый, сиреневый |
Фиолетовый | Кирпичный, терракотовый, красный |
Сиреневый | Золотой, розовый, бордовый, красный, синий, терракотовый, кирпичный |
Синий | Розовый, коричневый, зеленый, коричневый, сиреневый |
Серый | Терракотовый, темно-коричневый, бежевый |
Ошибки при выборе цвета
Иногда стильные интерьеры с картинок в реальности выглядят иначе. Достаточно упустить какую-то деталь и выбрать иной оттенок, как результат перечеркивает старания. Чтобы избежать провала, можно найти круг сочетания цветов в интерьере онлайн, хотя это не панацея от ошибок. А для наглядности приведем примеры неудачных интерьеров.
Обилие белого
Полностью белая комната скорее напоминает больничный бокс. Не забывайте про акценты — они помогут разнообразить дизайн и избежать скуки в интерьере. Иногда достаточно одной яркой детали: дивана, штор, картины или ковра.
Ошибка в использовании белого цвета в дизайне
Бездумное внедрение трендов
Где-то увидели интерьер полностью в бежевых тонах и хотите повторить? Есть риск, что комната будет напоминать картонную коробку. На фото как раз пример неудачного дизайна.
Неудачный дизайн с бежевым цветом
Неудачное сочетания искусственного освещения и цвета
Иногда свет кардинально меняет восприятие оттенков. При выборе цвета подумайте, как будет выглядеть комната при искусственном освещении. Вполне возможно, что терракотовый превратится в давящий красный, а темно-серый в мрачный черный.
Пример изменения цвета при искусственном освещении
Сочетание несочетаемого
Если использовать спектральный круг для подбора цвета в интерьере, вероятность ошибки в разы меньше. Полагаясь только модные тенденции и вкусы членов семьи, можно создать кричащий неорганичный дизайн.
Пример неудачного сочетания цветов в интерьере
Агрессивное использование контрастов
В дизайне есть прием «игра на контрастах». Однако на деле стоит быть аккуратнее с его воплощением. Посмотрите, как можно безнадежно испортить декор неправильным сочетанием оттенков.
Ошибка при использовании контрастных цветов
Использование одного цвета
Однообразие легко испортит интерьер и перечеркнет ваши труды. Преобладание одного цвета, пусть даже и в разных оттенках, визуально «утяжелит» помещение и создаст негативное впечатление. Для примера инструкция, как не ошибиться при использовании бежевого.
Неудачный дизайн в одном цвете
Мебель неподходящих цветов
Можно удачно покрасить стены, подобрать обои, оформить потолок и ошибиться в выборе мебели. Предметы интерьера тоже должны вписываться в единую картину и стиль.
Слишком яркая мебель в интерьере
5 лучших сервисов для подбора цветовой схемы
5 лучших сервисов для подбора цветовой схемы
Выбор дизайнером цветовой схемы — одна из важнейших задач в создании дизайна. Мы сделали подборку хороших сервисов, которые облегчат дизайнерам работу с цветом и цветовыми сочетаниями.
Веб-дизайн
28 окт. 2019
Цвет является мощным инструментом, который может умело рассказать целую историю. От него зависит первое впечатление, которое получит пользователь от продукта, а это в свою очередь повлияет на его выбор: пользоваться им или нет. Именно поэтому мы подобрали для вас 5 полезных сервисов с готовыми цветовыми наборами, которые помогут подобрать наилучшую сочетаемость оттенков.1. Color Hunt
Color Hunt — это бесплатная открытая платформа для поиска вдохновения. Преимущества этого сайта в огромном количестве модно подобранных цветовых решений. Color Hunt позволяет найти трендовые комбинации, собравшие наибольшее количество лайков, а также сохранять и скачивать понравившиеся подборки.
2. Color Leap
Поиск классных цветовых решений из картин различных исторических эпох — Color Leap. Этот интерактивный сайт насыщен анимационными компонентами и предлагает цветовые палитры картин выбранного периода с возможностью копирования кода при нажатии на цвет.
3. Khroma
Khroma — крутая интерактивная платформа, где можно найти не только красивые цветовые схемы, но и разработать собственный алгоритм на базе нейронной сети. Способен генерировать те цвета, которые вам больше нравятся и блокировать непонравившиеся прямо в браузере. Алгоритм постоянно обучается на бесконечных цветовых комбинациях, поэтому вы точно сможете найти что-то особенное! Поиск Khroma позволяет фильтровать генератор по оттенку, значению, цвету, а также по значениям цветовоймодели.
4. Culrs
Culrs — это более 2000 цветов с уже готовыми шестнадцатеричными кодами, которые легко скопировать для дальнейшего использования. Платформа создает красивые комбинации, учитывая цветовой круг и теорию цвета. Имеет 4 удобные категории для поиска лучшей сочетаемости цветов:
Нажав на имя конкретной палитры в Culrs, URL-адрес меняется на пользовательский и вы можете поделиться ею с кем угодно!
5. Coolors
Coolors — cупер-быстрый генератор цветовых схем. Получив готовую схему цветов, появляется интерактивная площадка, включающая меню редактирования для каждого цвета: можно поменять расположение цветов местами, изменить шестнадцатеричный код на желаемый или выбрать его оттенок нажатием иконки «альтернативные оттенки», а также скорректировать яркость и насыщенность в нужной цветовой модели.
Научиться понимать цветовую теорию и грамотно выбирать палитру для продукта – не просто. С помощью этих сервисов, которые предоставляют широкий спектр выбора цветовых сочетаний, вы значительно сократите временные затраты на сопоставление нужных оттенков цветов. Но не забывайте, что профессиональный дизайнер обязательно должен владеть пониманием значений каждого цвета и цветового круга в целом, правильно комбинировать цвета, уметь акцентировать детали для улучшения юзабилити продукта и конечно же, владеть пониманием психологии бренда. На курсе «Мир веб-дизайна» в нашей онлайн-школе «Айтилогия» вас обучат работе с цветом. Вы обретете большой багаж полезных навыков и сможете влюблять клиентов в ваш дизайн с первого взгляда!
Читайте другие статьи
Глассморфизм в пользовательских интерфейсахГлассморфизм – тренд от Apple, который становится все более популярным и частоиспользуемым веб-дизайнерами. В статье вы узнаете, как появился глассморфизм и как добиться эффекта левитирующего стекла в вашем дизайне.
Веб-дизайн
1 дек. 2020
Удаленка или фриланс: с чего дизайнеру начать карьеру?Сегодня у дизайнера есть множество вариантов карьерного развития. Как минимум, фриланс и работа на удаленке в компаниях разного формата. Но как понять, с чего же лучше начать?
Веб-дизайн
20 окт. 2020
5 лучших лекций TED для дизайнеровЛекции TED — отличный источник для профессионального развития. Собрали 5 лучших выступлений, которые позволяют по-новому взглянуть на дизайн, технологии, вдохновиться и проанализировать опыт коллег.
Веб-дизайн
28 апр. 2020
Сервисы для подбора идеального цвета сайта
~
Сервисы по определению цветовой схемы
- color-hex.com — определит какие цвета стоят рядом с вашим цветом
- thestocks.im — агрегатор мокапов, видео, фотографий, иконок, шрифтов.
- Eye Dropper — расширение для Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
- Adobe Color CC -подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
- Colorzilla -расширение для Google Chrome и Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.
- ColorPick Eyedropper — расширение с пипеткой, работает аналогично предыдущего: наводите ей на понравившийся цвет и получаете его код. Для Chrome и Firefox.
~
Подбор цвета
Загрузите картинку и сделайте из нее палетку.
- Coolors.co — ресурс с палитрами, которые можно создавать самим или заимствовать из коллекци
- Material Design Color Tool
- flatuicolors.com
- flatuicolorpicker.com
- COLOURlovers — коммьюнити цветовых фанатов, которые делятся палитрами, цветами, фонами и графическими шаблонами. Здесь есть цветовые тренды из интерьеров, журналов, сайтов и даже уличной моды. В разделе «Browse» можно найти авторские цвета и палитры и скачать фоны для презентации.
- Web Colour Data — сайт, на котором можно ввести URL нужного сайта и получить его цветовую палитру.
- Movies In Color — подбирает цветовые палитры известных фильмов.
~
Как выбрать цвет для сайта
Нельзя судить книжку по обложке, а вот судить веб-сайт по его дизайну — точно можно. Люди обычно оценивают и судят о продуктах и веб-сайтах по их внешнему виду, еще до того, как смогут понять их функциональность и пользу.
При брендинге цвета имеют более прямые значения, чем в общем понимании. Их можно кратко описать в нескольких словах, так что вот список для вас:
- Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
- Белый. Простой, спокойный и чистый.
- Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
- Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
- Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
- Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
- Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
- Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
- Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.
Черный
Цвет имеет большое количество значений. Он ассоциируется с трагическими ситуациями. Все зависит от того, как вы его используете, и какие цвета идут с ним. Черные хорошо сочетаются с любым другим цветом, поэтому он идеально подходит для фона. Дизайнеры часто используют его для установки контрастов.
Белый
Цвет означает чистоту и невинность, а также целостность и ясность. Белый часто ассоциируется с чистым листом бумаги, побуждающим людей генерировать новые идеи. Однако слишком много белых может вызвать чувство изоляции и пустоты. В дизайне белый цвет обычно используется в качестве цвета фона, особенно для ресурсов, для которых читаемость является важной частью.
Красный
Цвет обычно ассоциируется со страстными, сильными или агрессивными чувствами. Он символизирует как хорошие, так и плохие состояния, включая любовь, уверенность, страсть и гнев. В дизайне использование красного цвета — эффективный способ привлечь внимание пользователей.
Оранжевый
Это энергичный и теплый цвет, вызывающий чувство волнения. Дизайнеры используют цвет, если им нужно мотивировать на действие.
Желтый
Это цвет счастья, который символизирует солнечный свет, радость и тепло. Желтый, как полагают, самый легкий цвет и он имеет один из самых сильных психологических значений. Пользователи, видящие желтые цвета в дизайне, могут почувствовать вдохновение и уверенность. Хотя, вы должны помнить, что слишком много желтого цвета может вызвать негативные реакции, такие как чувство тревоги или страха.
Зеленый
Его часто называют цветом природы, баланса и гармонии. Зеленый приносит успокаивающие и обновляющие чувства. Кроме того, это признак роста и неопытности. Он имеет больше положительной энергии, чем большинство других цветов, но иногда он ассоциируется с материализмом. Дизайн в зеленых тонах идеально подходит для продуктов, связанных с природой.
Синий
Цвет доверия. Он обычно показывает надежность, успокаивает.
Пурпурный
Долго ассоциировался с богатством, поскольку многие короли носили фиолетовые одежды, это полезно для представления некоторых роскошных продуктов. Это также цвет тайны и магии. Он смешивает энергию красного и синего, поэтому он имеет баланс сил и стабильности. Большая концентрация цвета может отвлечь внимание пользователей.
Розовый
Это цвет чувствительности и романтики. Розовый намного мягче красного, поэтому он создает чувство безусловной любви. Розовый очень сильно связан с женственностью, поэтому он может быть эффективным цветом, если целевой аудиторией являются в основном девушки.
Коричневый
Дизайнеры обычно используют коричневый цвет в качестве фона в различных оттенках, от очень светлого до глубокого. Это приносит ощущение тепла и комфорта. Кроме того, он может использоваться для демонстрации опыта и уверенности.
~
Влияние цвета на покупку товара
Исследование проводилось в Северной Америке.
Любимые цвета
Нелюбимые цвета
~
Цветовые модели
- CMYK: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» — черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки. Используется в живописи и печати.
- RGB-модели: red, green, blue — красный, зеленый, синий. Используется в компьютерах, телевизорах и других электронных устройствах
Монохроматический
Он основан на одном цвете с различными оттенками. Монохроматическая палитра всегда является выигрышным выбором, так как трудно совершить ошибку и создать неприятную цветовую схему.
Аналогичные (Analogous Colors)
Чтобы создать аналогичную гармонию, используйте цвета, находящиеся рядом на цветовом круге.
Complementary
Дополнительной схемой является сочетание цветов, расположенных друг напротив друга на цветном колесе. Эта схема противоположна аналогичной и монохроматической, поскольку она направлена на достижение высокой контрастности. Например, оранжевую кнопку на синем фоне трудно пропустить в любом интерфейсе.
Расщепленные дополняющие цвета (Split-Complementary)
Эта схема работает аналогично предыдущей, но она использует больше цветов. Например, если вы выберете синий цвет, вам нужно взять два других, которые смежны с его противоположным цветом, обозначая желтый и красный. Контраст здесь менее резкий, чем в дополнительной схеме, но он позволяет использовать больше цветов.
Триада цветов (Triadic colors)
Когда дизайн требует большего количества цветов, вы можете попробовать триадическую схему. Он основан на трех отдельных цветах, лежащих на окружности цветового круга на одинаковом друг от друга расстоянии. Чтобы сохранить баланс с помощью этой схемы, рекомендуется использовать один цвет как доминирующий, другой — как акценты.
Tetradic/Double-Complementary
Цветовая схема тетради предназначена для опытных дизайнеров, так как она сложнее сбалансировать. Он использует четыре цвета от колеса, которые являются дополнительными парами. Если вы соединяете точки на выбранных цветах, они образуют прямоугольник. Схема сложная, но если вы все сделаете правильно, результаты могут быть ошеломляющими.
Behance
Dribbble Colors
Color Hunter
Просто загрузите картинку и Color Hunter создаст на ее основе палитру. Это отличный способ достичь гармонии между изображениями и основными цветами сайта.
Designspiration
Можешь выбрать сразу 5 цветов и посмотреть, что нашлось в это цветовой палитре.
Tineye Multicolr
На сайте 20 миллионов изображений по лицензии Creative Commons из Flickr.
~
Больше статей по теме
Color in Design: Influence on Users’ Actions
Digital colour mixing explained
Why Color Matters
Responding To Color
The Psychology of Color in Marketing and Branding
Color Theory for Designers, Part 1: The Meaning of Color
Color Associations
Why Color Matters
Birren, Faber., Color Psychology and Color Therapy.
Простой выбор цвета
Color — недооцененный дизайнерский инструмент. Когда вы выбираете правильную палитру, веб-сайт может запеть. Когда я был новичком, я часто использовал слишком много цветов в своих проектах. Мой выбор не основывался на многом — либо на тенденциях того времени, либо на каком-либо настроении, в котором я был. В конце концов, я пытался найти что-то хорошее, но на это часто уходило время.
Есть способ получше!
Вы можете использовать три идеи, которые упростят выбор цвета.Это: концепция сайта, марка и ваши личные предпочтения . Если вы сможете разобраться в этих трех вещах, выбрать цвета будет намного проще. Давайте исследуем каждую из них.
Концепт
Есть ли у вашего сайта концепция? Вероятно, так и должно быть. Вот несколько тщательно отобранных примеров сайтов с концепциями: Preserve, Legwork, Si Le Soleil. Посмотрите на каждый пример и попытайтесь понять, что это за концепция (подсказка: ответы внизу).
Наличие концепции может значительно сузить ваши цветовые варианты. Если ваша концепция связана с водой, использовать много красного, вероятно, не получится. Вода и красный цвет живут в разных мирах.
Ваши цвета должны соответствовать вашей концепции. Или, по крайней мере, не конфликт.
Бренд
Допустим, вы делаете сайт Мемориала ветеранов Вьетнама в Вашингтоне. Это очень серьезная тема. Тон (или бренд) любого военного мемориала уважительный и серьезный, поэтому и ваш выбор цвета должен быть таким же.Яркие и веселые цвета будут казаться неуместными, точно так же, как продавец воздушных шаров рядом с мемориалом будет казаться безвкусным. Черный, белый, темные и приглушенные цвета лучше подошли бы для места военного мемориала, эти цвета были бы «фирменными».
Или, может быть, вы делаете сайт для большой компании. В этом случае у них будет четко обозначенный бренд, который упростит выбор цвета. Если вы создаете сайт для Target, вы, скорее всего, будете использовать комбинацию красного и белого, потому что красный — это большая часть их бренда.Или сайт для Ikea использовал бы их фирменные сине-желтые. Бывают случаи, когда создаваемый вами сайт настолько сильно отличается от бренда, что вы можете использовать другие несвязанные цвета. Но прежде чем делать это, убедитесь, что вы согласовали это со своим креативным директором или клиентом.
Делаете сайт для маленького клиента? В этом случае бренд не будет четко определен в руководстве по стилю. Для малого бизнеса гораздо важнее узнать, что нравится владельцам. Найдите примеры веб-сайтов, которыми они восхищаются, и спросите, что им в них нравится.
Ваш инстинкт будет стремиться к цветам, которые вам действительно нравятся, но владельцы малых предприятий живут и дышат бизнесом, так что это просто вопрос того, что им нравится.
Ваши вкусы
Это последний шаг. Если вы выбрали концепцию и знаете, что представляет собой бренд, теперь пора выяснить, что вам нравится, и сравнить это с вашей концепцией и брендом. Вам нужны вещи, которые вам нравятся, ТАКЖЕ работающие с концепцией и брендом вашего сайта. Мне нравится черпать вдохновение на таких сайтах, как Mind Sparkle Mag.Или иногда я использую генератор случайных цветов. Скажем, ваша концепция «ручная работа», как в приведенном выше примере Preserve. Какие еще сайты воплощают ручную работу? Какие цвета они используют? Используются ли дополнительные цветовые схемы? Аналогичные? Я предполагаю, что многие из них будут использовать красную эстетику в теплых тонах, потому что понятие «ручная работа» — очень человеческое понятие.
Нужна помощь в выборе оттенков? Попробуйте онлайн-генератор цветовой палитры
Фото: коллаж из зеленой цветовой палитры от Africa Studio / Shutterstock
Выбор цветовой палитры может быть непростой задачей.Выбираете ли вы два или десять оттенков для своей следующей картины, цифрового дизайна или схемы декора, может быть сложно как сузить круг выбора, так и выбрать цвета, которые, по вашему мнению, подходят для вашего проекта. Но, как и во многих вещах в творческой сфере, чем больше вы практикуетесь и чем больше учитесь, тем более интуитивным становится выбор цвета.
Прежде чем вы начнете смешивать цвета или создавать палитру, лучше всего знать основы теории цвета, особенно как пользоваться цветовым кругом. Это поможет вам понять отношения между оттенками, а также предлагает способ создания цветовых схем, которые варьируются от базовых комбинаций до тонких оттенков.
Хотя лучше всего знать свой цветовой круг, есть еще один вариант создания палитр. Всего одним щелчком мыши онлайн-генератор цветовой палитры может помочь подобрать оттенки, которые хорошо смотрятся вместе. Если вы цифровой дизайнер, эти типы веб-сайтов особенно полезны; они часто предоставляют шестнадцатеричные номера цветов оттенка, чтобы вы могли вставить их в свой CSS или в такие программы, как Photoshop. Однако даже если вы работаете в аналоговом режиме, вы все равно получите отличное вдохновение для смешивания цветов.
Нужна помощь в создании цветовых палитр? Вот пять лучших бесплатных генераторов цветовой палитры, которые можно попробовать.
Фото: Цветовая палитра Peppercorn от Джейн Рикс / Shutterstock
Coolors : называя себя «сверхбыстрым генератором цвета», этот сайт (и сопутствующее приложение), Coolors будет генерировать для вас палитры и позволять настраивать характеристики, включая насыщенность, температуру и яркость. Кроме того, он может отображать различные типы дальтонизма, чтобы вы могли видеть, как будут выглядеть оттенки в глазах других людей. Найдя понравившуюся палитру, вы можете сохранить ее на будущее и поделиться ею с другими.
Canva : Canva — отличный ресурс для создания инфографики и других изображений для социальных сетей. Чтобы помочь вам в этих творческих начинаниях, у них есть генератор цветовой палитры, который покажет определяющие цвета изображения. Поэтому, если вы создаете текст для наложения на это изображение, это идеальный способ убедиться, что все элементы отлично смотрятся вместе.
Охладители
ColorSpace : ColorSpace берет на себя все догадки при выборе цвета; все, что вам нужно, это просто один оттенок и нажать кнопку «Создать» — внезапно он представит вам несколько схем.Они варьируются от «Обычного градиента» до комбинаций, которые вы не ожидаете, например, «Сдержанная палитра».
Colormind : Вы зацикливаетесь на выборе хотя бы одного цвета? Colormind имеет предварительно выбранные палитры, которые готовы к использованию. Все, что вам нужно, это выбрать тот, который нравится вам и вашему проекту.
Палетон
Paletton : Paletton предлагает формат, отличный от других генераторов цветовой палитры, но это отличная новость для тех, кто склонен к зрению.Вы просто начинаете с цветового круга и выбираете базовый оттенок, который хотите использовать. Затем Paletton вводит его в большой квадрат с более мелкими оттенками над ним. Вы сможете увидеть, как разные оттенки и тона выглядят с вашим основным оттенком — все одновременно. Кроме того, сайт позволяет переключать цветовые схемы с монохроматического на триаду, на «свободный стиль» и многое другое.
Статьи по теме:
Любитель дизайна представляет яркие цветовые палитры любимых телешоу, фильмов и музыкальных клипов
Хотите узнать о смешивании цветов? Вот основы, которые вам нужно знать
Рукописный справочник цветов XIX века, поэтически описывающий, где в природе встречаются оттенки
11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру
При разработке веб-сайта первоочередной задачей является улучшение цветовой палитры вашего веб-сайта.Лучший способ сделать это — просмотреть существующие веб-сайты и изучить конкурентов, поэтому мы проделали всю работу за вас и составили список из 11 цветовых схем веб-сайтов, которые идеально подходят для каждого бренда.
Но погоди минутку. Что делать, если у вас уже есть цветовая палитра веб-сайта, которую вы хотите использовать? Что ж, конечно, это отличное начало, но важно подумать о том, что вы хотите, чтобы цветовая схема вашего веб-сайта говорила, прежде чем торопиться с чем-либо …
Учет психологии цвета для цветовых схем веб-сайта
—
Возьмите прекрасного художника Йозефа Альберса.Мастер цвета, он посвятил свою практику пониманию цвета и того, как он влияет на настроение зрителя и адаптируется к различным контекстам. Огромная часть его исследований заключалась в рассмотрении различных способов взаимодействия цветов друг с другом. Возьмем, к примеру, его картину ниже: сочетание темно-зеленого и оранжевого цветов вызывает неприятные ощущения, тогда как в сочетании зеленого с серым Альберс создает баланс с гораздо более спокойным, современным настроением для публики.
Взаимодействие цвета. Йозеф Альберс через Phillips. Подобные выводы можно использовать для информирования при выборе дизайна; они помогут вам выбрать цвета веб-дизайна, подходящие для ваших услуг, и подчеркнут идентичность вашего бренда, чтобы донести его до потребителей.
Этот разговор представляет собой введение в психологию цвета, то есть изучение цветов и того, как они влияют на нас на церебральном уровне. Как показал Марк Ротко со своими одноименными картинами «Цветовое поле», определенные цвета требуют определенной реакции. Итак, когда мы рассматриваем цветовые схемы веб-сайта, важно понимать, как разные тона и оттенки влияют на наше настроение. Например, если бы мы разработали веб-сайт для благотворительной организации в области устойчивого развития, мы могли бы использовать оттенки зеленого и синего, потому что они вызывают чувство доверия, природы и здоровья.
Выбор идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.
Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но также можете использовать их для управления тем, как они воспринимают ваш веб-сайт. Почему именно Facebook всегда придерживался синей цветовой схемы? Неужели это действительно потому, что Марк Цукерберг дальтоник к красно-зеленому, а это значит, что синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый цвет.Фактически, синий цвет присутствует более чем в половине всех логотипов. Имея это в виду, давайте посмотрим на основные психологические принципы всех ключевых цветов:
- Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем веб-сайтов электронной коммерции, а также для ресторанов и приложений для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
- Оранжевый : оптимизм и счастье.Оранжевый цвет повсеместно считается «забавным» цветом, и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
- Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет для веб-сайтов в сфере услуг — вы будете рады помочь!
- Зеленый: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда.Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
- Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
- Purple : творчество, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет, который можно использовать в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
- Розовый : креативность и изобилие.Pink сейчас радуется своей жизни, больше, чем когда-либо, его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и включают его в целый ряд отраслей.
- Коричневый : доброта, тепло и честность. При использовании в веб-дизайне коричневый цвет утешает. Это придает веб-сайтам естественную, практичную атмосферу и часто сочетается с традиционным винтажным дизайном.
- Черный: современность, гладкий, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды выбирают черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
- Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
- Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.
Мы только что отправили вам ваш первый урок.
Автор OrangeCrush11 красивых цветовых схем веб-сайта, которые вдохновят вас
—
Хорошо, кажется, нам нравится приписывать цветам эмоциональные и человеческие черты. Бренды используют эти абстрактные ассоциации для установления эмоциональных связей с людьми, что помогает им привлекать и удерживать больше потребителей или клиентов. Выбирая цветовую палитру своего веб-сайта, вы можете использовать эти ассоциации в своих интересах.Чтобы помочь нам объяснить, мы поискали в Интернете 11 конкретных примеров цветовых схем веб-сайтов в действии:
1. Цвета для продуманных экологически чистых продуктов
При выборе цветовой гаммы для бренда органической конопли есть ли другой выбор, кроме зеленого ?! Помимо экологичности, он является синонимом продуктов из марихуаны, конопли и CBD. Бледные оттенки желтого и овсяного цвета дополняют зеленый цвет конопли, в то время как серьезный характер темно-синего привносит доверие к этой цветовой гамме.
Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:
Цветовая схема сайта с тонировкой конопли от Tonitrix: # f5eec2 # 416a59 # 39395f # 73a24e # a9c25d2. Яркие и полезные для здоровья цвета
Было бы легко увязнуть в предсказуемо землистых тонах коричневого и зеленого при визуализации экологической идентичности бренда … но вы не должны забывать, что ваша целевая аудитория постоянно находится в поле зрения периферии!
Daye в основном ориентирована на молодых, профессиональных, умных и заботящихся о своем здоровье женщин.Поэтому инновационный бренд выбрал яркую палитру персиковых, оранжевых и зеленых тонов (которая кажется настолько актуальной, что не будет неуместной в вычурном аккаунте в Instagram), чтобы передать современные ценности экологичности и натуральных продуктов.
Бледно-персиковый, апельсиновый, мятный и темно-зеленый:
Эко-тона тысячелетия от Your Daye: # f6c453 # fefbe9 # f0a04b # 183a1d # e1eedd3. Стильные тщательно подобранные цветовые схемы
У Сирени момент. Полистайте любой актуальный модный журнал, и вы увидите, как именно этот фиолетовый сочится со страниц и попадает в ваш гардероб.Это свежая, мягкая и классная альтернатива , розовому цвету миллениала, которые мои глаза так много видели, что на них стало больно смотреть.
Цветовая гамма этого веб-сайта электронной торговли — сиреневый, ржавый и кремовый — мгновенно создает тщательно подобранную атмосферу. Он вызывает доверие у пользователей, показывая, что они, как и они, внимательны, продвигают индивидуальность и идут в ногу с современными модными тенденциями.
Сирень, ржавчина, крем и уголь:
Цветовая схема Contemporary Lilac от Collagerie: # e4ddf4 # 943d24 # fffbf0 # 2d2d2d # 2826124.Веселые, юные цветовые палитры
Идея создания ботанического цеха под названием «Каменная бумага» сама по себе настолько увлекательна, что нет ничего лучше, чем использовать выбранные ими второстепенные цвета, похожие на детские. На первый взгляд, эта цветовая схема веб-сайта приносит столько радости и волнения, что возвращает вас в школьные годы — точно так же, как это сделала бы творческая мастерская.
Нежно-розовый, зеленый, оранжевый и фиолетовый:
Цветовая схема полихроматического веб-сайта от Brent & Jo Studio: # 397754 # f0a3bc # 70be51 # eb6b40 # 9b45b25.Цвета для креативщиков, кружащие голову
Контраст неонового синего и первичного желтого кажется невероятным: он выходит за рамки требования быть замеченным, он заставляет мои глаза физически слезиться. Но я почему-то не против. Эта смелая цветовая гамма отражает вынужденную харизму креативного агентства: она смелая, захватывающая, и мне очень нравится с ней работать.
Желтый, неоновый синий и черный:
Контрастная цветовая схема сайта от e2infinity: # 5bccf6 # fcde67 # 030e126.Успокаивающие и оптимистичные нейтральные палитры
Тональное сочетание персикового и не совсем белого обеспечивает красивый фон и, вероятно, самый простой аспект приучения малышей к туалету. Почти черная копия легко читается поспешными родителями и менее жесткая, чем абсолютно черная. Упрощенная, приглушенная и легкая, эта цветовая палитра этого веб-сайта вызывает умиротворение.
Персик, сливки и уголь:
Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: # ef9273 # fef9f8 # 0d0d0d7.Надежные тона
Оглядываясь на нашу теорию цвета, мы видим, что крутой синий цвет вызывает чувство надежности и доверия к цветовым схемам веб-сайтов: по сути, все, что вы хотите от онлайн-банка.
Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:
Надежные бирюзовые тона через N26: # 2b6777 # c8d8e4 #ffffff # f2f2f2 # 52ab988. Успокаивающие, но уверенные цветовые схемы
Хотя коралловый и синий — довольно яркие цвета, они смягчаются безмятежными оттенками серого, сиреневого и бледно-розового.Это умная цветовая схема для приложения для медитации, потому что, хотя она успокаивает, она также уверенная (красный) и надежная (синий), которые в совокупности довольно подходят для услуг, связанных с психическим здоровьем и благополучием.
Бледно-розовый, коралловый, серый, сиреневый и темно-синий:
Медитативная цветовая схема Spoon Lancer: # fae5df # f5cac2 # ed7966 # 303179 # 1418509. Современные модные цветовые схемы
Purple возвращается на бис, так как на этот раз лиловый сочетается с мятой и апельсином.Эти цветовые схемы повсюду в мире иллюстраций Instagram и модных интернет-магазинов. Несмотря на то, что они довольно мягкие и скромные, они создают прилив современной энергии, достаточно универсальный, чтобы проникнуть в брендинг любой отрасли.
Фиолетовый, лиловый, мята и апельсин:
Via Saluto: # 5f2c3e # d1adcc # c2d2bd # c65032 # f6e9d710. Веселые и благотворительные цветовые палитры
Эта некоммерческая организация из Нью-Йорка использует пастельные синие и зеленые цвета с акцентом на желтом, чтобы проиллюстрировать юношеское, радостное отношение к детям, поскольку они стремятся учить детей правильному питанию и предоставлять медицинские услуги школам.В этой цветовой гамме они выглядят искренними, позитивными и заботливыми.
Синий, желтый, шалфейный и белый:
Веселые некоммерческие цвета от Lovely Grit Studio: # 1b4d89 # f9e45b # 6db784 #ffffff11. Яркие и эмоциональные цветовые схемы
Для бренда, основная задача которого — рассказывать и поддерживать аудиторию, испытывающую трудности с фертильностью, жизненно важно привлечь внимание к вашему бренду. Он должен быть заслуживающим доверия, но не снисходительным, вызывающим и в то же время чувствительным.Нежная теплота розового по сравнению с более сильными оттенками фуксии и нефрита отражает разнообразие чувств, впечатлений и людей, для которых существует этот бренд: он целостный, всеобъемлющий и не боится бороться с любыми эмоциями.
Пудрово-розовый, фуксия и нефрит:
Цветовая схема Fuschia и Green для Fertility Tribe от Lovely Grit Studio: # eddcd9 # f2ebe9 # de5499 # 264143 # e99f4cПоиск цветовых схем для веб-сайта начинается сейчас
—
Будь то новый диван, помада или велосипед, выбор правильного цвета может оказаться довольно сложной задачей.Если вы пытаетесь запустить веб-сайт, все становится сложнее. Вы должны оценить психологическое и культурное значение различных цветовых палитр веб-сайта и то, как это повлияет на восприятие вашего бренда.
К счастью, для этого вам не нужна степень. Изучите теорию цвета, выбор цвета веб-сайта ваших конкурентов и не бойтесь экспериментировать с границами: в случае успеха это может стать разницей между выбором между вашим брендом и остальным рынком.Когда вы думаете об этом, волшебство цветов заключается в том, что мы буквально окружены ими: вдохновляющая часть начинается, когда вы открываете глаза и смотрите по сторонам.
Ищете единственную в цветовой гамме?
Позвольте нашим дизайнерам подобрать ваши оттенки.
Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.
Цветовые палитры и эффекты — Таблица
Все метки имеют цвет по умолчанию, даже если на карточке «Метки» нет полей в поле «Цвет».Для большинства знаков по умолчанию используется синий цвет; для текста по умолчанию используется черный цвет. Также см. Раздел «Назначение цветов меткам» и «Пример — несколько полей в цвете».
Категориальные палитры
Когда вы перетаскиваете поле с дискретными значениями (обычно размерностью) в поле «Цвет» на карточке «Метки», Tableau использует палитру категорий и назначает цвет каждому значению поля. Категориальные палитры содержат отдельные цвета, подходящие для полей со значениями, не имеющими внутреннего порядка, например отделы или способы доставки.
Чтобы изменить цвета значений поля, щелкните в правом верхнем углу цветовой легенды. На рабочем столе Tableau выберите «Редактировать цвета» в контекстном меню. В Tableau Server или Tableau Online диалоговое окно «Редактировать цвета» открывается автоматически.
Tableau Настольная версия | Веб-версия |
Изменить цвет для значения
Щелкните элемент слева в разделе «Выбрать элемент данных».
Щелкните новый цвет в палитре справа. В Tableau Desktop вы можете навести указатель мыши на образец, чтобы определить цвет.
Повторите эти действия для всех значений, которые вы хотите изменить.
На рабочем столе Tableau нажмите OK, чтобы закрыть диалоговое окно «Редактировать цвета».В Tableau Server или Tableau Online просто закройте диалоговое окно.
Выбрать другую палитру
Раскрывающийся список «Выбрать цветовую палитру» в диалоговом окне «Редактировать цвета» содержит цветовые палитры, которые можно использовать для дискретных полей. Список содержит как категориальную, так и порядковую палитры.
Вверху списка находятся палитры категорий, например, Таблица 10 .Как отмечалось выше, категориальные палитры подходят для дискретных полей без определенного порядка.
Внизу списка расположены порядковые палитры, например, Оранжевый . Порядковые палитры содержат ряд связанных цветов и подходят для полей, имеющих связанный порядок, например даты или числа.
После выбора палитры щелкните «Назначить палитру», чтобы автоматически назначить новые цвета палитры элементам в поле.
Чтобы вернуться к автоматической палитре и назначению цветов по умолчанию, нажмите «Сброс» в диалоговом окне «Редактировать цвета».
Количественные палитры
Когда вы перетаскиваете поле с непрерывными значениями на карточку «Метки» (обычно это мера), Tableau отображает количественную легенду с непрерывным диапазоном цветов.
Вы можете изменить цвета, используемые в диапазоне, распределение цвета и другие свойства. Чтобы изменить цвета, щелкните в верхнем правом углу легенды цветов.На рабочем столе Tableau выберите «Редактировать цвета» в контекстном меню. В Tableau Server или Tableau Online диалоговое окно «Редактировать цвета» открывается автоматически.
Если для поля заданы как отрицательные, так и положительные значения, диапазон значений по умолчанию будет использовать два цветовых диапазона, а диалоговое окно «Редактировать цвета» для поля имеет квадратное цветовое поле на обоих концах диапазона. Это известно как расходящаяся палитра.
Tableau Настольная версия | Веб-версия |
Диалоговое окно «Редактировать цвета» для расходящейся палитры
Когда все значения либо положительные, либо отрицательные, диапазон значений по умолчанию будет использовать один цветовой диапазон, а диалоговое окно «Редактировать цвета» для поля имеет квадратное цветовое поле только в правом конце диапазона.Это называется последовательной палитрой.
Tableau Настольная версия | Веб-версия |
Диалоговое окно «Редактировать цвета» для последовательной палитры
Вы можете указать, будет ли Tableau использовать расходящуюся или последовательную палитру для непрерывного поля в Color, а также настроить диапазон цветов для значений поля.
В раскрывающемся списке «Палитра» представлен ряд цветовых палитр, из которых вы можете выбирать. Для непрерывных полей доступны два типа количественных палитр:
Все палитры, в названии которых указано Diverging , являются различными количественными палитрами, например, Orange-Blue Diverging . Вы можете выбрать расходящуюся палитру для любого непрерывного поля — необязательно, чтобы диапазон значений содержал как положительные, так и отрицательные числа.
Чтобы изменить цвета расходящейся палитры, щелкните одно из квадратных цветных полей на любом конце спектра палитры. В зависимости от того, работаете ли вы в Tableau Desktop или в Интернете, выполните одно из следующих действий:
В Tableau Desktop в диалоговом окне конфигурации цвета (которое является частью операционной системы вашего компьютера) выберите цвет из палитры цветов или введите собственные значения.
В Tableau Server или Tableau Online введите настраиваемое шестнадцатеричное значение в поле Custom Color. Если значение недействительно, изменения не вносятся.
Все остальные палитры представляют собой последовательные количественные палитры. Чтобы изменить цвета для последовательной палитры, щелкните квадратное поле цвета в правом конце спектра палитры, чтобы открыть диалоговое окно конфигурации цвета (рабочий стол Tableau) или ввести пользовательское значение Hex в поле Custom Color (Tableau Server или Tableau Online).
Параметры количественных палитр
В диалоговом окне «Редактировать цвета» для непрерывного поля доступны следующие параметры.
Примечание : Для Tableau Server и Tableau Online параметры различаются.
Ступенчатый цвет
Выберите «Пошаговый цвет», чтобы сгруппировать значения в однородные ячейки, где каждая ячейка связана с цветом.Используйте элемент управления прокруткой, чтобы указать, сколько шагов (интервалов) нужно создать. Например, для диапазона значений от 0 до 100 вы можете указать пять шагов для сортировки значений по пяти ячейкам (0-20, 20-40 и т. Д.).
Tableau Настольная версия | Веб-версия |
Если выбрана расходящаяся цветовая палитра, Точка перехода палитры между цветами отображается на шкале цветов с помощью небольшой черной галочки.Если количество шагов нечетное, ставится отметка в середина переходного шага. Когда количество шагов четное, Знак ставится на границе между ступенями, где меняется цвет.
Перевернутое положение
Выберите «Обратный», чтобы изменить порядок цветов в диапазоне. Например, если вы хотите, чтобы более низкие значения имели более темную интенсивность в последовательной палитре, переверните палитру. Для расходящейся палитры реверсирование цветовой палитры означает замену двух цветов в палитре в дополнение к инвертированию оттенков в каждом цветовом диапазоне.
Использовать полный цветовой диапазон
При расходящейся (двухцветной) палитре можно выбрать «Использовать полный цветовой диапазон». Tableau присваивает начальному и конечному номерам полную интенсивность для обоих цветовых диапазонов. Таким образом, если диапазон находится в диапазоне от -10 до 100, цвет, представляющий отрицательные числа, будет настроен для изменения оттенка намного быстрее, чем цвет, представляющий положительные числа. Если вы не выбираете «Использовать полный диапазон цветов», Tableau назначает интенсивность цвета, как если бы диапазон значений был от -100 до 100, так что изменение оттенка будет одинаковым по обе стороны от нуля.Это означает, что будет гораздо меньше изменений на отрицательной стороне, где фактические значения варьируются только от -10 до 0, чем на положительной стороне, где значения колеблются от 0 до 100.
На изображении слева внизу показана расходящаяся красно-зеленая цветовая палитра для значений от -858 до 72,986. Без использования полного цветового диапазона -858 (связанный с небольшим прямоугольником в правом нижнем углу диаграммы) отображается серым, потому что -858 составляет всего около 1% в отрицательной стороне, а 72,986 — в положительной.При использовании полного цветового диапазона, как на изображении справа, -858 отображается как темно-красный цвет, равный по интенсивности максимальному положительному значению.
Включить итоги
Выберите «Включить итоги», чтобы включить итоги, промежуточные и общие итоги в цветовую кодировку. Этот параметр применяется только в том случае, если в представление включены общие значения.
Ограничить цветовую гамму
В Tableau Desktop, когда вы нажимаете Advanced в диалоговом окне Edit Colors, вы можете указать начальное, конечное и центральное значения для диапазона, установив флажок и введя новое значение в поле, и цветовая шкала станет скорректирована соответственно.
Начальное значение — это нижний предел диапазона, конечное значение — это верхний предел, а центральное значение — это место, где нейтральный цвет находится в расходящейся цветовой палитре.
Примечание : Эта опция в настоящее время недоступна в Tableau Server или Tableau Online.
Сброс цветового диапазона
Чтобы вернуться к автоматической палитре и назначению цветов по умолчанию, нажмите «Сброс» в диалоговом окне «Редактировать цвета».
Примечание : Если вы находитесь в режиме веб-разработки и щелкните «Сброс», цветовая палитра вернется к настройкам по умолчанию. Все параметры, которые были установлены в расширенном параметре, также будут сброшены. Чтобы отменить это действие, вы можете нажать «Отменить» в верхнем меню. Если ваши изменения уже были сохранены, вы должны изменить дополнительные параметры в Tableau Desktop и повторно опубликовать представление.
Настройка цветовых эффектов
Щелкните раскрывающийся список «Цвет» на карточке «Метки», чтобы настроить дополнительные параметры цвета, не связанные с фактическими показанными цветами.
Tableau Настольная версия | Веб-версия |
Непрозрачность
Измените прозрачность меток, перемещая ползунок.
Регулировка непрозрачности особенно полезна для плотных точечных диаграмм или когда вы просматриваете данные, накладываемые на карту или фоновое изображение. При перемещении ползунка влево отметки становятся более прозрачными.
Обозначить границы
По умолчанию Tableau отображает все метки без рамки. Вы можете включить границы меток для всех типов меток, кроме текста, линии и формы. В раскрывающемся списке «Цвет» выберите цвет границы метки.
Tableau Настольная версия | Веб-версия |
Границы могут быть полезны для визуального разделения близко расположенных знаков.Например, представленные ниже виды показывают диаграмму рассеяния с включенными границами меток (слева) и выключенными (справа). Когда границы включены, метки легче различать в тех областях, где они плотно сгруппированы.
Примечание: Вы также можете использовать настройку непрозрачности чтобы показать плотность отметок.
Когда вы просматриваете большое количество мелких меток с цветовой кодировкой, обычно лучше не задавать границы меток.В противном случае границы могут доминировать в представлении, что затрудняет просмотр цветовой кодировки.
Например, представленные ниже представления показывают полосы, которые сегментированы большим количеством элементов измерения с цветовой кодировкой. Когда границы меток включены (справа), некоторые из более узких меток трудно идентифицировать по цвету. Когда границы отключены (слева), метки легко различить.
Обозначить ореол
Чтобы сделать отметки более заметными на фоне изображения или карты, окружите каждую отметку сплошным контрастным цветом, называемым ореолом.Ореолы меток доступны, когда у вас есть фоновое изображение или фоновая карта. В раскрывающемся списке «Цвет» выберите цвет ореола метки.
Маркеры
В Tableau Desktop при использовании типа метки «Линия» можно добавить эффект маркера, чтобы показать или скрыть точки вдоль линии. Вы можете показать выбранные точки, все точки или ни одного. В раскрывающемся списке «Цвет» выберите маркер в разделе «Эффекты».
Примечание : Эта опция в настоящее время недоступна в Tableau Server или Tableau Online.
20 лучших цветовых комбинаций, которые можно опробовать на вашем веб-сайте [Руководство в закладках]
При планировании внешнего вида вашего нового бизнес-веб-сайта вы должны решить, какие цвета вы хотите использовать. Чтобы оказать положительное влияние на посетителей и увеличить продажи, ваша цветовая палитра должна укреплять ваш бренд, делать ваш сайт легким для чтения и навигации и, прежде всего, хорошо выглядеть.
Но найти цвета, которые «хорошо смотрятся» вместе, не так просто, как кажется. Многие факторы влияют на то, как мы обрабатываем цвет на визуальном и эмоциональном уровне. Это затрудняет создание эффективной и оригинальной цветовой схемы веб-сайта с нуля, даже если у нас есть некоторое интуитивное представление о том, какие цветовые комбинации работают хорошо, а какие нет.Лучшие цвета для веб-сайта
К сожалению, не существует универсальной цветовой комбинации, которая является секретом потенциальных клиентов и продаж с вашего веб-сайта и дизайнерских материалов.Если бы все было так просто (но в то же время все визуальные образы в результате были бы почти такими же).
Вместо этого, при выборе цветов для своего веб-сайта следует учитывать две вещи:
- Теория цвета — как цвета и визуальные эффекты взаимодействуют друг с другом для создания эстетичного дизайна.
- Психология цвета — Выбор цветов может психологически изменить восприятие вашего бренда.
По сути, теория цвета помогает вам выбрать цвета, которые хорошо сочетаются друг с другом (например, избегать размещения розового текста на фиолетовом фоне, потому что это повредит читаемость вашего сайта), в то время как психология цвета может помочь вам создать разрушительную атмосферу (например, выбрать синий для успокаивающий эффект).
Одна вещь, которую вы можете сделать, — это начать с одного цвета или настроения, а затем работать в обратном направлении, чтобы создать свою цветовую схему. Кроме того, вы можете черпать вдохновение в своих любимых брендах, которые уже делают это. К счастью, мы составили список лучших цветовых комбинаций, используемых в веб-дизайне, которые вы можете попробовать сами.
Лучшие цветовые схемы и комбинации для веб-сайтов
- Кораллово-красный и викинг
- Ист-Бэй, Лунный Рейкер и Призрак
- Викинг и Карри
- Желто-коричневая кожа, киноварь и Акапулько
- Боттичелли, Непал и Корабельный серый
- Персидский зеленый, Vista Blue, сиреневый и подсолнечный
- Желтые календулы, ледяной холод и синий Vista
- Специи, Тоскана, Яффо, Калико и желтый металл
- Swiss Coffee, Schooner, Pharlap и Mine Shaft
- Тюльпанное дерево и пунга
- Лебединый пух, Монте-Карло и обсерватория
- Ваш розовый, сладко-горький и ализариновый малиновый
- Пампасы, твой розовый и Мелани
- Горный луг и магнолия
- Терракота, порох, Moon Raker, Акапулько и Манхэттен
- Сладко-горький, Космос, Нильский синий и Чайка
- Malibu, Aero Blue, Picton Blue и Boston Blue
- Белый навахо и яркий мандарин
- Dove Grey и Aero Blue
- Милано красный и черный жемчуг
Конечно, группа загадочных названий цветов бесполезна, если не увидеть их в действии.(Что такое «Фарлап»?)
Итак, для каждой схемы я предоставил шестнадцатеричные цветовые коды для каждого цвета в цветовой комбинации, а также наглядный пример того, как они могут работать вместе. Все примеры взяты с веб-сайтов, известных своей визуальной привлекательностью. Не стесняйтесь использовать эти сайты в качестве вдохновения для своей цветовой палитры, макета и общей эстетики.
1. Кораллово-красный и викинг
- Кораллово-красный: # F93943
- Викинг: # 7EB2DD
Viking — нежный бледно-голубой цвет, придающий успокаивающий глоток свежего воздуха любому участку.Добавление вкраплений кораллово-красного обеспечивает резкий контраст, но при этом не переусердствует с насыщенностью. В приведенном ниже примере также добавлены дополнительные синие и зеленые тона для прохладной океанской атмосферы, разбавленной брызгами кораллов. Если этот коралловый оттенок слишком драматичен, подумайте о том, чтобы сделать красный бледнее.
Источник изображения
2. Ист-Бэй, Мун Рейкер и Призрак
- Ист-Бэй: # 424874
- Moon Raker: # DCD6F7 .
- Призрак: # CACFD6
Если вам когда-либо надоели текстовые элементы предсказуемого черного и темно-серого цветов, то East Bay — темно-синий цвет, который является отличной альтернативой.Замените белый фон бледно-серым цветом Ghost для более красивого белого пространства. Затем добавьте бледные акценты, такие как лаванда Moon Raker, для мягкой палитры или выберите акценты высокой насыщенности, такие как розовый в примере ниже.
Источник изображения
3. Викинг и Карри
- Викинг: # 7EB2DD
- Гарри: # FFE8D4
Хорошо, мы не можем насытиться бледно-голубым цветом, который предлагает Viking. И, говоря о мягких палитрах, сочетание их с мягкими кремовыми тонами, такими как Karry, создает успокаивающее ощущение в пастельных дополнительных тонах.
В приведенном ниже примере палитра идет еще дальше с более резкими и насыщенными аналогами Viking и Karry в качестве акцентных цветов.
Источник изображения
4. Желто-коричневая кожа, киноварь и Акапулько
- Желто-коричневая кожа: # F98866
- Vermilion: # FF420E
- Акапулько: # 80BD9E .
Если вы любите апельсины, но ищете что-то более яркое, чем Karry, Tan Hide и Vermilion — прекрасные цвета, похожие на закат.
В некоторых случаях они могут быть немного подавляющими, поэтому не переусердствуйте.Охладите их успокаивающим цветом, таким как бледно-зеленый цвет Акапулько.
Источник изображения
5. Непал, Шип Грей и Боттичелли
- Непал: # 90AFC5
- Корабельный серый: # 3E363F
- Боттичелли: # C4DFE6
Ship Grey — еще одна фантастическая альтернатива скучному черному тексту с его супер темным контрастом. Это хорошо сочетается с бледно-серо-голубыми оттенками Непала и Боттичелли.
В приведенном ниже примере они добавили в эту палитру прекрасный оранжевый цвет, чтобы время от времени появлялся всплеск цвета.
Источник изображения
6. Персидский зеленый, вишнево-голубой, сиреневый и подсолнечный
- Персидский зеленый: # 00A6A6
- Vista Blue: # 98DBC6
- Чудесный: # F18D9E
- Подсолнечник: # E6D72A
Когда все сделано правильно, эта цветовая схема делает монитор или страницу яркими, но не слишком резкими. Зеленый, коралловый и желтый мягкие, но обезоруживающие.
В приведенном ниже примере они используются обильно, давая летнюю атмосферу конфет или фруктового мороженого.
Источник изображения
7. Желтые календулы, ледяной холод и синий Vista
- Желтые календулы: # F6E278
- Ледяной холод: # BCF4F5
- Vista Blue: # 98DBC6
Marigold Yellow и Vista Blue (который на самом деле скорее бледно-зеленый) — это более теплые цвета, которые хорошо контрастируют с разницей температур ледяного синего, несмотря на аналогичную цветовую схему. В результате получаются легкие, но забавные изменения цвета.
Источник изображения
8.Специи, Тоскана, Яффо, Калико и желтый металл
- Специя: # 6E352C
- Тоскана: # CF5230
- Яффо: # F59A44
- Калико: # E3C598
- Желтый металл: # 6E612F
Пастель вам не нравится? Наслаждайтесь яркими красными оттенками Spice и Tuscany и сумрачно-желтыми оттенками Jaffa и Yellow Metal. Они придают пикантность любому дизайну. Кроме того, с Calico вы можете получить яркий контраст, не прибегая к белому, который может быть слишком крутым для палитры.
Источник изображения
9. Swiss Coffee, Schooner, Pharlap и Mine Shaft
- Швейцарский кофе: # E1DCD9
- Шхуна: # 8F868
- Pharlap: # A67F78
- Шахтный вал: # 3E3C3C
Коричневый может быть чрезвычайно универсальным цветом, о чем свидетельствует этот монохромный набор цветов от Swiss Coffee (самый светлый) до Mine Shaft (самый темный).
Ограниченные цветовые схемы могут быть очень привлекательными на минималистичных сайтах. Кроме того, вы можете создавать дизайны в светлом режиме (светлая основа и темный текст) или темном режиме (темная основа и светлый текст, как в примере ниже).
Источник изображения
10. Тюльпанное дерево и пунга
- Тюльпанное дерево: # F2AB39
- Пунга: # 563C16
Tulip Tree — это глубокий насыщенный горчичный цвет, который привлекает внимание. Сочетание его с темно-оранжевым оттенком, таким как Punga (который почти представляет собой более темно-коричневый), создает богатый опыт в любом дизайне. Просто посмотрите, как UPS использует эту схему с отличной цветовой блокировкой и визуально привлекательной текстурой.
Источник изображения
11.Лебединый спуск, Монте-Карло и обсерватория
- Лебединый пух: # D1EDE1
- Монте-Карло: # 7BC5AE
- Обсерватория: # 028C6A
Мятно-свежий! Еще одна монохромная палитра, на этот раз с бледно-зеленым цветом Swans Down и Monte Carlo с более темным оттенком Observatory. Белый цвет хорошо сочетается с этой схемой, как и контрастирующие апельсины или кораллы.
Источник изображения
12. Ваш розовый, сладко-горький и ализариновый малиновый
- Ваш розовый: # FFC2C3
- Сладко-горький: # FE7773
- Ализарин малиновый: # EA3238
Все эти три цвета — ярко-розовые, насыщенные красным оттенком.Имея это в виду, они обеспечивают смелый, прямой вид. В приведенном ниже примере это используется в своих интересах, делая Bittersweet основным цветом. Эффект дополнительно подчеркнут холодным белым и электрическим синим в качестве акцентных цветов.
Источник изображения
13. Пампасы, твой розовый и Мелани
- Пампасы: # F1EBE9
- Ваш розовый: # FFC2C3
- Мелани: # E6CBDD
Еще одна комбинация с ярким цветом Your Pink, эта комбинация напоминает тему жевательной резинки с более светлыми цветами Pampas и Melanie.
Источник изображения
14. Горный луг и магнолия
- Mountain Meadow: # 1B998B
- Магнолия: # F8F1FF
Зеленый и розовый не совсем дополняют друг друга, поэтому вы не часто видите их в паре. Кроме того, горный луг и магнолия не имеют одинакового оттенка или оттенка. Однако это нетрадиционное сочетание работает, потому что оно ниспровергает ожидания. Однако, поскольку магнолия очень светлая и склоняется к более прохладной стороне розового (почти как розоватый барвинок), она не полностью конфликтует с зеленым.
Источник изображения
15. Терракота, порох, Moon Raker, Акапулько и Манхэттен
- Терракота: # E07A5F
- Порох: # 3D405B
- Moon Raker: # DCD6F7 .
- Акапулько: # 80BD9E .
- Манхэттен: # F2CC8F
Эта комбинация пастельных тонов и глубокого насыщенного темно-пурпурно-синего цвета Gun Powder создает мягкую, но модную и смелую схему. Terracotta, Moon Raker, Acapulco и Manhattan — отличный выбор для цветного фона (как показано ниже) с Gun Powder в качестве контраста для текста и элементов навигации.
Источник изображения
16. Сладко-горький, Космос, Нильский синий и Чайка
- Сладко-горький: # FE7773
- Cosmos: # FFD8D8
- Нильский синий: # 194049 .
- Чайка: # 87CEEB
Бледно-голубой цвет Seagull и бледно-розовый цвет Cosmos хорошо сочетаются с ярким коралловым оттенком Bittersweet и темным Nile Blue (который представляет собой темно-голубоватый изумруд).
Для смелого образа сделайте последние основными цветами в дизайне, а более мягкие — тонкими акцентами.
В качестве альтернативы вы можете выбрать более сдержанный вид с более мягким фоном и яркими акцентами.
Источник изображения
17. Malibu, Aero Blue, Picton Blue и Boston Blue
- Малибу: # 4DD7FF
- Aero Blue: # AEFFF1
- Синий Пиктон: # 32C3EE
- Бостонский синий: # 3B8FA1
Обратите внимание на эту полумонохроматическую цветовую комбинацию, состоящую из синего. Тем не менее, Aero Blue и Boston Blue имеют намек на зеленый оттенок, чтобы сделать вещи визуально интересными, а не минималистичными.
Источник изображения
18. Белый навахо и яркий мандарин
- Белый навахо: # FFE0AC
- Яркий мандарин: # FF8C8C
Vivid Tangerine — яркий красно-розовый цвет, который сам по себе заявляет о себе. В сочетании с сдержанным желтым, таким как белый навахо, или даже более насыщенным желтым, он дает теплый вид, такой же яркий, как солнце.
В приведенном ниже примере не требуется дополнительных изображений или текстур, поскольку цвета достаточно громкие, чтобы говорить сами за себя.
Источник изображения
19. Голубино-серый и аэро-синий
- Голубь: # 666666
- Aero Blue: # AEFFF1
Но если крутизна — это больше ваша скорость, и вы хотите сохранить немного яркой смелости, Aero Blue — хороший вариант. Эффектный аквамарин может сочетаться с приглушенным голубовато-серым цветом.
Источник изображения
20. Милано красный и черный жемчуг
- Красный Милано: # BA1200
- Черный жемчуг: # 031927
Красный трудно преуспеть в веб-дизайне, но с более приглушенным Milano Red работать легче.Это становится еще проще с Black Pearl, синим настолько темным, что он выглядит как черный с холодными оттенками. Эта прохлада уравновешивает приглушенный красный цвет для эффективного использования цвета.
Источник изображения
Добавление цветного всплеска
На первый взгляд может показаться, что поиск правильной цветовой комбинации должен быть простым и интуитивно понятным. В конце концов, мы видим эффективное использование цвета повсюду, от дизайна бренда до искусства, развлечений и модной одежды. По правде говоря, все эти реальные проекты были тщательно спланированы, протестированы и, по крайней мере, частично вдохновлены проектами, появившимися ранее.
Создание идеального цветового дизайна для вашего веб-сайта — непростая задача. Но если придерживаться одной из предложенных мною схем, ваш сайт станет еще одним прекрасным примером качественного веб-дизайна в действии.
Примечание редактора: этот пост был первоначально опубликован в октябре 2020 года и был обновлен для полноты.
8 способов выбрать цветовую палитру для электронного обучения
Один из самых неприятных аспектов разработки курса электронного обучения — это выбор цветовой палитры.Цветовая палитра относится к ограниченному и заранее определенному набору цветов, которые вы используете в дизайне.
Если бы у нас было только 100 вариантов цвета, выбор палитры не был бы проблемой. Но у нас есть доступ к миллионам цветов, что делает возможный выбор огромным. Из этого, казалось бы, бесконечного диапазона цветов, как вы можете сузить список и решить, какие из них использовать?
Цели для вашей цветовой палитры
Для начала, есть по крайней мере пять вещей, которые вы хотите получить от цветовой схемы.Ваша цветовая палитра должна:
- обеспечивает достаточный цветовой контраст, чтобы сделать обучение доступным для всех,
- продвигать положительный опыт,
- не вызывать утомление глаз,
- проецирует соответствующее настроение или психологический эффект для обучения, а
- соответствовать аудитории и содержанию.
Советы перед началом работы
- Нейтраль для запуска. Подумайте о том, чтобы начать дизайн с форм в нейтральной палитре, например, с оттенками серого или коричневого.Затем начинайте медленно добавлять цвет там, где это необходимо.
- Цветовой контекст . Учитывайте влияние смежных и фоновых цветов. Мы воспринимаем цвета на основе смежных цветов.
- Количество цветов. Создать палитру проще, если у вас небольшое количество цветов. Рассмотрим палитру из 3-5 цветов: один-два основных цвета, нейтральный и акцентный.
- Согласованность. Старайтесь соответствовать вашей палитре. Например, по возможности используйте один и тот же цвет для всех бликов.Используйте один цвет для всех стрелок.
- Доступность. Перед внедрением проверьте доступность палитры. Используйте средство проверки цветового контраста, например, из Web Aim или Chrome Contrast Analyzer. (Благодаря комментариям читателей ниже за то, что они предложили мне включить это!)
Имея в виду эти рекомендации и советы, вот восемь способов выбрать цветовую палитру для электронного обучения и других учебных материалов. Один или несколько из этих подходов должны работать для каждого проекта.Попробуйте выбрать два-три основных цвета и один или два акцентных цвета. Также выберите нейтральный или бледный цвет для фона или для других целей. Темный текст на светлом фоне легче всего читать в Интернете.
Цвет и доступность
Как вы можете гарантировать, что ваша палитра будет способствовать обучению людей с дальтонизмом и нарушениями зрения? Избегайте использования одного цвета для передачи информации в графике и тексте. Например, вместо того, чтобы использовать только синий текст для ссылок, добавьте подчеркивание ко всем ссылкам.В информационном графике не используйте только цвет для передачи информации. Добавьте значок, узор или подобное устройство для представления информации.
Кроме того, следуйте рекомендациям WCAG по цветовому контрасту между текстом и фоном. Узнайте больше о проектировании для людей с нарушениями зрения на WebAIM.
1. Основывайте свою палитру на корпоративном брендеУ вас может быть небольшой выбор цветовой схемы, если вам необходимо использовать фирменные цвета вашей организации или вашего клиента.Как вы знаете, цвета бренда выбираются для передачи определенного сообщения. Руководство может не решиться отклониться от этой цветовой идентичности. Если вы находите цвета неприятными или неподходящими для учебных материалов, возможно, вы можете представить пример, демонстрирующий, что требования к учебному контенту отличаются от требований к маркетинговому контенту. Хотя есть некоторое совпадение целей дизайна обучения и целей маркетинга, обучение нацелено на долгосрочное удержание и повышение производительности на рабочем месте.Важно, чтобы учащиеся сосредоточились на правильных частях изображения и чтобы дизайн не утомлял глаза. Привлечение внимания — ключевая цель маркетинга — это лишь один из аспектов учебного курса.
Возможно, вы сможете изменить данную вам палитру, смягчив цвета и заменив некоторые нейтральными. Например, в первой палитре, показанной ниже, вы можете найти сочетания цветов немного резкими для учебного курса. Модифицированная палитра, показанная во второй версии, смягчает два цвета и заменяет два нейтральными.
2. Основывайте свою палитру на аудитории и содержанииИспользуйте свои знания аудитории, чтобы выбрать цветовую палитру. Если курс предназначен для дошкольных учителей и помощников, возможно, будет уместно использовать палитру, включающую яркие основные цвета. Эти цвета ассоциируются с маленькими детьми. Вы можете не перегружать аудиторию, уравновешивая цветовую схему с нейтральными цветами и ограничивая области, в которых вы используете яркие цвета.С другой стороны, если материалы предназначены для сотрудников консервативного финансового учреждения, вы бы выбрали приглушенную палитру.
3. Основывайте свою палитру на цветовой гамме фотографийВозможно, у вас есть набор фотографий, которые составят основную часть вашего контента, например, изображения сотрудников склада. В этом случае вы можете выбрать палитру на основе основных цветов ваших фотографий. Например, на фотографии ниже палитра может содержать оттенок синего от рабочей одежды, желтый от каски, оранжевый от жилета безопасности и нейтральный загар, взятый из коробок.Чтобы получить точный цвет, используйте графическую программу или утилиту выбора цвета, чтобы выбрать цвета с фотографии.
Вы также можете автоматизировать процесс, загрузив фотографии в онлайн-генератор палитры, который затем создаст палитру на основе вашей фотографии. Я не уверен, что мне это нравится, в этом случае я бы изменил цвет или два.
4. Основывайте свою палитру на психологическом воздействииПодумайте о выборе палитры психологического воздействия, которое вы хотите оказать на аудиторию.Яркие и яркие цвета волнуют. То же самое и с теплыми цветами красного, оранжевого и желтого. Приглушенные цвета расслабляют. Как и холодные цвета, такие как синий и зеленый. Используйте цвета, соответствующие их влиянию на аудиторию. Если вы создаете материалы об уходе за людьми с тяжелыми заболеваниями, вам нужно проявить чувствительность в своей палитре. Яркая и веселая цветовая гамма неуместна. В этом случае лучше всего подойдет палитра мягких пастельных тонов.
5. Основывайте свою палитру на символизмеЦвета связаны со значениями, которые различаются в зависимости от культуры.Если символический цвет имеет эмоциональное значение для вашей аудитории, подумайте о выборе цветов, которые добавят смысла учебным материалам. Очевидным примером может служить использование символики цветов светофора при разработке курса техники безопасности для лаборантов. Использование зеленого для безопасных процедур и красного для небезопасных было бы одним из способов приблизиться к палитре.
6. Основывайте свою палитру на традиционных отраслевых цветахВ некоторых отраслях промышленности используется обычная цветовая палитра, которую вы, возможно, захотите принять, потому что она покажется слушателям знакомой и удобной.Например, в сфере здравоохранения и финансов часто используется синяя палитра, политические организации часто используют цвета флага своей страны, а экологические организации часто используют зеленый и синий цвета. См. Логотипы ниже.
7. Основывайте свою палитру на гармонии природных цветовВы почти никогда не ошибетесь, используя природу как источник вдохновения для палитры. Люди обычно находят цвета цветочного луга или оттенки неба, океана и песка эстетически привлекательными.Мы склонны находить цветовую палитру природы приятной и гармоничной. Если вы не уверены, какие цвета выбрать для палитры, посмотрите на цвета в естественной среде для вдохновения. Затем при необходимости измените палитру.
Ниже представлена палитра, созданная из фотографии горного пейзажа с помощью генератора палитры Adobe Color.
8. Основывайте свою палитру на теории цвета с помощью цветового круга или генератора палитрЦветовой круг предоставляет основу для понимания теории цвета и выбора цветовой схемы.Схематическое представление цветов в круге позволяет легко выбрать палитру на основе формальных правил цветовой гармонии. Вот несколько цветовых схем, основанных на теории цвета с использованием цветового круга в качестве системы отсчета:
- Аналогичная цветовая палитра : цветовая схема, созданная из цветов, которые соседствуют друг с другом в цветовом круге, например, зелено-желтый, зелено-желтый
- Дополнительная цветовая палитра : цветовая схема, созданная из двух цветов, находящихся напротив друг друга на цветовом круге, например синего и оранжевого
- Монохромная цветовая палитра: цветовая схема, в которой используются вариации только одного цвета, например оттенки и оттенки синего
Существует множество генераторов палитр, которые можно использовать для создания палитр на основе этих и других цветовых гармоний.Вот несколько генераторов цветовой палитры:
Еще одна записка
В идеале, когда вы выбираете цветовую палитру, вы должны придерживаться ее, чтобы обеспечить единообразный и профессиональный вид. Хотя вам может потребоваться изменить выбор цвета здесь или там, лучше всего определять палитру в начале дизайна, поскольку вы получите представление о том, как все будет выглядеть и цениться. Затем работайте в выбранной вами цветовой схеме для остальной части проекта.
Если вам нравится то, что вы прочитали, ознакомьтесь с моей книгой, в которой обучаются профессионалы в области визуального дизайна, а также принципы и творческое вдохновение.
Получайте последние статьи, ресурсы и бесплатные подарки один раз в месяц
плюс Контрольный список визуального дизайна.
Color Tools — Sherwin-Williams
Color Tools — Sherwin-Williams Диалог сообщений Показать сообщение об обновленииГде бы вы ни находились, наши инструменты ColorSnap ® всегда готовы помочь вам, когда вас ждут новые цвета — вы можете исследовать цвета на своем компьютере, мобильном устройстве или iPad.Сузить выбор цвета стало еще проще!
Канада
Мексика
Общая информация
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Аргентина
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Бразилия
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Чили
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Колумбия
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Эквадор
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Уругвай
Наши продукты доступны по всей Южной Америке, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Общая информация
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Коста-Рика
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Сальвадор
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Гватемала
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Гондурас
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Мексика
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Никарагуа
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Панама
Наши продукты доступны по всей Центральной Америке, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Общая информация
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Багамы
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Bermuda
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Бонайре, Синт-Эстатиус и Саба
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Каймановы острова
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Доминиканская Республика
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Гаити
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Ямайка
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Пуэрто-Рико
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Сент-Китс и Невис
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Острова Теркс и Кайкос
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Виргинские острова (Британские)
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Другие островные страны Карибского бассейна
Наши продукты доступны по всему Карибскому региону, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Общая информация
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Китай
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Индонезия
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Япония
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Малайзия
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Сингапур
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Южная Корея
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Таиланд
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Вьетнам
Наши продукты доступны во всем Азиатско-Тихоокеанском регионе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Общая информация
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Хорватия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Кипр
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Чешская Республика
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Дания
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Общие промышленные покрытия
Danske
Промышленные покрытия для древесины
Danske
Упаковочные покрытия
Английский
Защитные и морские покрытия
Danske
Финляндия
Наша продукция доступна по всей Европе, см. свяжитесь с нами по адресу globalsales @ sherwin.com.
Общие промышленные покрытия
Suomi
Промышленные покрытия для древесины
Suomi
Упаковочные покрытия
Английский
Защитные и морские покрытия
Suomi
Франция
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Германия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Венгрия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Италия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Литва
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Норвегия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Общие промышленные покрытия
Norsk
Промышленные покрытия для древесины
Norsk
Упаковочные покрытия
Английский
Защитные и морские покрытия
Nynorsk
Польша
Наша продукция доступна по всей Европе, см. свяжитесь с нами по адресу [email protected].
Общие промышленные покрытия
Polski
Промышленные покрытия для древесины
Polski
Упаковочные покрытия
Английский
Защитные и морские покрытия
Polski
Португалия
Наши продукты доступны по всей Европе, см. свяжитесь с нами по адресу globalsales @ sherwin.com.
Румыния
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Россия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Сербия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Словакия
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Словения
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Испания
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Швеция
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Украина
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу globalsales @ sherwin.com.
Великобритания
Наши продукты доступны по всей Европе, см. Адреса ниже или свяжитесь с нами по адресу [email protected].
Ближний Восток
Наши продукты доступны по всему Ближнему Востоку, см. Адреса ниже или свяжитесь с нами по адресу globalsales@sherwin.