Подбор цвета для сайта – простые правила сочетания. Подбор цветов


Полезные сервисы подбора цветов для сайтов и UX-дизайна

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

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

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

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

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

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

Лучшие сочетания цветов

Лучшие сочетания цветов

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

Behance

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

Сервис Behance

Сервис Behance

Dribbble Colors

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

Сервис Dribbble Colors

Сервис Dribbble Colors

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

Процент цвета в Dribbble

Процент цвета в Dribbble

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

Designspiration

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

Сервис Designspiration

Сервис Designspiration

Сервис Designspiration

Сервис Designspiration

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

Tineye Multicolr

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

Подбор цвета в Tineye Multicolr

Подбор цвета в Tineye Multicolr

Colorzilla

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

Сервис ColorZilla

Сервис ColorZilla

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

Shutterstock Spectrum

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

Сервис Shutterstock Spectrum

Сервис Shutterstock Spectrum

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

W3Schools

Инструменты веб-цветов на W3Schools

Инструменты веб-цветов на W3Schools

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

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

Material Design Color Tool

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

Инструмент Material Design Color Tool

Инструмент Material Design Color Tool

Coolors

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

Сервис Coolors.co

Сервис Coolors.co

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

Coolors.co - загрузка изображения

Coolors.co - загрузка изображения

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

Adobe Color CC

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

Сервис Adobe Color CC

Сервис Adobe Color CC

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

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

Adobe Color CC - палитра из изображения

Adobe Color CC - палитра из изображения

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

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

Просмотр палитр в Adobe Color CC

Просмотр палитр в Adobe Color CC

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

Paletton

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

Сервис Paletton

Сервис Paletton

Color Reference

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

Color Reference

Color Reference

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

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

WebAIM Color Contrast Checker

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

Сервис WebAIM Color Contrast Checker

Сервис WebAIM Color Contrast Checker

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

Coolors

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

Выбор типа слепоты в Coolors

Выбор типа слепоты в Coolors

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

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

Выбор типа слепоты в Coolors

Выбор типа слепоты в Coolors

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

NoCoffee Vision Simulator для Chrome

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

Сервис NoCoffee Vision Simulator для Chrome

Сервис NoCoffee Vision Simulator для Chrome

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

Заключение

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

design-mania.ru

Сочетание цвета и подбор цвета онлайн

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

itten6

Ахроматические

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

ser

 

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

Основные

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

osn

 

 Составные

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

sost

 

 Сложные

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

slogn

 

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

 

krug

 

Контрастные

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

contr

Подобные пары цветов очень часто использовались в одежде скоморохов, эти сочетания максимально броски и навязчивы. Надо помнить, что использование насыщенных контрастных цветов – это очень жесткое сочетание, его нельзя использовать в равных по объему плоскостях и массах в интерьере. Но, используя контрастный цвет как небольшой акцент, например, голубые тарелки и полотенца в желтой кухне, мы достигнем ярких, эффектных сочетаний. Они будоражат и повышают жизненный тонус. Использование контрастных точек и штрихов в интерьере способно придать жизнь и шарм скучному помещению, наподобие тому, как капля перца способна изменить вкус пресного блюда. Но надо помнить, что стоит только переборщить с перцем, и блюдо становится несъедобным. Совсем иное впечатление возникнет при использовании разбеленных контрастных сочетаний (с добавлением ахроматических цветов), например, таких как кремово-желтый и серо-голубой. Чем более разбелены контрастные цвета, тем меньше ограничений в их использовании в одном пространстве. Вообще ахроматические цвета способны спасти любую выборку цветов, даже контрастную. Об этом речь пойдет далее.

Дополнительные

Прямо противоположные цвета на цветовом круге называются дополнительными. С дополнительными цветами можно провести один любопытный фокус. Если мы разделим спектр на две части, например – на красно-оранжево-жёлтую и зелёно-сине-фиолетовую, и соберем каждую из этих групп специальной линзой, то в результате получим два смешанных цвета, смесь которых в свою очередь также даст нам белый цвет. Если мы удалим из спектра один цвет, например, зеленый, и посредством линзы соберем оставшиеся цвета – красный, оранжевый, желтый, синий и фиолетовый, – то полученный нами смешанный цвет окажется красным, то есть цветом, дополнительным по отношению к удаленному нами зеленому. Если мы удалим желтый цвет, – то оставшиеся цвета – красный, оранжевый, зеленый, синий и фиолетовый – дадут нам фиолетовый цвет, то есть цвет, дополнительный к желтому. Два цвета, объединение которых дает белый цвет, называются дополнительными цветами. Фактически, идеально чистые дополнительные друг к другу цвета “убивают” друг друга. Каждый цвет является дополнительным по отношению к смеси всех остальных цветов спектра. В смешанном цвете мы не можем увидеть отдельные его составляющие. В этом отношении глаз отличается от уха с хорошим музыкальным слухом, которое может выделить любой из звуков аккорда. Пример дополнительных цветов:

