Подобрать цвета для сайта онлайн: Карта Сайта ColorScheme.Ru

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

Оглавление:

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

Онлайн подбор сочетания цветов можно использовать для выполнения дизайнерских работ, для оформления лендингов и заработка через Интернет. В статье рассмотрим 10 лучших сервисов, с помощью которых подбираются различные цвета. Из представленного обзора выберем сервис «Сolorhunter» и «ColorScheme», на этих ресурсах поработаем на практике.

Сочетание цветов онлайн, что это такое

Здравствуйте, друзья! Сочетание цветов онлайн – это дополнение одного цвета к другому цвету. Такие цвета есть на специальных сервисах в Интернете и отображаются в виде палитры, круга, цветовых схем. Цвета могут быть разными: абстрактные, перемешанные в градиент, гармоничные, аналоговые и другие (скрин 1).

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

Далее мы разберем инструкцию по подбору цветов и создадим цветовую гамму.

к оглавлению ↑

Онлайн подбор сочетания цветов, где можно это использовать

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

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

к оглавлению ↑

10 лучших сервисов онлайн подбора сочетания цветов

Рассмотрим 10 сервисов для онлайн подбора цветов:

1. Colorhunter.com. Бесплатный сервис, с помощью которого выберите любые цвета.
2. ColorScheme. Этот сервис предоставляет готовые схемы подобранных цветов.
3. Color.adobe.com/ru/create/color-wheel. Данный сервис предлагает бесплатно выбрать цвет и его сохранить. Для скачивания цветов на компьютер нужна регистрация.
4. Mecolor.ru. Здесь цвета подбираются на цветовом круге. Сохраняются в виде кодов.
5. Cvetovoy-krug. ru/podbor-cveta-v-interiere-online-service. Сервис подбирает цвета в интерьере.
6. Colourco.de. Ресурс поможет выбрать цвет. Достаточно провести курсором мыши в нужном окне цветов и скопировать код цвета. Также, цвета скачаете на компьютер.
7. Web.colorotate.org. На сервисе доступен трехмерный инструмент по подбору цветов. Созданный цвет можно скопировать.

Еще ресурсы:

• Webcolourdata.com. У ресурса есть готовые цвета, которые вы можете использовать для сайтов.
• Javier.xyz/cohesive-colors/. На данном сайте можете выбрать цвета с помощью регулятора или по схеме.
• Designspiration.com/palette/8E39EF-3626AF-3169D1/. На сайте расположены шаблоны цветов и возможность создания новых.

Перечисленные сервисы работают. В Интернете вы можете найти десятки похожих сервисов.

к оглавлению ↑

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

Как происходит онлайн подбор цветов? Следуйте простой инструкции:

1. Выбираете сервис выше, который подбирает цвета.
2. Проводите курсором мыши по палитре цветов или используйте готовые цвета.
3. Находите необходимый цвет.
4. Копируете подобранный цвет или скачиваете на компьютер.

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

к оглавлению ↑

Подбор цветовой палитры, используем сервис Сolorhunter

Рассмотрим подбор цветовой палитры на сервисе «Сolorhunter». Для этого открываете ресурс в браузере – «colorhunter.com».  После чего вы увидите цветовые палитры, которые находятся на главной странице ресурса (скрин 2).

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

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

Нажимаете на изображение, чтобы открыть картинку для просмотра или скачать (скрин 5).

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

Вы сможете подобрать цвета с помощью своей картинки. Загружаете ее на сервис с компьютера через кнопку «Выбрать файл» (скрин 6).

После загрузки картинки на сервис, нажмите кнопку «upload an image», чтобы получить палитру цветов.

к оглавлению ↑

Онлайн подбор сочетания цветов сервисом ColorScheme 

Сервис ColorScheme является аналогом предыдущего ресурса, который так же подбирает цвета. Чтобы им пользоваться, заходите на сервис по ссылке – «colorscheme.ru». Перед вами откроется цветовой круг, на котором находится ползунок. Удерживая его левой кнопкой мыши и ведя по кругу, можно подобрать цвет (скрин 7).

Когда цвета для фона будут подобраны, вы можете кликнуть на кнопку «Сохранить» далее «Картинка и коды для вставки (PNG)» (скрин 8).

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

