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

Алан-э-Дейл       09.09.2022 г.

Как выбрать идеальный цвет

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

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

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

Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.

Adobe Color CC — как уловить палитру момента

Как часто вы смотрели на что-то перед собой, и думали: «какое удивительное сочетание цветов»? Наверняка, не один раз. Если вы при этом так или иначе связаны с дизайном, то с немалой вероятностью вы бы хотели использовать увиденный набор цветов в какой-то из своих работ. Именно поэтому компания Adobe выпустила приложение, которое раньше называлось Kuler, а на днях обновилось и получило новое имя Adobe Color CC.

Последнее обновление iOS-продуктов Adobe явно является самым крупным за всю историю и позволяет понять, что дальнейшее будущее свое компания связывает четко с Creative Cloud — все продукты получили буквы CC в названии и улучшили свою интеграцию с облаком. Теперь большая часть приложений разделена на «компаньонов» Illustrator и «компаньонов» Photoshop, что выразилось в изменении цветов и названиях приложений. Практически все приложения бесплатны, если вы купили подписку на Creative Cloud, таким образом, Adobe дает все больше причин для оформления этой самой подписки. Но вернемся к Colors CC.

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

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

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

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

Название: Adobe Color CCИздатель/разработчик: Adobe Цена: Бесплатно Встроенные покупки: Нет Совместимость: iPhone Ссылка: Для iPhone

Make a scheme with Color CC

So can someone with next to no artistic ability such as me create a scheme? Sure you can.

To start, select one of the white circles in the color wheel. Drag it around the wheel until you find a tone you like. Depending on what you have set in Color Rule, the other four colors will move to complement or contrast your color choice. That part is very easy and is quite fun on its own.

The Monochromatic rule creates four colors with a similar tone and depth to the color you select on the wheel. Triad splits the wheel into three and delivers five colors that contrast but still work together. Complementary widens the space between colors but select ones that will work well together.

The Compound rules do well at finding complementary colors. Shades selects four complementary shades of your primary selection and Custom allows you to move the five sliders wherever you like on the wheel.

Explore Color CC

The Explore menu within the Color CC website is very interesting indeed. It is especially useful for anyone looking for inspiration or who wants a color scheme. You can select the Most popular, All, Most used, Random and then some time settings for each. What the site returns is a page full of color schemes that immediately get the creative juices flowing.

The color schemes are many and varied as you would imagine. There are literally hundreds of schemes covering every color, mood, tone and depth. If you see a scheme you like, hover the cursor over it and select info. You are taken to its own page where you can see a much larger version of it. Click the color swatch once to make it full screen.

On the right is the Actions menu. Here you can offer appreciation (Like), save it to your own library if you register or log in with your Adobe ID, share or edit a copy of it. The ability to edit a copy of a scheme is probably useful for the more artistically inclined.

Использование ваших схем в дизайне

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

Если вы вошли в систему со своим Adobe ID при создании схемы, вы можете использовать ее в другом продукте Adobe по своему усмотрению. Например, в Illustrator выберите «Окно», а затем «Цветовые темы». Сохраненные вами выборки из Adobe Color CC должны автоматически появиться в окне тем, чтобы вы могли их использовать напрямую. Просто добавьте образцы, чтобы сохранить их в Illustrator и перейти оттуда.

Adobe Color CC — фантастический ресурс для дизайнеров всех видов. Я не знаю ни одного другого приложения, которое было бы близко к простоте использования и мощной простоте Adobe Color CC. Учитывая, что его можно использовать бесплатно, даже если у вас нет других продуктов Adobe, я думаю, что это отличный ресурс!

Сервисы подбора цветовых схем для сайта

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

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

Сервис Adobe Color CC

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

Сервис Colormind

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

Сервис Colors

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

Сервис Color Safe

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

Сервис

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

Сервис Paletton

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

Сервис Colordot

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

Сервис Colourcode

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

Сервис Material Design Palette

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

Простота использования

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

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

Важность цвета

Быстрые ссылки

Важность цвета
Adobe Color CC
Простота использования
Сделайте схему с Color CC
Слайд, чтобы править
Исследуй Цвет CC
Создайте цветовую схему из изображения в Adobe Color CC
Использование ваших схем в дизайне

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

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

Дополнение

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

Как должна выглядеть цветовая палитра для сайта? Определённого ответа нет. У всех свои предпочтения. Также может зависеть и от тематики сайта. Возможно, у вас уже есть логотип фирмы. Тогда можно воспользоваться извлечением темы или градиента.

Будет зависеть и от целевой аудитории. Например, если это детский портал с развлекательным контентом, то цвета можно подобрать «весёлые». А если посетителями являются взрослые и деловые люди, то подойдёт более сдержанная палитра цветов.

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

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

Using your schemes in a design

Adobe Color CC displays the RGB values of each color selection which you can use however you like. However, if you use Illustrator, Photoshop or other Adobe product, you can utilize the scheme directly.

As long as you are logged in with your Adobe ID when creating the scheme, you can use it within another Adobe product as you see fit. For example, in Illustrator, select Window and then Color Themes. Your saved selections from Adobe Color CC should appear automatically within the themes window for you to use directly. Just add to swatches to save them in Illustrator and go from there.