dop

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

Монохроматические

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

mono

Родственные

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

rod

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

Нейтральные

Если взять два рядом расположенных цвета в пределах двух полос цветов на цветовом круге, сгладить один из них добавлением родственных оттенков или “разбавить” ахроматическим (белым или черным), то в итоге мы получим нейтральные цвета. Пример нейтральных цветов:

neit

 

Родственно-контрастные

Цвета с оттенками, расположенными на круге непосредственно слева и справа от цвета, дополнительного ему на цветовом круге. Пример таких цветов:

rod-kon

 

                       Каждый цвет вызывает определенные ассоциации, какие подходят вам?

• Оттенки от желтого к зеленому – спокойная и оптимистичная гамма, снимает усталость.• Пастельные оттенки от желтого к бежевому – «примиряющие» и комфортные цвета.• Бирюза – дает ощущение свежести (подходит для ванной).• Светло-голубой – успокаивает, вызывает сонливость — идеален для спальни и комнат отдыха, а вот в кабинетах и рабочих зонах противопоказан.• Темно-голубой – «охлаждает» пространство и пыл (например, за столом переговоров), считается серьезным и деловым цветом.• Желтый и оранжевый – стимулирует и тонизирует (не годится для спальни), подходит для комнаты окнами на север.• Белый – может вызывать ощущение холода и дискомфорта, с другой стороны – «чистый лист» — идеальный фон для любых дизайнерских решений.• Красный или терракотовый в виде акцентов – бодрит, поднимает настроение.• Черный в виде акцентов – придает интерьеру графичность и особый стиль.• Светло-серый в «миксе» с другими цветами – деловая обстановка.

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

                              Подбор цвета онлайн

colorhunter1

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

763_0_s

 

763_1_s

 

763_2_s

 

763_3_s

 

763_4_s

 

763_5_s

 

 

 

Понравилась статья? Поделись с друзьями:

Читайте также:

samsebedizainer.ru

Подбор цветов для сайта | Данил Фимушкин

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

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

Сервис подбора цветов для сайта №1

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

Сервис подбора цветов для сайта №2

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

Сервис подбора цветов для сайта №3

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

Общие советы по подбору цвета для сайта

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

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

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

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

fimushkin.com

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

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

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

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

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 имеет очень удобный интерфейс. После использования слайдера для определения цвета вы сможете указать ключевые слова, которые позволят определить тему снимков. Кроме этого можно отфильтровать изображения по цветовому балансу и яркости.

24. Stripe Generator 2.0

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

25. Colors on the Web

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

26. Pictaculous

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

27. Contrast-A

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

28. ColoRotate

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

Перевод статьи “The 28 best tools for choosing a colour scheme” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Подбор цветов для сайта | Free-site-master

Подбор цветов для сайта

Подобрать цвета для сайта — дело на самом деле не такое уж и легкое.

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

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

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

Для начала давайте немного углубимся в теорию цвета.

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

Первичные цвета

При смешивании первичных цветов, мы получаем вторичные цвета:

Вторичные цвета

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

Цветовой круг

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

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

Первый способ — триадная схема.

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

Триадная схема

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

Дополняющие цвета

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

Можно использовать, например, две пары комплиментарных цветов:

Подбор цветов для сайта

Можно использовать триаду и цвет, комплиментарный одному из цветов триады:

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

Можно использовать черыре цвета, расположенные друг напротив друга (получается один первичный, один вторичный и два третичных цвета):

Подбор цветов

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

Монохроматический способ подбора цветов

Смежные цвета берут из цветового круга. Они расположены рядом:

Смежные цвета

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

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

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

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

Желаю Вам удачи.

Чтобы не пропустить выход новых статей, советую получать новые статьи на e-mail.

free-site-master.ru

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

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

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

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

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

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

Ахроматические цвета

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

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

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

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

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

Хроматические цвета

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

Хроматические цвета имеют цветовой тон — собственно, это всем понятные и привычные красный, синий, желтый и так далее.

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

Цветовой круг

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

Если смешать их между собой – получатся  три вторичных цвета – зеленый, оранжевый и фиолетовыйПодбор цвета для сайта

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

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

Теплые и холодные цвета

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

Сочетание цвета для сайта

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

  • Монохромные цвета

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

  • Контрастные цвета

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

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

  • Предельно удаленные контрастные цвета

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

  • Аналогичные цвета

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

  • Аналогия с акцентом

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

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

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

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

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

  • Количество цветов

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

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

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

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

  • Теплый или холодный?

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

  • Целевая аудитория

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

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

И пара слов об инструментах, которыми можно воспользоваться при выборе палитры.

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

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

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

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

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

 

 

Понравилась статья? Подпишитесь и читайте новые статьи на сайте сразу после публикации!

Ещё записи по теме:

sales-text.ru


Смотрите также