к оглавлению ↑

Заключение

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

Спасибо за внимание!

С уважением, Иван Кунпан.

Просмотров: 3379

виды и способы использования в рисунке

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

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

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

Что такое цветовой круг?

Цветовой круг Иттена. Источник

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

Одним из самых популярных цветовых кругов считается круг Иттена (выше), в котором отображены:

• три первичных цвета: красный, синий и жёлтый;
• три вторичных, которые получились от смешивания первичных: зелёный, оранжевый и фиолетовый;
• шесть третичных (смесь первичных и вторичных): жёлто-зелёный, красно-оранжевый и другие.

На этот круг часто опираются как раз в подборе цветовых схем.

В первую очередь цветовые схемы — это инструмент дизайнера. Они упрощают работу с плакатами, постерами и оформлением интерфейсов приложений. Художники их тоже используют, но при добавлении объёма происходит отход от так называемых «локальных цветов» из-за теплохолодности, света и так далее. В этом нет ничего страшного.

Виды цветовых схем

Покажем каждую на примере круга Иттена.

Комплементарные цвета

Это два цвета, которые на круге находятся друг напротив друга. Самые распространенные комплементарные пары: синий-оранжевый, фиолетовый-жёлтый и красный-зелёный.

Их можно увидеть, например, в «Подсолнухах» Ван Гога.

Винсент Ван Гог — «Подсолнухи». Источник

Художник Николас Коул называет комплементарную цветовую схему идеальной базой.

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

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

Аналоговые цвета

Находятся рядом — такие сочетания часто встречаются в природе и постер-арте.

Такие цвета любил использовать Клод Моне:

Клод Моне — «Японский мостик». Источник

В «Японском мостике» художник использовал зелёный цвет и немного синего, на картине очень низкий контраст между оттенками.

Треугольная схема

Состоит из цветов, которые находятся на вершинах равностороннего треугольника.

Яркий пример — «Молочница» Вермеера:

Йоханнес Вермеер — «Молочница». Источник

Сплит-комплементарные цвета

Находятся на вершинах равнобедренного треугольника.

Это самая простая схема для новичков, так как в её использовании очень сложно ошибиться — любые цвета в ней будут смотреться хорошо практически в любой пропорции. Наглядный пример её использования — «Регата в Аржантёе» того же Моне.

Клод Моне — «Регата на Аржантёе». Источник

Прямоугольная схема

Состоит из двух комплементарных пар. На примере ниже показано, как сочетаются оранжевый с синим и зелёный с красным.

Наглядный пример использования этой схемы — другие подсолнухи Ван Гога.

Винсент Ван Гог — «Подсолнухи из Арля». Источник

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

Квадратная схема

Состоят из цветов в вершинах квадрата.

Часто используются в дизайне интерьеров:

Типичный интерьер с цветами из квадратной схемы

И при изображении городских пейзажей:

Пэтти Моллика — «Верхний Вест-Сайд». Источник

Монохромная схема

Это оттенки одного из 12-и цветов круга.

Яркий пример использования такой схемы — ещё одна работа Моне.

Клод Моне — «Утро на Сене». Источник

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

Комбинация чёрного, белого и оттенков серого.

Очевиднее всего эта схема в книжном тексте или на веб-странице. Пример из изобразительного искусства — некоторые работы Резы Асфара.

Художник — Реза Асфар. Источник

Как пользоваться цветовыми схемами

Изображение из книги «Теория цвета и практическая живопись»

Используйте метод «База, нюанс, акцент»

При работе с цветом важно следить за тем, чтобы они не спорили между собой. Для этого цвета должны отличаться не только по тону, яркости и насыщенности, но и по площади цветовых пятен, чтобы рисунок не превратился в однородную массу. Количество одного основного цвета не должно быть равным количеству другого основного цвета. Лучше всего, когда это соотношение колеблется в пропорции 70 на 30% или даже 80 на 20%.

Хорошо подойдет метод, который делит палитру на базу, нюанс и акцент (БНА):

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

Рассмотрим БНА на примере:

Художник — Реза Асфар. Источник

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

Уменьшайте насыщенность всех цветов, кроме акцентного

