Подбор цвета для сайта: где найти и как выбрать

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору сочетания цветов и генераторов палитр. А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.

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

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

1. Ищем вдохновение

Краски природы

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

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

Behance

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

Dribbble Colors

Dribbble – одна из лучших социальных сетей для дизайнеров, которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение.

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

Попробуйте указать минимальный процент определенного цвета в Dribbble

Designspiration

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

В Designspiration найдете разные примеры цветовых комбинаций

Tineye Multicolr

С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти бесплатные картинки в идеальной палитре.

Colorzilla

ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания CSS-градиентов и многое другое.

Расширение ColorZilla доступно в Chrome и Firefox

Shutterstock Spectrum

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

Причем вам не потребуется подписка, поскольку предварительной оценки картинки будет вполне достаточно (даже несмотря на то, что на ней присутствует «водяной знак») .

W3Schools

Недавно в блоге рассматривали подборку инструментов по веб-цветам в дизайне от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.

2. Создаем цветовую палитру

Material Design Color Tool

Сервис подбора цветов для сайта Material Design Color Tool позволит создавать цветовые схемы, делиться ими и просматривать приблизительный пользовательский интерфейс для подобранных вами параметров. Одна из полезных его функций – измерение уровня доступности любого сочетания цветов.

Coolors

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

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

Цветовая схема в Coolors на основе фото 

Adobe Color CC

Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг:

Проект позволяет создать/сохранить палитру из 5 значений

А можете получить определенный результат из готового изображения:

Подбор цвета для сайта по картинке

Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:

Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в графические редакторы InDesign, Photoshop и Illustrator.

Paletton

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

Color Reference

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

3. Делаем палитру доступной

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

WebAIM Color Contrast Checker

Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте WebAIM Color Contrast Checker при подборе цветов сайта.

WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.

Coolors

О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.

Тип цветовой слепоты в схеме

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

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

NoCoffee Vision Simulator для Chrome

С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.

Так выглядит проект CNN для человека с дейтеранопией

Заключение

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

Сервисы для подбора идеального цвета сайта

~

Сервисы по определению цветовой схемы

• 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.

28 лучших инструментов для подбора цветовых схем

Подборка цвета – один из важнейших этапов в процессе создания хорошего дизайна.

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

Компания Adobe переименовала свой проект Kuler в Colour

Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler. Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC.

Он позволяет подбирать, создавать и сохранять различные цветовые схемы, в каждой из которых может присутствовать до пяти цветов. Инструмент доступен как в браузерной, так и в настольной версии. Если вы используете настольную версию, то вы сможете экспортировать цветовую схему прямо в Photoshop, Illustrator и InDesign.

Если вы не уверены по поводу вашей цветовой схемы, то у Mudcude есть собственная галерея готовых ресурсов

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

Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов. А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium (W3C).

Приложение поможет узнать RGB, HEX, а также HSLA-значения выбранных цветов

iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB, HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.

Color Hunter формирует цветовую схему на основе выбранного изображения

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

Если вам нужно получить конкретный цвет, просто введите HEX-значение в URL

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

Color позволяет находить идеальные цвета, перемещая курсор мыши

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

Бесплатный генератор цветовых схем, который предоставляет информацию о цвете, а также позволяет конвертировать его в любые схемы (RGB, CMYK и другие). Здесь доступны различные форматы цветовых схем, включая триадные, монохромные и другие.

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

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

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

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

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

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

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

ColorZilla доступен как для Chrome, так и для Firefox

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

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

Colr.org позволяет установить диапазон цветов любого изображения

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

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

ColorBlender генерирует палитру из пяти сочетающихся цветов

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

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

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

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

Изображения можно фильтровать по цветовому балансу и яркости

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

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

Colors on the Web принимает отдельные цвета в HEX или RGB, и выдает цветовые схемы, основанные на различных математических вычислениях. Подобный механизм используется и в Kuler. Этот веб-инструмент не будет работать на iPad или iPhone из-за использования технологии Flash.

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

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

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

Данная публикация представляет собой перевод статьи «The 28 best tools for choosing a colour scheme» , подготовленной дружной командой проекта Интернет-технологии.ру

Искусство & Наука Великого Выбора Цвета Вебсайта

Хорхе Кинтерос

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

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

Некоторые решения могут показаться очевидными.

Например, вы, вероятно, не использовали бы синий для сайта на тему Хэллоуина. С другой стороны, какой цвет вы бы выбрали для сайта, посвященного программированию на JavaScript?

В этой статье мы разберем тему выбора цвета на три части.

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

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

Проводные цвета

garryknight

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

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

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

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

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

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

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

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

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

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

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

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

