Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.
Вот такие инструменты есть у меня в закладках.
Напишите в комментариях, какими сайтами подбора цвета для веб-дизайна пользуетесь вы?
Любой веб-дизайнер понимает насколько важен . При помощи цвета расставляются акценты - подчеркиваются важные детали и скрадываются вспомогательные. При помощи цвета создается настроение. Цвет - первое, что видит посетитель сайта, еще до того как прочитает хоть одну букву или осознает, что изображено на той или иной фотографии. Цветовая палитра Вашего сайта может задержать посетителя, а может отпугнуть его.
Выбор правильной цветовой палитры - первый шаг на пути построения идеального и безупречного сайта. Цвет каждого элемента страницы должен гармонировать не только с визуально связанными элементами, но и с общей цветовой схемой страницы и сайта в целом.
Для того, чтобы не ошибиться в начале пути мы подготовили небольшой обзор генераторов цветовых схем , позволяющих выбрать правильное количество и сочетание основных цветов, которые Вы будете использовать при разработке сайта. Одни из них достаточно просты и имеют стандартную функциональность, другие обладают рядом уникальных функций. Но все они, несомненно, окажут неоценимую помощь в разработке уникального дизайна сайта.
Adobe Color CC
Adobe Color CC - своеобразный стандарт подобных приложений, которое позволяет создавать различные цветовые схемы используя для этого цветовой круг . В помощь дизайнеру будет и прямой доступ к сообществу Adobe Kuler , где можно подобрать тысячи всевозможных цветовых решений.
Paletton
Один из старейших (работает с 2002 года) в нашем обзоре инструментов для создания цветовых комбинаций и цветовых решений .
Stylify me
Исследует указанный в строке поиска сайт и предоставляет отчет об используемых в нем цветовых комбинациях , шрифтах, размерах изображений и т.п. Это позволит дизайнеру построить собственные решения, взяв за основу понравившийся сайт.
Coolors
Позволяет сгенерировать базовую цветовую комбинацию , а затем выполнить тонкую настройку полученной палитры по своему вкусу и сохранить ее в различных форматах - SVG, PDF или SCSS.
Лайф выбрал, а дизайнеры протестировали четыре мобильных приложения, которые должны помочь подобрать цвета для любого интерьера.
Для большинства дизайн интерьера начинается с подбора цвета. Определиться с основным оттенком нетрудно, а вот подобрать к нему вспомогательные цвета - уже сложнее. Что делать, если вы не обладаете профессиональными знаниями колористики? Разработчики ответили на этот вопрос, представив приложения для генерации цветовых палеток.
Что делает : Генератор цветовых палеток от лакокрасочного бренда Sherwin-Williams.
На чём работает : iOS и Android
Сколько стоит : бесплатно
Марьяна Багаутдинова, руководитель направления "Кухни GeD cucine", дизайнер :
"Могу с первого предложения заявить, что ColorSnap - достаточно интересное приложение. Основная идея заключается в том, что любой пользователь имеет возможность создавать свою базу сочетания цветов, используя для этого несколько вариантов: предложенные картинки из блока inspiration, ваше собственное фото, создание палетки из предоставленных цветовых раскладок.
Первое, что предлагает приложение, - это цифровые цветовые таблицы: "цветовые семьи" (например: красные, жёлтые, синие, натуральные), исторические цвета, цветовая таблица от американской компании, производящей лакокрасочные покрытия Sherwin-Williams. Что интересно, если кликнуть на тот или иной вариант, то появляется палетка с используемыми на картинке цветами и номерами, коллекциями и названиями красок от компании Sherwin-Williams. Для дизайнеров, а также для простых людей это возможность не изобретать ничего нового, а воспользоваться уже разработанными решениями. Можно попробовать покрасить стены на предложенных базовых вариантах интерьеров, которых представлено достаточно, - это и кухни, и гостиные, и спальни, и детские.
Раздел Paint a Scene, по моему мнению, больше для развлечения. Набор инструментов позволяет в вольном порядке импровизировать с деталями, цветами и способом нанесения цвета. Очень похоже на Paint. Если вы не обладатель специальных электронных гаджетов для рисования, то для того, чтобы провести изящную линию пальцем, надо изрядно постараться. Если вы профессионально занимаетесь декорированием интерьеров или же самостоятельно создаёте и оформляете своё пространство, то с помощью ColorSnap вы можете найти хорошие решения, где бы вы ни были, а впоследствии применить их на практике. Мой ответ: попробуйте!"
ColorFit
Что делает : Помогает подобрать подходящие цвета для любого предмета - нужно только навести камеру на объект и выбрать понравившиеся цветовые сочетания к нему. В качестве бонуса приложение помогает подобрать цвета в одежде.
На чём работает : iOS
Сколько стоит : 75 рублей
Александра Осьминина, эксперт:
По задумке разработчика, приложение должно предлагать колористические решения к сделанной фотографии, но цвета, с которыми работает программа, коих, к слову, немного, очень примитивны и совсем не соответствуют задаче. Интерфейс неудобен, отсутствует функция сохранения предложенных цветовых схем.
До функции инструмента для подбора цвета недотягивает, а для развлечения слишком скучно".
Color Capture by Benjamin Moore
Что делает : Приложение подбирает красивое сочетание оттенков среди красок от компании Benjamin Moore. Отличает от прочих возможность купить понравившиеся оттенки, так как компания представлена в России.
На чём работает : iOS и Android
Сколько стоит : бесплатно
Елена Плато, дизайнер интерьера, архитектор :
"Симпатичное приложение, лёгкое и интуитивное в использовании. Моментально вдохновляет. Профессиональные палитры и всё, что нужно, чтобы просто и быстро создать красивую цветовую гамму. Однозначно буду использовать".
Real Colors
Что делает : Приложение - генератор цветовых палеток. Чтобы создать идеальную, нужно выбрать (или сделать) вдохновляющую фотографию - на её основе подбирается несколько подходящих друг к другу оттенков.
На чём работает : iOS и Android
Сколько стоит : демоверсия - бесплатно/280$
Ольга Осьминина, руководитель дизайн-студии:
"Приложение Real Colors меня не впечатлило. Я не увидела ничего нового. Сразу надо уточнить, что я протестировала только демоверсию. Но за $280 покупать версию профи желание не возникло. Я уверена, что профессионал должен пользоваться своим хорошо отлаженным инструментом - глазами - и изучать колористику как науку, а обычный человек - опираться на свои личные ощущения цвета".
Цвет широко используется в дизайне, - он позволяет «оживить» содержание - создать смысловую связь элементов, наполнить работу эмоциями и настроением. Начинающие дизайнеры берут случайные цвета, но есть способы использовать цвет более осмысленно. Рассмотрим 4 таких способа, организованных по принципу от простого к сложному.
1. Использовать известную гамму
На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.
2. Выбрать готовую профессиональную палитру
Самый простой способ - взять готовое сочетание цветов. Не обязательно каждый раз изобретать велосипед, ведь гармоничные сочетания известны давно. Зайдите на colordrop.io и выбирайте. На сайте сотни профессиональных 4-цветных палитр. Выбрав нужную, нажмите и скопируйте коды цветов с панели, открывшейся справа.
Кроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.
3. Определить палитру цветов понравившейся фотографии или картинки
Этот способ чуть сложнее. Но и эффектнее.
- На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
- Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
- Сервис определит сочетание цветов (внизу под загруженной картинкой).
- Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
- Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
- Кнопка «Auto» генерирует новые сочетания на основе того же фото.
- Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.
Главная страница сайта не менее функциональна. Здесь можно подобрать оттенки отдельных цветов или собрать новую палитру, заменив отдельные цвета.
4. Создать свою цветовую гамму онлайн
Загрузив фото на тот же сайт coolors.co , можно не только определить код цвета, но и создать собственные сочетания. Для этого нажмите пробел - сервис автоматически создает сочетание из 5-ти цветов.
На каждом цвете 4 значка-кнопки :
- Alternative shades - Оттенки цвета (темнее и светлее),
- Drag (Передвинуть цвет вправо или влево по палитре),
- Adjust (Настроить тон, насыщенность, яркость и др.),
- Lock (зафиксировать цвет).
Выбор цветовой схемы для сайта является одним из важных моментов в процессе дизайна. Подбор сочетания цветов - достаточно сложный и творческий процесс. К счастью, существует достаточно много сервисов, которые могут оказать существенную поддержку для правильного выбора.
Некоторые ресурсы, упомянутые в данном обзоре, предоставляют возможность выбора из большого количества уже готовых цветовых схем, а другие позволяют в интерактивном режиме построить собственную схему.
Kuler
Adobe Kuler содержит большую библиотеку готовых цветовых схем. Вы можете просмотреть схему онлайн и загрузить ее для использования в продуктах серии Adobe Creative Suite.
Colour Lovers в текущий момент имеет почти 2 миллиона созданных пользователями цветовых схем. Вы можете просматривать их, сортируя по дате, рейтингу, количеству просмотров.
ColoRotate имеет библиотеку готовых цветовых схем. Также вы можете создать свою собственную схему с помощью уникального 3D инструмента. Цветовую схему можно использовать напрямую в Photoshop и Fireworks с помощью плагина ColoRotate .
Color Scheme Designer позволяет выбрать тип цветовой схемы (моно, комплиментарную, триада, тетрада, аналоговая). Затем можно будет настроить цвета и посмотреть действие схемы на примере.
ColorSchemer располагает большой библиотекой созданной пользователями цветовых схем. Вы можете сортировать их по дате размещения, рейтингу или количеству загрузок.
Pictaculous - простой онлайновый инструмент для генерации цветовой схемы. Вы можете загрузить изображение, а сервис сгенерирует схему для использования с картинкой.
Color Spire
Color Spire очень простой в использовании сервис. Вы выбираете базовый цвет, а он предлагает цветовую схему. Также можно посмотреть внешний вид схемы на простом шаблоне.