Слишком насыщенные цвета «шумят» и перетягивают внимание на себя. Чтобы избавиться от этого эффекта и сфокусировать внимание зрителя, нужно при смешении снижать насыщенность цветов и приближать их к центру цветового круга.

Комиксистка Ann Maulina (автор Raruurien и Varunair) предпочитает уменьшать насыщенность тёмных и светлых цветов, чтобы сделать акцент на полутонах.

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

Ann Maulina сравнивает цвета с голосами — когда их много, получается неразборчивая какофония. Сделайте эти голоса тише, но убедитесь, что их ведёт один основной, сильный голос. Этим голосом и будет основной цвет.

Пример понижения «голоса» цвета. Слева – негармоничные «громкие» цвета. В середине – менее насыщенные цвета, которые уже получше сочетаются. Справа — громкий цвет среди приглушённых. Источник

Расставляйте цвета по уровню яркости

Виды цветовых схем с примерами работ Ann Maulina: Монохромная, аналоговая, комплементарная, сплит-комплементарная, треугольная и прямоугольная. Источник

Ann Maulina советует во время использования схем расставлять цвета по уровню яркости. По мнению художницы, так их проще перенести на скетч.

На изображении показано расположение цвета по уровню яркости — блики, свет, светлый полутон, полутон, тёмный полутон, тень, тёмный акцент. Источник

Не нужно дотошно следовать схемам: используйте дополнительные цвета и оттенки

Цветовые схемы не решают всех проблем и использовать их нужно с умом. Распространённая ошибка новичков при подборе цветов — дотошное следование этим схемам и использование оттенков, которые в них участвуют. Обычно картинку не составляют из цвета схемы в чистом виде, а объединяют с помощью ненасыщенных промежуточных оттенков.

Хороший пример — популярная в кино палитра Teal Orange. Синий и оранжевый (бежевый, жёлтый) — любимое сочетание Голливуда. Это комплементарные цвета, которые можно получить, следуя схеме, но между ними есть и много других оттенков, которые в неё не попадают. Когда у вас есть всего два цвета, необходимы промежуточные оттенки, которые помогут сбалансировать картинку.

Кадры из фильмов «Люди Икс: Апокалипсис», «Остров», «Безумный Макс: Дорога ярости» и «Трансформеры». На всех использованы комплементарные цвета. Источник

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

Если присмотреться, в большинстве кадров с Teal Orange можно также увидеть холодные тени, которые в контексте обретают зеленоватый оттенок. Разумеется, в кадре присутствует не только оранжевый и не только синий, цвета находятся в балансе.

Полезные ссылки

• На сайтах Adobe Color и Color Scheme можно подобрать цветовую схему онлайн, без регистрации и СМС.
• На сайте Color Lisa можно изучать цветовые палитры известных художников вроде Марка Шагала и Сальвадора Дали.
• Расширение для браузера ColorSnap будет полезно не только художникам, но и дизайнерам интерьеров. Оно подбирает цветовые палитры к любым изображениям на экране.
• Сайт Coolors также автоматически подбирает палитры к загруженным изображениям, но без установки в браузер.
• Сайт Canva тоже автоматически подбирает палитры к изображением, которые состоят из четырёх основных цветов.
• Сайт Brandfolder создаёт палитры на основе изображений, но ещё и подписывает цветовые кодировки.

Статьи:

• Помещаем объект в окружение. Изучаем свет и цвет
• Все о теплохолодности, или какого цвета будут тени, свет и рефлексы
• Температура цвета меняет перспективу. Правда ли это?
• Цвет. Температура и восприятие
• Работа с цветом. Опыт Марко Буччи, иллюстратора, сотрудничавшего с Walt Disney
• Как с помощью цвета сделать однотонную поверхность интересной

Как выбрать хорошие цветовые схемы для веб-сайтов (2022)

Последнее обновление , 1 февраля 2022 г. , автор Duncan Lambden in Designing Websites |

Наши независимые исследовательские проекты и беспристрастные обзоры частично финансируются за счет партнерских комиссий без каких-либо дополнительных затрат для наших читателей. Узнать больше

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

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

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

Вам нравится наша графика?