Но постоянный брендинг является мощным, и в случае Oreos он может пережить естественное отвращение к голубой пище.

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

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

Культурные предрасположенности

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

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

seriykotik1970

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

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

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

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

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

Диаграмма предоставлена ​​компанией Logo,

Более конкретно, современная западная культура создает текущие ассоциации:

• Красный — Любовь, Волнение, Похоть, Голод, Смелый, Молодежный, Срочность, Опасность, Романтика, Тепло, Быстрота, Негативные вопросы
• Черный — Стабильность, Достоверность, Сила, Сила, Точность, Профессиональность, Точность, Изысканность, Горе, Страх, Покорность
• Коричневый — Заботливый, Исторический, Безопасность, Консервативный, Надежный, Прочность
• Фиолетовый / Фиолетовый — Авторитет, Роялти, Духовность, Тайны, Магические, Религиозные, Эротика, Любовь, Мудрость, Творчество, Воображаемые, Весна
• Желтый — Энергия, Ясность, Теплота, Инновации, Драйв, Динамичность, Компетентность, Счастье, Оптимизм
• Зеленый — Органический, Естественный, Молодежный, Образование, Приключенческий, Экологический, Спокойный, Здоровый, Мирный, Лето, Зависть
• Orange — креативность, динамичность, энергичность, выразительность, невинность, энтузиазм, осень, самоанализ
• Blue — Достоверность, Спокойствие, Доверие, Надежность, Чистота, Медицина, Мощность, Судебная, Профессиональная, Мужская, Компетентность, Качество, Большая Компания, Зима
• Белый — Счастье, Чистота, Искренность, Чистота, Клиника, Лекарство, Сбалансированный, Просторный, Простой, Легкий, Свежий, Зима

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

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

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

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

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

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

Цветовые отношения

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

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

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

Цвета ниже были выбраны, сначала выбрав абсолютно зеленый цвет (# 00FF00), а затем щелкнув по аналогичному цвету # 65FF65. (В этом случае аналогичный цвет был фактически другого оттенка; то есть он не изменил оттенок, он просто немного осветил базовый цвет.)

Результатом было два «аналогичных» поколения от зеленого, что привело к двум интересным вариациям оттенка, # 64FF98 и # 98FF64.Смотрите схему ниже.

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

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

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

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

Есть несколько способов добраться до этих дополнительных цветов; возможно, наиболее широко используемое название известно как «триадные» отношения.

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

Например, если бы мы выбрали цвет # 64FF98 из вышеприведенной диаграммы в качестве базового цвета для нашего сайта, триадные цвета можно рассчитать по цветам на веб-сайте как # 9763FF и # FF9763. (Лично мне не нравятся эти триадические цвета, поэтому я, вероятно, вернусь и выберу немного другой базовый цвет.)

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

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

Резюме

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

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

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

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

Инструменты Джейк Рошло • 11 сентября 2017 г. • 6 минут ЧИТАТЬ

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

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

Палеттон

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

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

Paletton — это надежный выбор, и он отлично подходит для новичков, которые ничего не знают о дизайне.

Online Email Template Builder

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

Попробуйте бесплатные другие продукты

Color Safe

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

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

Adobe Color CC

Некоторые дизайнеры могут знать об этом как Adobe Kuler, но недавно его переименовали в Adobe Color CC.

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

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

Ambiance

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

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

0to255

Это не генератор полноцветных схем, но он может помочь вам настроить существующие цветовые схемы.

Веб-приложение 0to255 показывает все различные оттенки цвета, чтобы вы могли смешивать и сочетать на лету.

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

Flat UI Colours

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

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

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

Pictaculous

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

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

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

Поставка цвета

Color Supply невероятно уникален, так как это многогранная палитра цветов.Вы выбираете один основной цвет в цветовом круге и выбираете стиль (дополнительный, триада, квадрат и т. Д.).

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

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

Кулеры

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

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

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

Цвета Материала

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

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

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

генератор палитры

Интернет-приложение Palette Generator работает так же, как и сайт Pictaculous, о котором я упоминал ранее.За исключением этого веб-приложения, вы можете загружать несколько изображений, чтобы сравнить / сопоставить различия.

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

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

Палитра цветов

Последнее, но не менее важное, это Color Picker, созданный Dixon & Moe.Этот бесплатный инструмент позволяет выбирать цвета и обновлять существующие цветовые схемы с полной информацией о HEX, HSL и RGB.

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

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

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

Как то, что вы читаете? Подпишитесь на наши главные истории.

,

jquery — Изменить цвет выделения в FullCalendar

Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант
6. реклама Связаться с разработчиками по всему миру

,

какао — изменение цвета выделения текста в NSTextView

Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант
6. реклама Связаться с разработчиками по всему миру

,