Adobe Color CC is a fantastic resource for designers of all kinds. I know of no other app that comes close to the ease of use and powerful simplicity of Adobe Color CC. Considering it’s free to use even if you don’t own any other Adobe products, I think it’s a great resource!

Зачем нужна палитра цветов?

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

Палитра цветов занимает важное место в продвижении сайта. Казалось бы, при чём тут цветовая гамма? Вспомните себя

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

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

Да, они привлекут внимание несомненно. Но можно ли читать и вникать в текст, когда кругом кричащие цвета? А если человек итак провёл весь день за компьютером, а затем попал на такой сайт в конце трудового дня?

Ease of use

The Adobe Color CC is completely on-brand if you’re familiar with other Adobe products. The design is flat and simple with usability firmly at the center of things. The core idea is front and center of the page that compromises a large color wheel, samples, sliders and some color rules.

You can manually drag the color wheel around to generate new colors, view other people’s color schemes, make a scheme from an uploaded image and more. It is a very powerful web app that every designer should use. I tend not to wax too lyrical about Adobe products because they are so expensive but Adobe Color CC is free and is very, very good at what it does.

Сделайте схему с Color CC

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

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

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

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

Цвет

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

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

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

К счастью, теперь Adobe Color CC позволяет с легкостью создать и выбрать цветовую палитру. Adobe Color CC — приложение и сайт, интегрированные с остальными приложениями Creative Cloud. Это приложение позволяет вам черпать идеи из окружающего вас мира и создавать гармоничную цветовую схему везде, где бы вы ни находились.
Приложение Color (доступно для iOS) — отличный способ создавать и сохранять цветовые схемы, которые вы видите вокруг себя. Например, во время путешествия вы видите знак или плакат и хотите запечатлеть возникшее у вас ощущение. Для этого вам и нужно приложение “Color”. Это приложение использует камеру iPhone или iPad для передачи живого изображения на экран. Когда вы перемещаете телефон или планшет, приложение автоматически генерирует цветовые схемы, выбирая цвета, которые вы видите на экране вашего устройства.

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

Но больше всего нам нравится то, как CC можно использовать при работе с вашими текущими проектами. После того, как вы на ходу создали цветовую тему, вы можете зарегистрироваться на color.adobe.com и продолжить ее редактировать, а также вы сможете скачать .ASE файлы и импортировать их в Photoshop, Illustrator и InDesign. Помимо этого, вы можете посмотреть на темы, созданные другими пользователями, и использовать их как источник вдохновения.

Но и это еще не все: с помощью библиотек Creative Cloud (Creative Cloud Libraries) вы сможете автоматически загрузить эти темы в ваши приложения Creative Cloud. Color CC – прекрасный способ выбора и обработки цветовых схем, который вы сможете использовать в любом вашем проекте. Далее мы дадим вам несколько советов по работе с этим приложением и другими программами Creative Cloud.

Используйте Adobe Color CC в вашей работе!

Палитра цветов — инструкция по работе в Adobe Color

Теперь разберёмся, как работать с палитрой цветов в программе. Заходим в сервис Adobe Color и регистрируемся. Можно обойтись и без этого, но тогда вы не сможете сохранять палитры в библиотеке. Впрочем, чтобы сэкономить время, можно авторизоваться через Facebook. Итак, пройдёмся по разделам и вкладкам Adobe Color.

Раздел «Создать»:

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

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

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

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

Листаем чуть ниже

Обратите внимание, что слева можно развернуть вкладку и выбрать цветовой режим из RGB, CMYK, HSV и LAB. В зависимости от этого будут меняться бегунки, но цвет остаётся тем же

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

Таким образом, автоматически подбирается цветовая палитра. Как только определились с основным цветом, вспомните о типах схем слева:

  • Последовательная
  • Монохромная
  • Треугольная
  • Комплементарная
  • Сплит-комплементарная цветовая схема
  • Двойная сплит-комплементарная
  • Квадратная
  • Составная
  • Оттеночная
  • Произвольная (для ваших изменений)

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

Извлечение темы

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

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

Извлечение градиента

Новинка в Adobe Color — извлечение градиента. Загрузка картинки происходит аналогичным образом

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

А затем в разделе «Цветовой круг» вставить его в основной столбец и поиграть цветами.

Цветовая игра

В последней вкладке данного раздела разработчики сервиса Adobe Color разместили игру. Так что, если совсем нечем заняться, можно поиграть и потренировать память.

Раздел «Смотреть»

Если вас ещё не посетили идеи по поводу цветового оформления сайта, зайдите в раздел «Смотреть». Изучайте все источники или разверните вкладку справа. И откройте Цветовые темы, Творческие проекты или Фотографии Stock, чтобы смотреть готовые решения. Наслаждайтесь и вдохновляйтесь красивыми видами, пока не определитесь.

Тенденции

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

Моя библиотека

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

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

Также можно опубликовать в Adobe Color. Продолжить редактировать в цветовом круге. Или удалить. Ну а чтобы применить какой-либо цвет из палитры на сайте, просто копируйте, нажав на блок. А затем вставляйте в нужное место в файле CSS.

Гость форума
От: admin

Эта тема закрыта для публикации ответов.