Хотите использовать любую графику на этой странице? Будь нашим гостем! Вы можете получить доступ к нашей графике , а также удобной инфографике на этом Google Диске. Просто не забудьте указать нас, дав ссылку на эту статью. Наслаждаться!

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

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

Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий скачок или снижение конверсии. Например, Beamax, компания, производящая проекционные экраны, заметила гигантское увеличение на 53,1% кликов по красным ссылкам по сравнению с синими.

И это не просто клики — исследование воздействия цветов на сознание показало, что цвета повышают узнаваемость бренда в среднем на 80%. Например, подумайте о Coca-Cola, и вы, вероятно, представите себе их ярко-красные банки.

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

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

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

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

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

• Красный: Coca-Cola или Nintendo – означает волнение или счастье
• Оранжевый : Nickelodeon или Fanta – означает дружеское и веселое времяпрепровождение
• Желтый: Nikon или McDonalds – Подразумевает оптимизм и счастье
• Зеленый: Whole Foods или Animal Planet – Подразумевает свежесть и природу
• Синий: Walmart или American Express — означает надежность и надежность
• Фиолетовый: Hallmark или Cadbury — означает известный бренд с историей качества
• Коричневый: Nespresso или UPS — означает надежный продукт, который может использоваться кем угодно
• Черный: Chanel или Adidas — подразумевает роскошь или элегантность
• Белый: Apple или Nike — подразумевает элегантные и удобные продукты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте постоянную насыщенность

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

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

Используйте один и тот же цвет, но меняйте насыщенность

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

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

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

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

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

Существует также Color Safe, еще один веб-сайт, который позволяет создавать и просматривать цвета по типу, позволяя вам найти идеальный красный или зеленый цвет.

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

Вот шаги, которые вы должны предпринять при выборе цветов для своего веб-сайта:

1. Выберите основной цвет: выберите цвет, который соответствует энергии вашего продукта или услуги.
2. Выберите дополнительные цвета: выберите один или два дополнительных цвета, которые дополняют ваш основной цвет, в идеале цвета, которые делают ваш основной цвет «ярким».
3. Выберите цвет фона: выберите цвет фона вашего веб-сайта — возможно, менее «агрессивный», чем ваш основной цвет.
4. Выберите цвет шрифта: выберите цвет текста, который будет на вашем веб-сайте — помните, что сплошной черный шрифт встречается редко и не рекомендуется.

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

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

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

В брендинге наиболее распространенными цветами являются три основных цвета: красный, зеленый и синий. Это распространяется и на цветовые схемы веб-сайта.

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

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

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

Here are the color palette generators we’ll cover:

1. Coolors 
2. Adobe Color CC
3. Color Hunt
4. Color Space
5. Paletton
6. Khroma 
7. Material Design Color Tool 
8. Final thoughts 

Let’s нырнуть в!

1. Охладители

Начав этот список с общеотраслевого фаворита, Coolors стал популярным благодаря своей простоте и растущей библиотеке цветовых палитр для iOS и Android. Благодаря интуитивно понятному интерфейсу перетаскивания Coolors является полезным ресурсом для начинающих. Вы можете отредактировать свои цвета, изменить их порядок и развернуть их, чтобы отобразить выбор альтернатив. Одним нажатием пробела генератор автоматически сгенерирует варианты для других цветов. После того, как вы создали палитру, которой вы довольны, вы можете либо скопировать шестнадцатеричные коды цветов, либо экспортировать палитру в формате URL/PNG.

2. Adobe Color CC

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

3. Color Hunt

Предлагая тысячи модных цветовых палитр, отобранных вручную, Color Hunt — это бесплатная платформа, цель которой — воспеть красоту цвета. На платформе дизайнеры могут сохранять свои любимые палитры, управлять своей личной коллекцией и иметь быстрый доступ для копирования цветовых кодов. У Color Hunt есть даже расширение для Chrome. Что не любить?

4. Цветовое пространство

Уже придумали базовый цвет, но не знаете, как построить вокруг него цветовую палитру? Перейдите в Цветовое пространство. После того, как вы ввели выбранный оттенок, используя его значения RGB или шестнадцатеричный код, нажмите «Создать», и веб-сайт мгновенно создаст более чем большое количество цветовых комбинаций, соответствующих выбранному вами цвету. Это действительно настолько просто!

5. Paletton

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

6. Хрома

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

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