7 Генераторов палитры для цветовых схем интерьера
от Aleksey | Советы Декор Интересно Мастерская Интерьер | Пятница, 20 декабря 2019
| Подпишитесь на Make-Self.net в Facebook и читайте наши статьи первыми. |
Когда дело доходит до дизайна интерьера, компьютеры предназначены не только для профессиональных декораторов. Есть много онлайн-инструментов, которые могут помочь декораторам-любителям выбрать оттенки, разработать цветовые схемы интерьера и даже оформить целые комнаты.
Читайте также: 5 важных этапов при окрашивании мебели
Онлайн-инструменты, помогающие выбрать цвета интерьера, можно сгруппировать в две категории: генераторы цветов и средства просмотра цветов или инструменты визуализации. Генераторы цвета наиболее полезны для определения цветов и цветовых палитр, включая ваши входные данные и предпочтения.
Некоторые онлайн-генераторы цвета позволяют выбирать примеры из цветового круга. Другие позволяют загружать фотографии или другие изображения для разработки собственных цветовых схем. Если вы ищете способ сделать создание идеальной комнаты немного проще, попробуйте один из этих замечательных цветовых генераторов.
Этот забавный инструмент был создан компанией Sherwin-Williams и позволит вам создать палитру для любой комнаты. Загрузите фотографию в качестве вдохновения, и инструмент создаст собственную цветовую палитру. Вы даже можете создать учетную запись и сохранить свои собственные палитры для будущего использования. Хотя идея состоит в том, чтобы найти идеальный цвет краски Sherwin-Williams, вам не нужно использовать краски лишь этого бренда, чтобы наслаждаться работой этого забавного приложения.
Читайте также: 18 хитростей, которые сделают процесс покраски намного проще
Этот удобный цветной инструмент создан на основе красок Glidden. Он работает с загруженной фотографией вашего собственного дома или примером, который уже находится на сайте. Визуализация цвета позволяет виртуально «раскрасить» комнату или создать палитру, подходящую именно для вашего дома. Вы можете легко добавить выбор цветов в список, который вы можете сохранить в автономном режиме и приобрести в местном магазине красок.
Читайте также: 15 советов от профессионалов о покраске межкомнатной двери
Чтобы разработать цветовую схему на этом сайте, просто раскрутите цветовое колесо. Этот сайт был разработан, чтобы помочь веб-дизайнерам, но это также отличный инструмент для декора интерьера. Он прекрасно справляется, если вы надеетесь создать монохромную палитру. Как только вы найдете цвета, которые вам нравятся, вставьте их в инструмент для подбора цветов, чтобы найти бренды, которые очень похожи на каждый оттенок.
Читайте также: лучшая краска для металла. Решено!
Colors.co — еще один автономный инструмент, предназначенный для графических дизайнеров или декораторов дома. Этот простой в использовании веб-сайт позволяет загрузить любое изображение, выбрать начальный цвет и найти еще четыре подходящих цвета, чтобы создать собственную палитру.
Есть функции, позволяющие регулировать насыщенность, просматривать цвета в режиме «дальтонизм» и многое другое. Как только вы закончите, сохраните свою палитру, пока не найдете идеальные оттенки.
Canva — это еще один инструмент, который позволяет вам загрузить свою любимую фотографию интерьера и создать из нее цветовую палитру. Как только вы выберете изображение, вы получите пять цветов, которые прекрасно сочетаются друг с другом. Поскольку Canva не связана с конкретной компанией, вы можете подобрать цвета к любой марке краски, которая вам нравится.
COLOURlovers предлагает инструменты для создания цветовых палитр и узоров, но это также огромное онлайн-сообщество для любителей дизайна по всему миру. Если вы изо всех сил пытаетесь найти идеальную палитру, и вы ищете других любителей цвета, это место для вас. Изучите существующие цветовые схемы или разработайте свою собственную в разделе «инструменты». Вы даже можете заказать свои собственные творения в их магазине.
Если вы даже не знаете, с чего начать, когда нужно найти идеальную цветовую палитру, Colormind может помочь. Этот инструмент поставляется с готовыми палитрами, чтобы помочь вашей творческой фантазии дать плоды. Как и многие другие инструменты, вы также можете начать с изображения и сопоставить цвета с оттенками на фотографии.
Превращение вашей цветовой схемы в реальность
Цветовые палитры и разработанные дизайнером схемы основаны на теории цвета и являются отличной отправной точкой для выбора цвета вашего интерьера, но настоящее испытание цветов происходит на ваших стенах. Лучший способ действительно найти идеальную палитру — это купить образцы краски, нанести их на стену и посмотреть, как они выглядят в течение дня и ночи, так как естественный свет заставит цвета приобретать различные оттенки.
Выбираете ли вы идеальную палитру для спальни или просто хотите найти несколько новых декоративных подушек или аксессуаров, которые соответствуют цветовой палитре вашей гостиной, генератор цветов — это отличный способ найти вдохновение и открыть для себя дополнительные цвета, о которых вы, возможно, даже не думали ранее.
Подписывайтесь на нас в Pinterest, где вы найдете еще больше идей для вдохновения.
СВЕЖИЕ СТАТЬИ
ПОПУЛЯРНЫЕ СТАТЬИ
15 сервисов для игры с цветом
Попытки найти идеальное цветовое решение уходят корнями далеко вглубь истории, к шедеврам великих художников. Теперь поисками идеального сочетания цветов, как филосовского камня, занимаются дизайнеры. Как сказал французский импрессионист Клод Моне: «Цвет – моя каждодневная одержимость, моя радость и моя мука».
Люди ассоциируют цвета с предметами, к примеру, красные яблоки и зеленая трава. Также, мы считаем цвет чем-то постоянным, даже тогда, когда знаем, что белое вино на самом деле желтое, даже скорее золотистое, и что синее море, совсем не синее, и его цвет может варьироваться от темно-серого до бирюзового.
Мы совершенно игнорируем тот факт, что интерпретация цвета является сложным процессом, который задействует в нашем восприятии не только глаза, но и настроение. При создании сайта, перед дизайнером появляется ряд вопросов, требующих ответа. И один из них – это сочетание цветов, идеально подходящее для будущего веб-проекта, как бы тривиально это не звучало. Гармония цветов – первое, что бросается в глаза посетителю, поэтому этот нюанс, лучше, хорошо продумать.
Представляем вашему вниманию пятнадцать отличных онлайн-сервисов, которые помогут вам подобрать подходящее сочетание цветов. Многие ресурсы позволяют загружать уже готовые палитры цветов, чтобы потом доработать. Сервисы позволяют искать и группировать цветовые схемы по определенным ключевым словам и оттенкам. Это очень помогает, когда у вас есть один цвет и нужно его использовать с рядом других, близких к нему цветов. Но самое главное, что все предложенные сервисы совершенно бесплатные.
1. Adobe Kuler – специальное веб-приложение для создания цветовых схем, которые могут вдохнуть жизнь в совершенно любой проект. Вы можете экспериментировать с цветами и просматривать тысячи тем из Kuler сообщества. Тут есть рейтинговая система самых лучших палитр, составленных другими пользователями. При желании, можно составить собственную палитру или загрузить изображение с приятной цветовой гаммой.
2. Сolourlovers – это серьезный ресурс, где люди не просто выбирают палитры цветов, но и говорят о цвете. Здесь можно найти и бесшовные текстуры, и готовые палитры. Также, на этом ресурсе есть форум, где ведется общение.
3. Главное преимущество Colorscheme в том, что весь процесс работы происходит в пределах одного экрана, то есть вам не нужно переходить на другие страницы. Первый шаг – выбор цветовой модели для будущего веб-проекта. Вы можете комбинировать холодные и теплые оттенки. Далее, изменяете яркость и контрастность, вы можете использовать готовые стили. Справа можно видеть результаты своей работы. Также, есть предварительный просмотр готового сайта, конечно же, примерный. Этот ресурс будет крайне полезен начинающим дизайнерам.
Очень порадовал список с названиями цветов.
4. С ColoRotate вы можете с легкостью создавать и управлять палитрами цветов в объемном 3d-пространстве для лучшего контроля цвета текста и фона. Цвета оживают, потому что в объеме наш ум воспринимает цвет иначе. Слайдеры и джойстики интуитивно понятны и просты в управлении. К тому же, вы можете синхронизировать палитры цветов между компьютерами и делиться заготовками с коллегами или клиентами.
5. ColorBlender – простой в использовании инструмент для создания цветовых палитр для веб-разработки. Основная функция этого ресурса – создание палитры из шесть цветов. Вы выбираете один, а программа подбирает остальные пять соответствующих цветов. Это позволяет легко и быстро создавать палитры.
6. Colormunki – это многофункциональный ресурс для работы с цветовыми палитрами и управления цветом в сфере графического, промышленного и интерьерного дизайна.
7. ColorExplorer является бесплатным инструментом для проектирования и работы с цветовой палитрой. Набор инструментов сайта не ограничивается подбором цветов, вы можете просматривать популярные библиотеки цветов, соединять библиотеки, экспортировать палитру в популярные программы, такие как AdobePhotoshop, Illustrator и многие другие. Также, можно импортировать цвета из изображений. Этот сайт был разработан специально для профессиональных дизайнеров. Тут нет регистрации, подобранную палитру можно просто сохранить. Однако, если вы хотите защитить свою палитру от посторонних глаз, можно создать и свой собственный профиль.
8. Главная идея Сolr: игра с цветом и цветовыми схемами. Этот сайт является одновременно игрушкой и серьезным генератором идей.
9. С ColorCombos вы попадете в мир цветов, в котором вы обязательно найдете свою идеальную цветовую палитру. Этот сайт был создан, чтобы помочь веб-разработчикам и дизайнерам быстро выбирать и тестировать различные комбинации цветов. Библиотека ресурса содержит сотни и тысячи образцов цвета. С помощью данного ресурса можно создать красивый сайт с отличным сочетанием цветов.
10. На Ficml можно подбирать цветовые оттенки и благодаря номеру, который высвечивается, можно использовать эти цвета в AdobePhotoshop или других программах. Всего несколько кликов мыши производят цветовое волшебство.
11. На Сolrd можно создавать схемы цветов, шаблоны, загружать изображение, чтобы узнать его цветовую гамму и многое другое.
12. ColorHunter – это ресурс, на котором можно найти и создать цветовые палитры, сделанные из изображений. Чтобы найти цветовые палитры на сайте, нужно ввести поисковый запрос в поле в верхней части страницы. Поиск можно осуществить по тегам, шестнадцатеричному коду цвета или ссылке на изображение. Изображение, также, можно загрузить из ПК.
13. Mudcu позволяет имитировать девять видов цветовой слепоты.
14. Etsy – это самый забавный и необычный способ подобрать цвет.
15. На Archizona оптимальное сочетание цветов можно подобрать, перемещая ползунок внизу. Это аналог цветового круга. Это один из немногих русскоязычных сервисов по подбору цветов.
Надеемся, данные инструменты помогут вам найти идеальную цветовую палитру для вашего будущего веб-проекта.
Источник: templates.motocms.ru
Цвета HTML Color схемы
Цвета HTML Color схемы HTML5CSS.ruЦветовые схемы представляют собой логические сочетания цветов на цветном колесе.
Цель цветовой гаммы – создать эстетическое чувство стиля и привлекательности.
Ахроматические цветовые схемы
Черный текст на белом фоне.
Белый текст на черном фоне.
Черно-белая ахроматические цветовая схема является цветовой схемой по умолчанию для веб-страницы.
Белизна на черноте ахроматические цветовая схема часто предпочитаема для более малых приспособлений.
Белизна на черноте требует меньше энергии (улучшает жизнь батареи) на большинств технологиях дисплея.
Монохромные цветовые схемы
Монохромные цветовые схемы легко создавать, потому что они используют только один цвет.
Монохромные схемы используют разные тона от одного и того же угла на цветном колесе (тот же оттенок).
Экспериментируйте и изучайте больше, используя наш генератор монохромной цветовой схемы.
Аналогичные цветовые схемы
Аналогичные цветовые схемы также легко создавать.
Аналогичные цветовые схемы создаются с помощью цветов, которые находятся рядом друг с другом на цветовом колесе.
Экспериментируйте и изучайте больше, используя аналогичный генератор цветовой схемы.
Дополнительные цветовые схемы
Дополнительные схемы создаются путем комбинирования цветов с противоположных сторон цветового колеса.
Экспериментируйте и изучайте больше, используя наш генератор цветовых схем.
Триада
Триадные схемы составлены из оттенков, одинаково разместных вокруг цветового колеса.
Экспериментируйте и изучайте больше, используя наш генератор триадной цветовой схемы.
Соединение (ака Сплит комплементарной) цветовая схема
Составные схемы почти такие же, как и взаимодополняющие схемы.
Вместо того, чтобы использовать цвета, которые являются противоположными, он использует цвета с обеих сторон противоположного оттенка.
Поэкспериментируйте и Узнайте больше, используя комбинированный генератор цветовой схемы.
PHP\CSS\JS\HMTL Editor
5 лучших сервисов для подбора цветовой схемы
Цвет является мощным инструментом, который может умело рассказать целую историю. От него зависит первое впечатление, которое получит пользователь от продукта, а это в свою очередь повлияет на его выбор: пользоваться им или нет. Именно поэтому1. Color Hunt
https://colorhunt.coColor Hunt — это бесплатная открытая платформа для поиска вдохновения. Преимущества этого сайта в огромном количестве модно подобранных цветовых решений. Color Hunt позволяет найти трендовые комбинации, собравшие наибольшее количество лайков, а также сохранять и скачивать понравившиеся подборки.
2. Color Leap
https://colorleap.appПоиск классных цветовых решений из картин различных исторических эпох — Color Leap. Этот интерактивный сайт насыщен анимационными компонентами и предлагает цветовые палитры картин выбранного периода с возможностью копирования кода при нажатии на цвет.
3. Khroma
http://khroma.coKhroma — крутая интерактивная платформа, где можно найти не только красивые цветовые схемы, но и разработать собственный алгоритм на базе нейронной сети. Способен генерировать те цвета, которые вам больше нравятся и блокировать непонравившиеся прямо в браузере. Алгоритм постоянно обучается на бесконечных цветовых комбинациях, поэтому вы точно сможете найти что-то особенное! Поиск Khroma позволяет фильтровать генератор по оттенку, значению, цвету, а также по значениям цветовоймодели.
Culrs — это более 2000 цветов с уже готовыми шестнадцатеричными кодами, которые легко скопировать для дальнейшего использования. Платформа создает красивые комбинации, учитывая цветовой круг и теорию цвета. Имеет 4 удобные категории для поиска лучшей сочетаемости цветов:
Нажав на имя конкретной палитры в Culrs, URL-адрес меняется на пользовательский и вы можете поделиться ею с кем угодно!
Coolors — cупер-быстрый генератор цветовых схем. Получив готовую схему цветов, появляется интерактивная площадка, включающая меню редактирования для каждого цвета: можно поменять расположение цветов местами, изменить шестнадцатеричный код на желаемый или выбрать его оттенок нажатием иконки «альтернативные оттенки», а также скорректировать яркость и насыщенность в нужной цветовой модели.
Научиться понимать цветовую теорию и грамотно выбирать палитру для продукта – не просто. С помощью этих сервисов, которые предоставляют широкий спектр выбора цветовых сочетаний, вы значительно сократите временные затраты на сопоставление нужных оттенков цветов. Но не забывайте, что профессиональный дизайнер обязательно должен владеть пониманием значений каждого цвета и цветового круга в целом, правильно комбинировать цвета, уметь акцентировать детали для улучшения юзабилити продукта и конечно же, владеть пониманием психологии бренда. На курсе «Мир веб-дизайна» в нашей онлайн-школе «Айтилогия» вас обучат работе с цветом. Вы обретете большой багаж полезных навыков и сможете влюблять клиентов в ваш дизайн с первого взгляда!
Если статья была для Вас полезной — можете отблагодарить нас своим лайком, это важно для нашей команды! Мы хотим понимать, что действительно интересно для Вас, и работать над контентом. Благодарим!
10 бесплатных инструментов, чтобы подобрать цветовую гамму для стартапа
Если у вас нет лишних 20 тысяч долларов, с которыми можно обратиться к Студии Лебедева, если вы занимаетесь оформлением своего стартапа и относитесь к вопросам дизайна всерьез, вам наверняка понадобятся инструменты для подбора цветовых схем. Хорошо, что в сети достаточно инструментов, которые помогут вам бесплатно в вашем нелегком труде.1. Color Explorer
Color Explorer – один из самых полезных инструментов для подбора цветовых схем и сочетаний. Позволяет на основе одного базового цвета подобрать релевантную цветовую гамму и разные оттенки, а также проанализировать потенциальную конверсию для разных типов цветовой схемы. Еще позволяет составлять цветовые схемы на основе выбранных изображений, импортировать css/html код из файлов и работать с RGB и hex-кодировкой цветов.
2. Adobe Kuler
Adobe Kuler – тоже классная штука. Позволяет при помощи палитры-колеса составлять цветовые гаммы и создавать готовые цветовые схемы, которые потом можно использовать на сайте или в приложении.
3. Slayeroffice Color Palette Generator
Следующий в нашем списке — slayeroffice. Очень простой и удобный генератор палитр. Предлагает вам также оттенки, когда вы подбираете основной цвет.
4. ColorBlender
ColorBlender – инструмент, который хорош для последующего использования полученных палитр в Photoshop или Illustrator. Есть готовая библиотека наборов, которые можно брать и использовать в вашем приложении.
5. 0 to 255
0 to 255 – еще один «подборщик» фильтров, при помощи которого можно взять и получить темные / светлые оттенки цветов. Для тех, кто увлекается градиентами и тенями – самое то.
6. Colorspire
Если все предыдущие инструменты вам почему-то не подошли – попробуйте Сolorspire. В нем еще есть настройка сатурации и всякие быстрые настройки выбранного цвета.
7. Color Schemer
Этот инструмент предлагает палитру из 16 цветов (в большинстве предыдущих вариантов базовых цветов 5). Еще его можно использовать без подключения к интернету на Mac или PC.
8. Color hunter
При помощи Сolor hunter можно выбирать готовые комбинации, основываясь на тегах, коде hex-цветов или по адресу URL изображений. Палитру цветов можно получить на основе загруженного изображения.
9. ColorCombos
ColorCombos – снова схемы цветов, полная библиотека готовых образцов, можно сделать и собственную. Есть инструментарий для получения цветов с готового сайта.
10. WebAIM
И завершает подборку инструмент, который палитры не генерирует, но позволяет выбирать контрастные цвета. Для тех, кто знает толк не только в оттенках, но и в контрастах. Особенно если у вас контент-проект, и текст с заголовками должен хорошо читаться.
Методы построения гибкой цветовой палитры для вашей дизайн-системы
Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:
color palette — «цветовая палитра»; color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».
Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.
Mineral UI это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:
У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА.
Mineral предназначена для последовательного моделирования, и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.
Впоследствии Mineral будет поддерживать тёмный (ночной) режим, и мы хотим, чтобы цвета из созданных схем цветовых переходов выглядели визуально привлекательными как в темном, так и в светлом режиме.
Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.
Пытаясь решить эту проблему самостоятельно, мы нашли методологию создания понятной и гибкой цветовой палитры.
Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.
mineral-ui.com
Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.
Ретроспективный обзор
Одна из самых первых вещей, о которых мы подумали, создавая дизайн-систему, — это создание цветовой палитры (color palette), ведь она имеет столь важное значение в принятии решений в области дизайна и разработки. Мы постоянно учимся — и часто видим очевидные ошибки уже оглядываясь назад. Наше желание развиваться подтолкнуло нас исследовать то, как другие команды принимают решения — и только потом принимать свои собственные.
Контроль за изменениями это непростая работа, потому что цвет — очень масштабное понятие. Мы уже знаем, что даже внесение безобидных на вид изменений в цвета может создать проблемы командам, которые уже начали делать продукты на основе Mineral. Поэтому недавняя цветовая ревизия показывает нашу цель — отказаться от критических изменений.
Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.
Анализируя цветовые схемы во время ревизии, мы определили, что наша цветовая палитра должна содержать следующие характеристики:
Темы: они обеспечивают последовательные ощущения и внешний вид во всех продуктах, избавляя от необходимости работать наугад.
Тематическая гармония: в каждой цветовой теме должно быть одно значение тона.
Четкие контрольные точки цвета (hue breakpoints): у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.
Маштабирование и дополняемость: цветовая палитра должна иметь систематический паттерн, которую можно расширять по мере роста потребностей дизайн-системы.
Никаких фундаментальных перемен: развиваясь, мы хотели, чтобы наша цветовая система работала в любой ситуации, поэтому мы отказались от каких-либо критических изменений в дизайнах, которые на данный момент используются в Mineral.
Доступность: наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.
Исследование
Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов — исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.
В процессе исследования мы фокусировались на следующем:
Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?
Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?
Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?
RGB, HSB, HSL, или HEX?Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения и настройки цвета. Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).
HSB — хороший инструмент для изучения цвета, но чтобы избежать проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для проектирования, дисплеями и т. д.), окончательное определение цвета наиболее точно записывается как значения в RGB или HEX. Еще одно важное замечание: HSL и HSB — это две разные модели, имеющие разные принципы, и их не следует путать. Примеры в этой статье приведены в HSB.
В качестве примера я взял схему цветовых переходов из каждой дизайн-системы и сопоставил каждый образец со шкалами насыщенности и яркости. Также я отслеживал тональные сдвиги в рамках схемы переходов.
IBM Design
Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.
https://www.ibm.com/design/language/resources/color-library
Material Design
Значения в Material Design быстро изменяют свое направление на графике, когда значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.
https://material.io/guidelines/style/color.html#color-color-palette
Open Color
Палитры Open Color построены на отточенных кривых. Посмотрите на расположение цвета на сетке HSB: кажется, что эту кривую намеренно строили такой аккуратной. Корректный выбор цветов отражает современные тренды веб-дизайна. Коэффициент контрастности несколько ниже, поэтому эти палитры не совсем помогут нам сделать продукты компании доступными по умолчанию.
https://yeun.github.io/open-color/
Анализ
С IBM можно использовать цвет и не волноваться о доступности, потому что каждую схему цветовых переходов можно последовательно применить к разнообразным продуктам. Они провели хорошую работу над последовательным различением пропорций цветового контраста для каждого значения (подробнее об этом позже).
В Open Color прослеживается наиболее определяемый паттерн, палитра была разработана так, чтобы её масштаб легко менялся при добавлении других цветов.
Интересно, что в большинстве цветовых палитр тональный сдвиг используется для определения значений цвета на схеме цветовых переходов — особенно у IBM.
Дизайн цветовой палитры
Система тем в Mineral содержит серую схему (она используется во многих темах) и ещё несколько тематических схем. Когда мы говорим о «цветовой палитре», мы имеем в виду тематические схемы.
Первое, что я сделал — создал набор правил, основанных на требованиях проекта. Эти правила можно расширять, поэтому есть четкое руководство по увеличению цветовых палитр с большим количеством опций в будущем.
Как определить смену в теме за три простых шага
- Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
- Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
- Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.
Метод для создания первой версии палитры
Перед тем, как мы подробнее поговорим о недавних цветовых ревизиях, будет полезно понять, как мы пришли к первой версии палитры, ведь она стала исходной точкой для нашей работы.
Мы начали с выбора базового цвета. Это решение может быть весьма произвольным, хотя мы целенаправленно искали цвета высокой насыщенности с коэффициентом контрастности 4,5:1 или выше. Здесь мы еще думали, что у нас не будет темной темы, и что цвет текста будет меняться через код с черного на белый и обратно в зависимости от контрастности.
В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.
После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.
Примечание: сравните цвета первой версии с цветами второй.
Первое заметное отличие — это отсутствие некоторых цветов. Так и есть: лимонный, желтый и оранжевый исчезли, и появился бронзовый цвет. Вот почему:
Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).
С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.
Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».
Возвращаясь к методу первой версии:
Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).
Наконец, мы перечисляем значения каждого цвета. Разрывы между средними значениями намного шире, чем между остальными, поскольку яркость должна распределяться вдоль кривой более равномерно.
Вот несколько примеров из палитры первой версии:
И вот перед вами финальная палитра первой версии, в которой все цвета были созданы по одному правилу.
Цветовая палитра первой версии первоначально удовлетворяла большинство наших требований — по крайней мере так мы думали. Когда мы начали использовать цветовую палитру в реальных проектных работах, возникло несколько проблем:
- Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
- Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.
На изображении выше, помимо базовых цветов, значения большинства цветов не совпадают со значениями оттенков серого между темами. Поэтому сложно сменять темы, сохраняя точность и единообразную контрастность.
Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.
После того, как мы обнаружили эти трудности, у нас появилось основание для новой гипотезы: можем ли мы создать систему, которая поддерживает равномерные контрастные переходы между соседствующими (от тема-10 до темы-20 и т. д.) цветами на каждой схеме переходов?
Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:
У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)
Интересненько…
Чтобы изучить значения серого, я воспользовался приложением Sketch, в котором можно манипулировать цветами, и Фотошопом с его проверенными значениями преобразования в HSB.
После проведения этого обзора мы в обсудили команде ценность последовательности:
Каковы преимущества наличия последовательных значений серого?
Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?
На первый вопрос трудно ответить, пока не попробуешь реальные UI сценарии. На второй вопрос ответить немного легче.
Вторая версия: Обновление цветовой палитры
Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.
Для второй версии палитры мы дополнили предыдущую версию несколькими дополнительными шагами и новой цветовой кривой, благодаря которой тёмная тема стала возможной:
1. Создать серый паттерн
Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.
После тестирования некоторых ключевых цветов нашей системы мы поняли, что этот подход хорош для начала, но все же не идеален.
Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:
Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.
2. Создание цветового паттерна
У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.
Подход, который мы использовали, похож на первую версию палитры , с одной большой разницей: мы использовали овальную кривую для уменьшения насыщенности более темных значений, чтобы они выглядели естественно в тёмном интерфейсе.
При создании каждой кривой мы тестировали некоторые существующие компоненты интерфейса как для светлой, так и для темной тематической среды. Это помогло нам быстро определить, помогали кривые создавать последовательный внешний вид в разных тематических схемах переходов или нет.
В большинстве цветовых тем используются круговые схемы, но для красного, мадженты и бронзового используются овальные, потому что из-за значения яркости цветности, круговые узоры закрепляют насыщенность на 100%, что выглядит ужасно в тёмном интерфейсе.
Мой монитор довольно-таки большой и широкий 😉
Чтобы создать такой «идеальный паттерн», необходима непрерывная проверка согласованности в градациях серого в процессе создания. Мы решили скопировать и вставить значение каждого цвета в Photoshop, чтобы убедиться, что они точно соответствуют значениям оттенков серого, установленным ранее.
Мы упростили себе работу, записав каждое значение цвета в одном месте — так делать особенно удобно, когда есть вероятность, что другим людям нужно будет ссылаться на вашу работу. На этом этапе мы также решили, что было бы неплохо записать точное значение RGB или HEX для разработки. Мы решили использовать HEX.
Повторите этот процесс для каждого цвета темы — и получите удобную и гибкую систему тем, как показано ниже.
Конвертируем в оттенки серого
Теперь все темы состоят из цветовых плашек, организованных по единому серому паттерну. (У нашей серая тема значения намеренно отличаются от значений цвета в других темах, поэтому она не участвует в общем паттерне)
Заключение
Это только начало работы со сложностями цвета, доступностью и последовательностью в интерфейсе Mineral. Сейчас мы потратили время на создание масштабируемой системы цветов — и считаем, что в будущем будет проще решать неизвестные проблемы по мере их поступления. Оглядываясь назад, можно сказать, что абсолютно точно стоило тратить на это время именно на ранней стадии процесса.
Процесс, описанный в этой статье от начала до конца, занял около шести месяцев. За это время команды начали использовать Mineral и оспаривали некоторые из наших ранних додумок относительно урегулирования доступности и темных тем. Мы открываем для себя то, что дизайн-системы формируются как под действием культуры, так и под действием самих продуктов.
В этой статье мы ничего не сказали о валидации (подтверждении работоспособности) дизайна. Но мы провели много времени за обсуждением применимости тем и за их тестированием на мокапах реально существующих продуктов.
Особая благодарность:
Быстрые и простые решения для цвета
Если перед вами не стоит большая проблема, связанная с подбором цвета, можно попробовать использовать один из множества генераторов цветовых палитр. Вот несколько полезных ссылок:
К сожалению, похоже, что еще не существует удовлетворительного генератора цветовых палитр, способного точно настраивать и создавать тематические схемы цветовых переходов. Если вы знаете какие-либо хорошие инструменты, пожалуйста, поделитесь с нами.
Больше статей о цвете:
9 Инструментов для подбора material цветовых схем
Одна из самых больших вещей, заметная невооруженным глазом, в material design — это использование ярких и смелых цветов.
Если вы решили выбрать палитру для своего проекта в стиле материального дизайна от гугл, то вам помогут эти инструменты.
1. Material Palette
В данном инструменте вы выбираете основной цвет для вашей палитры, после этого выбераете цвет акцента. После этого инструмент сам предложит вам цветовую палитру на основе двух ваших цветов, а так же предложит различные способы для загрузки палитры
Перейти к инструменту
2. Material UI’s Material Design Colors
Это довольно-таки простая шпаргалка, которая представляет на своей странице все цвета материального дизайна.
Перейти к инструменту
3. Random Material Generator
Если вы хотите жоверить подбор цветовой схемы для вашего проекта случайным числам, то этот инструмент для вас.
Перейти к инструменту
4. Material Design Palette Generator
Если вы заинтересованы в создании собственной палитры материального дизайна — попробуйте этот интсрумент. В первую очередь вы должны выбрать свой цвет, отличный от официальных цветов палитры material design, а инструмент, в свою очередь, предложит вам палитру на основе выбранного цвета.
Перейти к инструменту
5. Material Mixer
Данный инструмент покажет вам все цвета доступные в палитре материального дизайна в виде удобно скомпонованной сетки. Для создания палитры нужно выбрать основной и акцентирующий цвет.
Перейти к инструменту
6. Material Colors
Этот инструмент отображает только 500 и А200 цвета materila design.
Перейти к инструменту
7. MaterialUp’s Material Design Colors
Это довольно-таки простой инструмент — служит для визуализации цветов . При кике на колонку с цветом — оказывает все образцы цвета, которые связаны с выбранным.
Перейти к инструменту
8. Tint UI’s Material Design
Данный инструмент показывает только 500 цвета
Перейти к инструменту
9. designskilz’s Material Design Colors
Этот простой инструмент поможет вам визуализировать все конструкции материальных цветов вместе с их официальными названия (например Pink, Light Blue, Cyan и др.)
Перейти к инструменту
Если веб-инструменты не для вас, то можете попробовать цветовую палитру для Photoshop/Illustrator (.aco) Скачать палитру
Отличным дополнением к использованию цветов в стиле material design, будут отличные иконки, исполненные в таком же стиле, недавно мы показывали пример иконок
Нужна помощь в выборе оттенков? Попробуйте онлайн-генератор цветовой палитры
Фото: коллаж из зеленой цветовой палитры от Africa Studio / Shutterstock
Выбор цветовой палитры может быть непростой задачей. Независимо от того, выбираете ли вы два или десять оттенков для своей следующей картины, цифрового дизайна или схемы декора, может быть сложно как сузить круг выбора, так и выбрать цвета, которые, по вашему мнению, подходят для вашего проекта. Но, как и во многих вещах в творческой сфере, чем больше вы практикуетесь и чем больше учитесь, тем более интуитивным становится выбор цвета.
Прежде чем вы начнете смешивать цвета или создавать палитру, лучше всего знать основы теории цвета, особенно как пользоваться цветовым кругом. Это поможет вам понять отношения между оттенками, а также предлагает способ создания цветовых схем, которые варьируются от базовых комбинаций до тонких оттенков.
Хотя лучше всего знать свой цветовой круг, есть еще один вариант создания палитр. Всего одним щелчком мыши онлайн-генератор цветовой палитры поможет подобрать оттенки, которые хорошо смотрятся вместе.Если вы цифровой дизайнер, эти типы веб-сайтов особенно полезны; они часто предоставляют шестнадцатеричные номера цветов оттенка, чтобы вы могли вставить их в свой CSS или в такие программы, как Photoshop. Однако даже если вы работаете в аналоговом режиме, вы все равно получите отличное вдохновение для смешивания цветов.
Нужна помощь в создании цветовых палитр? Вот пять лучших бесплатных генераторов цветовой палитры, которые можно попробовать.
Фото: Цветовая палитра Peppercorn от Джейн Рикс / Shutterstock
Coolors : этот сайт (и сопутствующее приложение), называющий себя «сверхбыстрым генератором цвета», Coolors создаст для вас палитры и позволит вам регулировать характеристики, включая насыщенность, температуру и яркость.Кроме того, он может отображать различные типы дальтонизма, чтобы вы могли видеть, как будут выглядеть оттенки в глазах других людей. Найдя понравившуюся палитру, вы можете сохранить ее на будущее и поделиться ею с другими.
Canva : Canva — отличный ресурс для создания инфографики и других изображений для социальных сетей. Чтобы помочь вам в этих творческих начинаниях, у них есть генератор цветовой палитры, который покажет определяющие цвета изображения. Поэтому, если вы создаете текст для наложения на это изображение, это идеальный способ убедиться, что все элементы отлично смотрятся вместе.
Охладители
ColorSpace : ColorSpace берет на себя все догадки при выборе цвета; все, что вам нужно, это просто один оттенок и нажать кнопку «Создать» — внезапно он представит вам несколько схем. Они варьируются от «Обычного градиента» до комбинаций, которые вы не ожидаете, например, «Сдержанная палитра».
Colormind : Вы зацикливаетесь на выборе хотя бы одного цвета? Colormind имеет предварительно выбранные палитры, которые готовы к использованию. Все, что вам нужно, это выбрать тот, который нравится вам и вашему проекту.
Палетон
Paletton : Paletton предлагает другой формат, чем другие генераторы цветовой палитры, но это отличная новость для людей с склонностью к зрению. Вы просто начинаете с цветового круга и выбираете базовый оттенок, который хотите использовать. Затем Paletton вводит его в большой квадрат с более мелкими оттенками над ним. Вы сможете увидеть, как разные оттенки и тона выглядят с вашим основным оттенком — все одновременно. Кроме того, сайт позволяет переключать цветовые схемы с монохроматического на триаду, на «свободный стиль» и многое другое.
Статьи по теме:
Любитель дизайна представляет яркие цветовые палитры любимых телешоу, фильмов и музыкальных клипов
Хотите узнать о смешивании цветов? Вот основы, которые вам нужно знать
Рукописный справочник цветов XIX века, поэтически описывающий, где в природе встречаются оттенки
Data Viz Color Palette Generator (для диаграмм и информационных панелей)
Как использовать
Используйте средство выбора палитры, чтобы создать серию цветов , визуально равноудаленных .Это полезно для многих визуализаций данных, таких как круговые диаграммы, сгруппированные гистограммы и карты.
Примечание: кроме режима палитры есть еще два режима — обратите внимание на шкалы с одним оттенком и с расходящимися шкалами.
Создание визуально равноудаленных палитр вручную практически невозможно, но чрезвычайно важен для визуализации данных. Почему? Когда цвета визуально не равноудалены, труднее (а) отличить их друг от друга на диаграмме и (б) сравнить диаграмму с ключом.Я уверен, что все мы видели диаграммы, где вряд ли можно использовать ключ, поскольку цвета данных очень похожи.
Например, Google Analytics выполняет ужасную работу со следующим:
Просто попробуйте использовать этот ключ. Попробуй.Лучше использовать диапазон оттенков , чтобы пользователям было проще делать перекрестные ссылки с ключом. Нашему мозгу гораздо проще отличить, скажем, желтый от оранжевого , чем синий от синего, но на 15% светлее .
Ах! Намного лучше.Эта палитра цветов позволяет указать обе конечные точки палитры. Вы можете выбрать хотя бы один цвет бренда, что дает вам значительную гибкость при создании палитры, которая будет работать для ваших визуализаций, но при этом настраиваться для вашего бренда.
Вот несколько советов, как получить лучшую палитру:
- Попробуйте выбрать очень разных цветов конечных точек — e.грамм. один теплый, один прохладный; один яркий, другой темный — так что ваша палитра охватывает более широкий диапазон
- Если вы используете фирменный цвет для одной конечной точки, не бойтесь немного изменить насыщенность и яркость , если это создаст более приятную палитру. Пользователи узнают цвет вашего бренда по оттенку , намного больше, чем , чем по его точной насыщенности / яркости.
- Для визуализации данных, где вы показываете силу одного значения , попробуйте вместо этого использовать Генератор палитры одного оттенка.
Ох, и …
Подробнее о цвете
Если вы новичок в использовании цвета в дизайне пользовательского интерфейса, я настоятельно рекомендую следующие ресурсы:
Так или иначе, я создал это как инструмент, который мне хотелось бы иметь для создания палитр визуализации данных. Есть ли в нем еще одна особенность? Дай мне знать.
28 лучших инструментов для выбора цветовой схемы
Интернет полон инструментов для создания цветовых схем, которые обещают помочь вам достичь цветовой нирваны.Однако не все инструменты созданы одинаково, и многие из них являются не более чем простой копией более популярных или полезных предложений.
Итак, чтобы упростить задачу, мы собрали некоторые из лучших инструментов для выбора цветовых схем, доступных сегодня. Они избавят вас от необходимости отделять пшеницу от плевел и войти в цветное небо …
Adobe переименовала Kuler в Color. Возможно, вы знаете его по предыдущему названию, Adobe Kuler. Но Adobe недавно переименовала это популярное приложение, которое с годами превратилось из простого веб-инструмента для работы с цветом в полноценный ресурс для создания и обмена темами, в Adobe Color CC.
Однако его сущность не изменилась: Color CC позволяет вам опробовать, создавать и сохранять различные цветовые схемы, каждая из которых состоит из набора из пяти цветов. Он доступен в вариантах с размещением в браузере и в настольных версиях. Если вы используете настольную версию, вы можете экспортировать цветовую схему прямо в Photoshop, Illustrator и InDesign.
Если вы не уверены в своей цветовой схеме, у Mudcube есть несколько тем на выбор.Mudcube Color Sphere — это удобный небольшой ресурс для дизайнеров, который не только предоставляет шестнадцатеричные числа для каждого цвета; это также поможет вам создать цветовую схему из одного выбранного оттенка.Если вы не уверены, какую цветовую схему выбрать, Mudcube предлагает выбор тем из раскрывающегося меню.
Убедитесь, что вы используете правильные цветовые комбинации в своем веб-дизайне с помощью этого удобного инструментаЭтот инструмент веб-дизайнера «Проверить мои цвета» предназначен для проверки сочетаний цветов переднего плана и фона всех элементов DOM, чтобы определить, обеспечивают ли они достаточный контраст при просмотре человеком с дефицитом цвета. Все тесты основаны на алгоритмах, предложенных Консорциумом World Wide Web (W3C).Его создал веб-дизайнер Джованни Скала.
Образцы цветов и определение их значений RGB, Hex и HSLA с помощью этого приложения для iOS.Инструмент для iOS. Приложение «Цвет» предназначено для того, чтобы упростить поиск цветов, с большой цветовой сеткой, чтобы вы могли использовать весь экран. Он также позволяет вам брать образцы цветов, узнавать значения RGB, Hex и HSLA и создавать палитры цветов, чтобы увидеть, как они работают вместе.
Color Hunter предоставляет цветовую палитру с использованием выбранного вами изображения.Хотя Color Hunter на первый взгляд может показаться не таким уж большим, на самом деле это действительно полезный инструмент цвета, если вы не можете найти конкретный цвет.Найдите изображение, которое вам нравится, и введите его в Color Hunter; затем инструмент создаст цветовую палитру из выбранного вами изображения. Это отличный способ создать собственную цветовую тему.
Если вы ищете точный цвет, вы можете ввести шестнадцатеричное число в URL-адрес.Этот веб-сайт использует базу данных из 10 миллионов изображений Creative Commons, собранных с Flickr, чтобы вы могли исследовать цветовые комбинации. Это, вероятно, самый быстрый способ получить бесплатные изображения в идеальной цветовой комбинации, а также это просто увлекательный и интуитивно понятный инструмент, которым приятно пользоваться.
Color позволяет вам найти идеальный цвет, перемещая указатель мыши, а затем дает вам важнейший шестнадцатеричный код цвета.Color от HailPixel — удобное маленькое веб-приложение, если вы немного перфекционист, когда дело доходит до получения цвет в самый раз. Наведите указатель мыши в любом месте экрана, чтобы выбрать выбранный цвет, прокрутите, чтобы установить насыщенность, и сайт предоставит вам этот важнейший шестнадцатеричный код для ваших проектов. Это один из самых простых инструментов, которые мы когда-либо использовали.
Spycolor — удобный бесплатный сервис для поиска информации о цветеSpyColor.com — это бесплатный сервис, который предоставляет информацию о любом цвете, включая преобразование во многие цветовые модели (RGB, CMYK и многие другие). На каждой цветной странице можно найти ряд схем, таких как дополнительные, дополнительные, триадные, тетрадические, пятицветные, конфликтующие, аналогичные и монохроматические цвета.
Designspiration создаст отображение всех изображений с выбранными вами цветовыми комбинациямиВ Designspiration вы можете выбрать до пяти оттенков из полезной полностраничной палитры, что дает вам возможность действительно увидеть, какие цвета вы смотрите .Затем сайт сгенерирует отображение всех изображений в своей базе данных с этой цветовой комбинацией. Шестнадцатеричные числа отображаются на видном месте, и вы можете нажимать на них по отдельности. Изображения можно сохранять в свои коллекции на сайте.
ColorExplorer — один из самых многофункциональных доступных инструментов.Это, возможно, один из самых глубоких инструментов, доступных в Интернете, предлагающий широкий спектр инструментов для разработки, настройки и анализа цветовых палитр. Существуют, например, инструменты, которые могут помочь вам определить валидность WCAG вашего выбора цвета, инструменты преобразования, которые помогут вам перемещаться между различными системами, а также целый набор инструментов выбора и создания палитры.
Hex генерирует цвета, которые хорошо сочетаются с существующим цветовым эталоном.Удобный небольшой инструмент для создания цветов, который будет работать в сочетании с существующим цветовым эталоном, который у вас есть. Просто вставьте шестнадцатеричное значение цвета, и инструмент вернет набор приятных цветов, которые можно использовать с вашим основным цветом, и вы почувствуете себя осознанным выбором темы.
COLOURlovers немного похож на Pinterest для цвета.COLOURlovers — это сообщество, созданное для обмена и признания цветов, палитр и узоров.Это немного похоже на цветную доску Pinterest и служит готовым источником вдохновения в палитрах, которыми пользуются ее пользователи. Отличный инструмент, если вы ценитель цвета и любите делиться своей страстью.
Color Scheme Designer предлагает несколько интересных способов создания цветовых тем.Этот онлайн-инструмент обеспечивает вывод, аналогичный Adobe Kuler, но имеет несколько интересных способов создания цветовых тем, позволяя вам выбирать из схемы яркость / насыщенность и, скорее, контрастность. чем выбор отдельных цветов, составляющих схему.Доступен ряд стандартных методов математических схем, включая моно, триаду, тетраду и аналог.
COPASO — отличное универсальное решение для создания цветовой схемыОдин из инструментов на сайте COLOURlovers, COPASO стоит выделить отдельно как отличное универсальное решение для создания палитр. Он предлагает полный набор инструментов для выбора цвета в простом интерфейсе, включая возможность добавлять примечания к палитрам, загружать изображения, напрямую вводить ссылки CMYK и выбирать из ряда различных операций для построения вашей цветовой схемы.
Облегченный настольный инструмент Colourmod — удобный способ выбора и определения цветаColourmod — настольный инструмент, который позволяет вам выбрать один цвет из области виджетов, независимо от того, используете ли вы Mac с панелью управления или используя Konfabulator в Windows. Не является непосредственно инструментом цветовой палитры как таковым, но, тем не менее, он предлагает полезный способ выбора и идентификации цвета без необходимости запускать тяжелый инструмент.
ColorZilla доступна для Chrome и Firefox.Изначально это был плагин Firefox, но теперь он также доступен для браузера Google Chrome.ColorZilla — это расширение, которое включает в себя множество инструментов, связанных с цветом, включая палитру цветов, пипетку, генератор градиентов CSS и браузер палитр.
Colormunki позволяет создавать цветовые схемы из образцов Pantone.Полезный онлайн-инструмент от создателей инструмента калибровки цвета Colormunki, это онлайн-предложение позволяет создавать цветовые палитры из образцов Pantone, используя ряд различных методологий для создания приятных комбинаций.
Цвет.org позволяет вам видеть диапазон цветов в изображенииЭтот упрощенный инструмент предлагает уникальное понимание анализа цвета из изображения, который автоматизирован в других инструментах, позволяя вам видеть диапазон цветов, доступных в изображении, и выберите те, которые вам нравятся, чтобы сформировать основу темы. Стоит взглянуть, даже если он не так совершенен, как некоторые другие инструменты, доступные в Интернете.
ColourGrab — отличный маленький инструмент для создания цветовых схем из изображенийЭтот удобный маленький инструмент создает цветовую палитру из любого изображения в Интернете.Просто вставьте адрес изображения, которое вы хотите проанализировать, и сайт захватит изображение, выделит цвета в нем и сгенерирует удобную трехмерную круговую диаграмму, показывающую использование цвета по всему изображению. Не очень полезно для создания традиционных тем, но отлично подходит для изучения изображений и распределения цвета в них.
ColorBlender генерирует набор из пяти цветов, которые хорошо сочетаются друг с другом.Один из самых простых доступных инструментов, этот веб-сайт позволяет вам взять образец, настроить цвет и наблюдать в режиме реального времени, как он генерирует набор из пяти рабочих цветов. в сочетании.Палитры можно загрузить непосредственно в Photoshop или Illustrator в виде файла EPS.
GrayBit позволяет вам анализировать веб-сайт, чтобы увидеть, как он выглядит в оттенках серого.Этот удобный инструмент не поможет вам напрямую выбрать цветовую тему, но он поможет вам проанализировать ваш сайт (или чужой), чтобы увидеть, что ваш сайт выглядит как отрисовка в оттенках серого. Это полезно для проверки того, что вы достигли достаточного контраста в вашей цветовой палитре, чтобы соответствовать рекомендациям по доступности и нормативным требованиям.
COLRD — отличный способ поделиться и открыть для себя цветовые схемы.Этот красочный инструмент служит отличным источником вдохновения, предоставляя доступ к цветовым палитрам, созданным его пользователями, а также к узорам, градиентам и изображениям. Визуальное наслаждение для глаз, это не простой инструмент для генерации, но его стоит посетить, чтобы найти несколько счастливых открытий.
Вы можете фильтровать изображения по их цветовому балансу и яркости.Иногда лучший способ узнать, работает ли цветовая схема, — это выбрать стандартные изображения.Все основные библиотеки стоковых изображений предлагают такой инструмент, но Shutterstock Spectrum имеет особенно приятный интерфейс, потому что изображения отображаются в таком большом масштабе. После использования ползунка для определения вашего цветового поиска вы можете дополнительно указать ключевое слово, которое определяет предмет с впечатляющей точностью. Интригующая опция позволяет фильтровать изображения по их цветовому балансу и яркости.
Stripe Generator 2.0 может помочь создавать привлекающие внимание цветовые комбинации.Объявлен как «лучший инструмент для Интернета 2».0, дизайнеры «, вы можете подумать, что этот инструмент нашел свое применение (даже если это все иронично). Тем не менее, это полезный способ создавать приятные цветовые комбинации и в то же время создавать сногсшибательные узоры!
Цвета в Интернете основаны на Flash. Цвета в Интернете принимают один цвет в шестнадцатеричном формате или RGB и выводят набор схем на основе различных математических уравнений, подобных Kuler. Это не будет работать на iPad или iPhone, поскольку оно использует Flash для питания интригана.
Pictaculous позволяет загружать изображение и генерировать из него цветовую схему.Этот отличный инструмент от создателей MailChimp позволяет загружать изображение и генерировать цветовую схему из цветов внутри. Он интегрируется с некоторыми другими инструментами, представленными в нашем списке, обеспечивая одновременное получение результатов от Kuler и Colourlovers. Кроме того, для вашей темы можно загрузить удобный образец Adobe Swatch, который позволяет быстро и легко выбрать цвета, необходимые для дополнения фотографии.
Contrast-A позволяет имитировать эффекты различных нарушений зренияЭто несколько необычный инструмент для создания цветовых схем, поскольку он разработан для обеспечения создания совместимых с WCAG цветовых схем, позволяя предварительно просматривать уровни контрастности и моделировать дальтонизм, снижение зрения и клиническая слепота. Существует также бесценный набор ссылок на руководящие принципы (в гораздо более удобных для пользователя терминах, чем сам документ со спецификациями).
ColoRotate может похвастаться красивой визуализацией цветовых круговПредлагая функциональность, аналогичную Kuler, но с красивой трехмерной визуализацией цветовых кругов и возможностью генерировать более пяти цветов в одной схеме, ColoRotate также может быть интегрирован напрямую в некоторые приложения Creative Suite и предлагает хорошую альтернативу собственному предложению Adobe.Этот инструмент также доступен в виде приложения для iPad, предлагая хорошую интеграцию с Photoshop, где он может действовать как «цветная консоль».
слов : Сэм Хэмптон-Смит
Знаете ли вы об отличном инструменте цветовой схемы, который мы пропустили? Сообщите нам об этом в комментариях!
5 приложений цветовых схем, которые помогут вам создать идеальную палитру
При проектировании экранов (или разработке чего-либо на самом деле) есть правильные цвета, а есть неправильные цвета.Даже если «правильный» цвет для бренда может быть… скажем… красный , трудно заметить бесцветный дизайн под рукой и сказать: «Да, этот бренд и их веб-сайт должны использовать красный в качестве основного цвета».
Вот почему мы используем генераторы цветовых схем , чтобы ускорить процесс проектирования. Не для того, чтобы выбирать цвета для нас (это было бы слишком просто!), А для того, чтобы вдохновить нас (хотя многие дизайнеры и полагают, что, поскольку цветовая схема выглядит потрясающе, это правильные цвета для вашего дизайна). работа над).
Отличным приложением цветовой палитры является то, что позволяет нам настраивать схемы в соответствии с дизайном, над которым мы работаем, что выходит далеко за рамки визуально привлекательного списка модных цветов «плоского дизайна». Давайте посмотрим на 5 лучших.
1. Coolors
Ссылка: Coolors
Coolors — моя первая мысль для экспериментов с цветом, так как вы можете не только быстро переключаться между красивыми цветовыми схемами с помощью полоски space , но и настраивать их по своему вкусу, настройка оттенка, яркости, насыщенности и температуры, а также переключение альтернативных оттенков.Кроме того, с возможностью сохранять / экспортировать цвета, и используют ряд фильтров, которые помогут вам удовлетворить восемь различных типов дальтонизма , этот инструмент становится очень полезным, но при этом не слишком сложным в использовании.
Классная функция: есть версия для iOS, расширение Chrome и даже надстройка для Photoshop и Illustrator.
Palettr
Ссылка: Palettr
Palettr — очень интересное приложение с цветовой схемой.Допустим, у вас есть смутное представление о том, какие цвета вы хотите использовать, но вам нужно немного вдохновения. Что заставляют вас думать ваши цвета? Пляж… такой… желто-синий? Городская улица… серые и черные? Теперь это не будет работать во всех случаях, но если на ум приходит конкретное ключевое слово, найдите его в Palettr, и они найдут изображения с 500px.com , используя это ключевое слово, и извлекут из него общие цвета. !
3. Генератор цветовых палитр от Canva
Ссылка: Color Palette Generator от Canva
Color Palette Generator — это небольшое веб-приложение, созданное талантливой командой Canva, которое извлекает общие цвета из изображений, которые вы загрузили , поэтому, если у вас есть дизайн, в котором изображения / фотография уже определены, и вы строите цветовые схемы на основе этого ( или , вам просто нравятся цвета на изображении), Генератор цветовой палитры от Canva будет очень идеальным решением. .
4. Adobe Color Wheel
Ссылка: Adobe Color Wheel
Adobe Color Wheel, хотя и не самый привлекательный интерфейс, предлагает более профессиональный набор инструментов для смешивания цветов. Если вы знаете свои аналогичные цвета по составным, дополнительным и триадным цветам, то этот инструмент для вас. Кроме того, если вы любите другие приложения Adobe, такие как Illustrator, Photoshop, Brackets.io (секретный редактор Adobe с открытым исходным кодом) и Adobe XD, вы обнаружите, что они легко и потрясающе интегрируются с Adobe Color CC.
Классная особенность: цветовые схемы, созданные сообществом.
5. Colordot
Ссылка: Colordot
Colordot предназначена для тех, кто действительно знает свои цвета или может определить цвет, который они ищут, когда они его видят. При каждом движении мыши на экране отображается новый цвет вместе с его шестнадцатеричным кодом (хотя большинство приложений цветовой схемы позволяют изменить этот параметр по умолчанию, если вы используете RGBA). Think : огромная интерактивная палитра цветов, в которой вы, , имеете полный контроль! Когда вы щелкаете (чтобы выбрать цвет), экран делится пополам, отображая выбранный вами цвет с одной стороны и новый палитру цветов с другой.Промойте и повторяйте, пока не получите все цвета, или выберите похожие цвета, чтобы сравнить их!
Бонус: анализатор цветового контраста
При выборе цветов цветовой схемы вы должны подумать о том, насколько хорошо они контрастируют с другими цветами , которые вы используете, в первую очередь о том, как текст контрастирует с фоном. Хорошо контрастирующий текст повысит читаемость и удобочитаемость и, в конечном итоге, доступность макета.
Одно приложение, которое мне нравится использовать, — это анализатор цветовой контрастности для Windows и MacOS, который сравнивает цветовой контраст между двумя выбранными вами элементами и дает этому соотношению оценку «прошел / не прошел» в соответствии с всемирно признанным WCAG (веб-контент Accessibility Guidelines) стандарты цветового контраста.
Хотя это отдельное приложение, существует подключаемый модуль Color Contrast Analyzer для Sketch , как упоминалось в нашей статье 5 Smashing Sketch Plugins .
Передайте свои цветовые схемы и руководства по стилю с помощью Sympli
Вы создали пользовательский интерфейс своего приложения, используя потрясающую цветовую схему, но как убедиться, что разработчик в вашей команде знает об этом все? Используйте брендбуки Sympli !
Наши брендбуки — это инструмент для управления стилем вашей цветовой палитры.Он позволяет вам определять цвета и шрифты, используемые в вашем проекте, и разработчики могут обращаться к этим Brandbooks, чтобы отмечать используемые цвета или загружать шрифты.
Есть ли в этом списке что-то, что помогает процессу выбора цвета новыми, интересными и лучшими способами? Дайте нам знать!
красивых цветовых палитр бесплатно
Что такое палитра цветов?
Цветовая палитра — это набор цветов, которые хорошо сочетаются друг с другом. Цветовые палитры часто используются для создания единообразного внешнего вида.Цветовые палитры используются дизайнерами логотипов, графическими дизайнерами, иллюстраторами, веб-разработчиками и другими художниками. Хорошая цветовая палитра — основа профессионального визуального дизайна.
Как составить цветовую палитру?
Цветовая палитра часто создается вручную. Часто опытный дизайнер или художник может выбрать подходящие цвета. За годы работы с разными цветами они получили опыт, чтобы знать, какие цвета хорошо сочетаются друг с другом и являются эстетически приятными. Даже в этом случае выбор отличной цветовой палитры может быть трудным.К счастью, в этом могут помочь компьютерные алгоритмы.
Автоматически создавать цветовые палитры
Этот генератор цветовых палитр автоматически выбирает цвета, которые хорошо смотрятся вместе. Наш генератор цветовой палитры использует алгоритм цветовой палитры нашего создателя логотипа My Brand New Logo, который автоматически создает красивых и хорошо сбалансированных цветовых палитр . За кулисами скрывается много науки о цвете, и все палитры полностью генерируются компьютером.
Использование цветовой палитры
Когда вы видите цветовую палитру, которая вам нравится, вы можете использовать эти цвета в своих собственных проектах графического дизайна. Просто нажмите на отдельный цвет, чтобы скопировать шестнадцатеричный код цвета в буфер обмена. Или, если вы хотите использовать полную цветовую палитру в своих веб-проектах, вы можете скопировать и вставить все цвета, нажав , скопировать код CSS .
Советы по созданию цветовой палитры
Хорошая цветовая палитра имеет хороший контраст , визуально приятна и содержит различных цветов .Наши алгоритмы изо всех сил стараются соответствовать этим качествам дизайна. Если вы хотите узнать больше о цветах, особенно в дизайне логотипов, мы подготовили для вас несколько рекомендаций:
перейдите к руководству по цвету логотипа
40 Бесплатная цветовая схема и палитра приложений (Massive Guide)
Последнее обновление 19.06.2020
Выбор цвета — это этап в процессе проектирования, который требует как умного мышления, так и интуиции. В сегодняшнюю цифровую эпоху вы можете использовать столько цветов и цветовых комбинаций, сколько захотите.
Человеческий глаз может видеть одновременно миллионы разных цветов. Как дизайнер, вы обязаны выбрать комбинацию из двух или трех цветов, которые дополняют друг друга и лучше всего подходят для вашего проекта.
Это может быть непростой задачей. Выбор цвета в большинстве случаев является субъективным и зачастую научным. Вы не можете выбирать цвета только потому, что они вам нравятся. Это особенно актуально, если вы разрабатываете для клиента.
Выбор идеального цвета превосходит личные предпочтения, потому что цвета могут влиять на эмоции, настроение и мысли.Выбранная вами цветовая палитра будет иметь большое влияние не только на дизайн, но и на то, как зрители отреагируют на вашу работу.
Как дизайнер, ваша задача — сбалансировать сложные роли, которые представляет цвет, для создания эффективного и визуально привлекательного дизайна. Вы можете сделать это, только если знаете, как работает теория цвета. Стандартная теория цвета может очень помочь в понимании того, какие цвета могут эффективно работать вместе (или нет) и какое влияние комбинации могут оказать на ваш дизайн.
Цветовой кругОдна из основ теории цвета — понимание цветового круга. Возможно, вы уже имеете представление о цветовом круге и, вероятно, видели его раньше в школе. Традиционный цветовой круг состоит из 12 цветов:
Основные или основные цвета : красный, желтый и синий
Дополнительные цвета: Оранжевый, зеленый и фиолетовый
Третичные цвета: красно-оранжевый, желто-оранжевый, желто-зеленый, сине-зеленый, сине-фиолетовый и красно-фиолетовый
С добавлением индиго первичный и вторичный цвета составляют цвета радуги или видимого спектра света.
Цветовой круг — это простое, но эффективное наглядное пособие для понимания взаимосвязи цветов друг с другом. Этот метод восприятия цвета делится на две категории: субтрактивная модель и аддитивная модель. Субтрактивная модель предполагает сочетание цветных пигментов (например, красок или чернил).
Стандартный цветовой круг, а также цветовая система CMYK, используемая для печати, подпадают под эту категорию. Аддитивная модель предполагает сочетание цветного света (например, цветов, которые вы видите по телевизору).В этой модели используется особый набор основных цветов — RGB (красный, зеленый и синий).
Цвет в дизайне
Включение цветов в дизайн требует гораздо большего, чем выбор двух или трех оттенков и их смешивание в равных частях в макете. Эффективное внедрение цвета в дизайн-проект требует баланса — и чем больше цветов вы добавите, тем сложнее будет создать баланс.
Простой способ осмыслить эту концепцию — разбить выбранные вами цвета на основные и акцентные цвета.Основной цвет будет самым заметным и наиболее часто используемым оттенком в дизайне. Акцентный цвет (-а) уравновесит и подчеркнет доминирующий цвет.
Сосредоточение внимания на том, как эти цвета сочетаются друг с другом, позволит вам настроить идеальную палитру, подходящую для вашего проекта. Взаимодействие цветов включает в себя количество — или отсутствие — контраста, легкость разборчивости при добавлении текста, то, как более отчетливые оттенки заставляют остальные цвета выглядеть, когда они находятся рядом друг с другом, тип настроения комбинации испускает и так далее.
Принцип реализации основной трехцветной палитры в дизайне — правило 60-30-10. Этот метод обычно применяется в дизайне интерьера, но также может быть эффективно использован для печати и создания веб-сайтов.
Правило предполагает, что 60% палитры состоит из основного цвета в дизайне; 30% и 10% будут разделены на два акцентных цвета.
Отличная аналогия этого правила — мужской костюм: 60% — это цвет пиджака и брюк; 30% — это цвет рубашки, а 10% — цвет галстука.На выходе получается хорошо смешанный, сбалансированный и отполированный вид.
Альтернативный способ сохранить сбалансированную цветовую палитру — использовать оттенки (более темная версия) и оттенки (более светлая версия) цвета. Это позволит вам расширить свои цветовые комбинации, не перегружая дизайн множеством цветов.
Психология цветаЦвет везде. Даже если вы этого не замечаете, цвета сильно влияют на ваше настроение. Они также играют важную роль в вашей повседневной жизни.
Подумайте о знаке остановки на дороге сегодня или о цветовой комбинации того, что вы носили в офисе, или даже о назначенном цвете, который вы установили для уведомлений на телефоне.
Цвет используется даже в идиомах: вы «видите красный», когда злитесь, или «чувствуете себя синим», когда вам грустно. За цветами стоит психология. Это объясняет, как они имеют уникальную связь с тем, что вы думаете и чувствуете.
Сложность в психологии цвета заключается в том, что не все видят, чувствуют или воспринимают цвет одинаково.
Многие вещи влияют на символизм и значение, которое мы ассоциируем с цветами: культура и общество являются двумя основными факторами влияния. Хорошая новость в том, что большинство цветов имеют универсальное значение.
КрасныйУниверсальное значение: Красный цвет может выражать множество образов и идей в зависимости от контекста. Поскольку цвет огня преимущественно красный, этот цвет может обозначать либо тепло, либо опасность. Красный также является цветом крови, поэтому он часто ассоциируется с жизнью, любовью, а иногда и с насилием.
Различные символы: В некоторых культурах красный цвет означает удачу и успех. Часто это цвет революций и политических движений по всему миру.
Цвет Торговая марка: Красный символизирует силу, доверие и уверенность. Это один из наиболее заметных цветов для брендов в большинстве отраслей и ниш.
ОранжевыйУниверсальное значение: Оранжевый — это сочетание красного и желтого. Таким образом, он также может ассоциироваться с огнем и, таким образом, олицетворять тепло.Он обладает жизнерадостной атмосферой, выражающей энергию и оптимизм. Апельсин обычно ассоциируется с осенним сезоном.
Разнообразные символы: Шафран, яркая желто-оранжевая специя, считается священным в Индии. Оранжевый — это цвет любви в Японии.
Цвет Брендирование: Оранжевый обычно подразумевает молодость и изобретательность.
ЖелтыйУниверсальное значение: Желтый ассоциируется со счастьем и дружелюбием, поскольку это цвет солнечного света.Он также представляет собой весну. В некотором контексте желтый цвет означает осторожность. В медицинском мире желтый цвет часто ассоциируется с карантином и болезнями.
Различные символы: Желтый — цвет высокого ранга или королевской семьи в некоторых странах Востока и Азии. Это цвет траура в некоторых частях Африки и Латинской Америки.
Цвет Торговая марка: Ярко-желтый цвет привлекает внимание зрителей. Однако это может беспокоить, если он слишком яркий или если он сочетается с неправильным цветом.
ЗеленыйУниверсальное значение: Зеленый — цвет природы. Это связано с ростом, жизнью, здоровьем и всем органическим. Темно-зеленый цвет символизирует богатство и стабильность.
Различные символы: Зеленый — священный цвет в некоторых исламских странах. Это цвет, который больше всего ассоциируется с Ирландией.
Цвет Брендинг: Зеленый эффективен при брендинге продукта или услуги, которые имеют какое-то отношение к здоровью, устойчивости и окружающей среде.
СинийУниверсальное значение: Синий — это цвет моря и неба, поэтому он часто ассоциируется со спокойствием, умиротворением и умиротворением. В некотором контексте синий также связан с грустью.
Различные символы: Синий традиционно используется для обозначения защиты от зла на Ближнем Востоке. В большинстве культур этот цвет больше всего ассоциируется с небом, духовностью и бессмертием.
Цвет Торговая марка: Синий — один из самых универсальных торговых марок.Его часто используют для выражения безопасности, надежности и доверия. В цветах корпоративных брендов часто используется синий (или его оттенок), поскольку он также говорит о профессионализме.
ЧерныйУниверсальное значение: Как и красный цвет, черный имеет сложный оттенок. С одной стороны, он олицетворяет роскошь, мощь и класс. С другой стороны, он символизирует смерть, зло и невезение. В одежде черный цвет обычно символизирует формальность или печаль.
Различные символы: Черный — мужской цвет в некоторых частях Азии и Латинской Америки.Он представляет собой возрождение в Египте. Во многих культурах черный цвет ассоциируется с магией и суевериями.
Цвет Брендинг: Черный, пожалуй, наиболее часто используемый цвет для брендинга, так как это практически нейтральный оттенок. Но во многих случаях и в правильном контексте цвет все же может передавать ценность, которую он представляет.
БелыйУниверсальное значение: Белый символизирует чистоту, невинность и добродетель. В некотором контексте это также означает стерильный и чистый.
Различные символы: Белый — цвет траура в Китае. Это также означает мир или знак капитуляции в большинстве частей мира.
Цвет Торговая марка: Белый обычно символизирует простоту, чистоту и минимализм.
Инструменты цветовой палитрыГенераторы цветовой палитры могут очень помочь вам в определении того, какая комбинация цветов лучше всего подходит для вашего проекта. Вот 40 лучших производителей цветовых схем на сегодняшний день:
Материал Цвета пользовательского интерфейса
Material UI Colors — одно из приложений, созданных Panda Network для дизайнеров, разработчиков и владельцев малого бизнеса.Приложение представляет собой цветовую палитру для материального дизайна. Веб-сайт предлагает функцию копирования и вставки для упрощения процесса сопоставления цветов.
Плоские цвета пользовательского интерфейса
Flat UI Colors — это приложение с цветовой палитрой, специально разработанное для плоских тем пользовательского интерфейса. На сайте представлены сотни плоских цветов для профессиональных дизайнерских проектов. Коды каждого цвета доступны через функцию копирования и вставки.
Охладители
Coolors — это быстрый и простой генератор цветовых схем.Сайт позволяет пользователям создавать, сохранять и обмениваться палитрами за секунды. Coolors доступен в виде приложения для iOS, надстройки Adobe или расширения Chrome.
Color Hunt
Color Hunt — социальная платформа с цветовой палитрой. На сайте представлена тщательно подобранная коллекция цветов, созданная пользователями приложения. Каждое цветное творение проверяется и отбирается вручную, поэтому самые популярные творения отображаются на главной странице сайта.
Adobe Color CC
Color CC — это генератор цветовой палитры Adobe.Он позволяет пользователям создавать цветовые схемы с помощью цветового круга. Он также предоставляет тысячи цветовых комбинаций, созданных и созданных сообществом Kuler.
Color Farm
Color Farm с красочным логотипом курицы — создатель уникальной цветовой схемы. В нем используется JotForm 4.0, самый простой способ создания онлайн-формы. Сайт предоставляет ежедневное цветовое вдохновение с помощью снимков Dribble.
Color Claim
Color Claim — это цветовое вдохновение.Генератор цветов, размещенный на Tumblr, наполнен любимыми цветовыми комбинациями и кодами владельца сайта. Большинство цветовых палитр на сайте нежные, с одним основным цветом и одним акцентным оттенком.
Цвета Neil Orange Peel
Colors — это генератор цветовой палитры, созданный Нилом Апельсином Пилом. На сайте представлено 12 основных цветов с множеством цветовых сочетаний под каждый оттенок. Он обеспечивает простую функцию копирования и вставки шестнадцатеричного кода.
Спортивные оттенки
Sporting Hues — это программа сочетания цветов, в которой основное внимание уделяется спортивным цветам.Цветовые схемы разделены на категории: NFL, NBA, MLB и EPL.
ОтRGB до
RGBto — это служба цветовой палитры, которая разделена на три вкладки: цветовые коды HTML, цвета RAL и цвета Pantone. Пользователи могут использовать кнопку поиска на сайте, чтобы получить шестнадцатеричный код любого цвета или цветовой комбинации по своему желанию. Они также могут использовать ключевые слова для облегчения поиска.
Colorrrs
Colorrrs — это классный генератор цветовой палитры, предназначенный для профессионального цветового дизайна и маркетинга.Пользователи могут просматривать сотни цветов и цветовых комбинаций с помощью клавиши пробела на клавиатуре. На сайте также есть конвертер RGB.
Палитра цветов
Color Picker — это инструмент цветовой палитры, который позволяет пользователям создавать, сохранять и использовать свои цветовые решения. На главной странице сайта каждый день отображаются различные рекомендуемые цвета с их шестнадцатеричными кодами.
Colordot
Colordot — это приложение для создания цветовой палитры, разработанное HailPixel и доступное в Интернете и на iOS.Версия веб-сайта позволяет пользователям перемещать мышь вперед и назад для изменения оттенка, вверх и вниз для легкости и прокрутки для насыщенности. Мобильная версия позволяет пользователям выбирать цвета одним движением и захватывать цвет с помощью камеры телефона.
Цветовой круг
Цветовое колесо— одна из главных особенностей Adobe Color CC. Программа помогает пользователям InDesign создавать цветовые комбинации для тем. Колесо также может переводить цвета в четыре различных формата — CMYK, RGB, HEX и Lab.
0to255
0to255 — это простой, но гениальный инструмент цветовой палитры, который позволяет дизайнерам находить нужные варианты и комбинации цветов. Приложение особенно полезно для поиска подходящего цвета или цветовых комбинаций для наведения курсора, границ и градиентов.
ЦВЕТОВ
COLOURlovers — это веб-сайт, на котором представлены продукты и услуги с различными цветовыми палитрами. Это сообщество, ориентированное на цвет, где пользователи могут делиться своими знаниями и любовью к цветам, а также к своим цветовым творениям.Также выделяются цветовые узоры, дизайн и тенденции.
Цвета бренда
Brand Colors — это веб-сайт, на котором пользователи могут найти цветовые комбинации и коды популярных брендов. Он утверждает, что имеет самую большую коллекцию цветовых палитр для официальных брендов по всему миру. Пользователи также могут предложить бренд, и сайт найдет и предоставит правильные комбинации и коды, соответствующие цветам бренда.
Колллер
Colllor — это генератор цветовой палитры, который создает согласованные цветовые палитры.Он предлагает пользователям на выбор различные цветовые вариации. Он также предоставляет идеи цветовой палитры, часто подчеркивая внутреннее значение цветов.
Coleure
Coleure — это генератор, который позволяет пользователям всесторонне управлять цветом. Приложение позволяет пользователям смешивать, сравнивать, тестировать и редактировать цвета, чтобы подобрать лучшую цветовую комбинацию для своего дизайна. Для удобства использования на сайте предусмотрены сочетания клавиш.
LOLColors
LOLColors от Mackenzie Child — это приложение для iOS для тщательно подобранных цветовых палитр.Приложение предлагает цветовые комбинации и вдохновение для дизайнеров. Цвета в форме капли имеют функцию копирования-вставки для шестнадцатеричных кодов.
Color Crush
Color Crush — это генератор цветовой палитры, созданный дизайнером fontflame.com. На сайте представлены цветовые комбинации и шестнадцатеричные коды для дизайнеров-любителей и профессиональных дизайнеров. На сайте также представлены новейшие и самые популярные цветовые комбинации, известные как «круши».
Коловели
Colovely — создатель цветовой палитры, разработанный компанией nofach.com. Используя пробел, пользователи могут просматривать сотни цветовых комбинаций и их кодов. Сайт предлагает простую функцию копирования и вставки из буфера обмена.
ColorDrop
ColorDrop — это веб-приложение для создания цветовой палитры. На сайте представлены сотни различных цветовых сочетаний. Для удобства навигации пользователи могут просматривать в приложении «Избранное» и «Плоские цвета».
Палетон
Paletton — это программа для создания цветовых схем, созданная, чтобы помочь дизайнерам создавать цветовые комбинации, подходящие для веб-сайтов.Приложение разработал Петер Станичек. Он связан с Colorpedia Патенттона — обширным источником информации о цветах.
Цветовые тренды + палитры
Color Trends + Palettes — это функция Colourlovers. Это раздел, в котором сообщество может поговорить о «горячих» цветах и новых сочетаниях цветов, в основном в моде, дизайне и путешествиях.
Colrd
Colrd — это генератор цветовых схем, который позволяет пользователям создавать и делиться своими цветовыми решениями со всеми.На сайте представлены изображения и графика с соответствующей цветовой комбинацией и кодом. Это сочетание искусства и дизайнерского вдохновения для начинающих и профессиональных дизайнеров.
ColorSchemer
ColorSchemer — это веб-сайт, на котором представлены различные программы и услуги, связанные с цветом. Рекомендуемые продукты в основном доступны на устройствах iOS. Сайт также предлагает разные версии ColorSchemer для ПК и Mac.
Цвет Сейф
Color Safe — это веб-сайт, который генерирует цветовые палитры.Он отличается от других создателей цветовых схем, поскольку устанавливает и холст, и текст. Пользователи могут ввести цвет фона, и программа предоставит наилучшие шрифты для дополнения заданного оттенка.
Палитра материалов
Material Palette — это удобный генератор цветов, значков и палитр. Он позволяет пользователям выбрать два цвета, из которых программа предоставит соответствующие цветовые комбинации: от темных и светлых основных цветов до цветов акцента и разделителя.
Семена дизайна
Design Seeds — это в первую очередь цветной блог, где зрители могут вдохновиться представленными цветными эскизами и изображениями.Каждая фотография разбита по оттенку и оттенку. Для удобства навигации блог разделен по коллекциям и по цвету.
Градиенты пользовательского интерфейса
UI Gradients — средство создания цветовых схем, специально созданное для градиентов. Кодируются два цвета, составляющие градиент. Пользователи также могут добавить свое создание градиента или получить код CSS комбинации.
ColorMunki
ColorMunki — это цветовой инструмент, созданный для дизайнеров и любителей, чтобы помочь им создавать свои собственные цвета и цветовые комбинации.С момента своего запуска сайт помог многим дизайнерам-фрилансерам создать графический дизайн для своих проектов. На сайте также есть раздел «Знание цвета», посвященный всему и обо всем, что касается цветов.
Живописный
Pictaculous — это программа, которая генерирует цветовые палитры. Сайт, основанный на MailChimp, разбивает цветовые комбинации изображения с помощью закодированных серийных номеров.
Люциан цветной
Color Snapper — создатель цветовых схем, созданный специально для OS X Yosemite.Приложение предназначено для разработчиков и графических дизайнеров, поэтому они могут настраивать, смешивать, изменять, сохранять и экспортировать цвета на экране. Приложение поддерживает как темные, так и светлые цветовые темы.
UnClrd
UnClrd — это уникальный инструмент для работы с цветом, который помогает дизайнерам увидеть, что видят дальтоники, когда последние смотрят на веб-сайты и изображения, всплывающие с цветами. Это плагин для браузера, который превращает красочные сайты в черно-белые. Плагин доступен для Chrome и Firefox.
Веб-градиенты
WebGradients — это набор из более чем 100 линейных градиентов, которые пользователи могут использовать в качестве фона контента для своего проекта веб-сайта.Сайт предлагает версии каждого градиента как .JPG, так и .PNG. Он также предоставляет пакеты для Sketch и Photoshop.
Глоток
Sip — необычный генератор цветовой палитры. Это лучшая программа для сбора, систематизации и обмена цветами и цветовыми комбинациями. У него есть бесплатная и платная версии, и он доступен в SETAPP и для iOS.
Цвет дня
The Day’s Color ежедневно предлагает разные цветовые палитры. Сайт призван вдохновить дизайнеров на использование цветовых сочетаний, которые можно увидеть каждый день в различных искусствах, музыке, изображениях, дизайне и даже воспоминаниях.
Тонкие узоры
Subtle Patterns от Toptal — это набор цветовых палитр, которые каждый может бесплатно использовать для своих веб-сайтов или дизайнерских проектов, если указаны соответствующие кредиты. Пользователи также могут создавать свои собственные темы узоров на основе представленных на сайте.
ДеГрейв
DeGraeve — это веб-сайт, наполненный программами и приложениями для дизайна. Он имеет удобный генератор цветовой палитры. Пользователи могут ввести URL-адрес изображения, которое они хотят разбить.Затем сайт предоставит цветовые комбинации и коды фотографии.
Теги: 10 цветовая палитра 12 цветовая палитра 12 цветовое колесо 12 шаблон цветового круга 12 диаграмма цветового круга 12 частей цветовое колесо 2 цветовых приложения 2 цветовые схемы 2 генератор цветовой палитры 2 генератор цветовых схем 2017 веб-цвета 2018 подходят для цветов 28 цветов 3 цветовая палитра Генератор 3 цветовых палитр 3 Генератор цветовых схем 6 Цветовая палитра 6 Генератор цветовых схем 6 цветовых схем 7 Генератор цветовых схем Генератор 8 цветовых палитр План выбора цветов для композиции дополнительный цвет Adobe CC цветовой круг Adobe Color Adobe Color альтернатива Adobe Color приложение Adobe цвет приложение iphone Adobe Color CC Adobe Color CC API Adobe Color CC приложение Adobe Color CC Illustrator Adobe Color CC в Photoshop Adobe Color CC Photoshop Adobe Color CC веб-сайт Adobe цветовой круг Adobe список цветовых кодов Adobe цветовой круг Adobe цветовая комбинация Adobe цветовая комбинация Adobe Color дополнительный Adobe Color контраст Adobe Color изучить Adobe Color справка Adobe Color Kit Adobe Color кулер Adobe Color логотип Adobe Color Match Adobe колесо соответствия цветов Adobe цветовой микшер Adobe цветовая палитра из изображения Adobe цветовая палитра генератор Adobe цветовой палитры приложение Adobe инструмент цветовой палитры Adobe цветовые узоры Adobe цветовая палитра Adobe Color Picker кулер Adobe инструмент выбора цвета Adobe цветовая схема Adobe цветовая схема инструмент Adobe цветовая схема веб-сайт Adobe цветовая схема Adobe программное обеспечение цветовая система Adobe цветовые темы Adobe цветовые темы Adobe после эффектов расширение цветовых тем Adobe Photoshop цветовые темы Adobe Indesign Цветовые темы Adobe не загружаются цветовое колесо Adobe цветовой круг Adobe cc цветовое колесо Adobe кулер средство выбора цветового колеса Adobe Adobe Color Finder Adobe цветовой генератор Adobe Color создатель палитры генератор цветовой палитры Adobe цветовая схема Adobe цветовой инструмент Adobe цветовое колесо Adobe цветовое колесо CC Adobe дополнительные цвета Adobe Hex Adobe House цвета краски Adobe Illustrator цветовые схемы Adobe Illustrator образцы цветов скачать бесплатно Adobe Illustrator палитра цветов Adobe Illustrator выбрать цвет из изображения Adobe Indesi подборщик цветов gn adobe kuler adobe kuler cc adobe kuler цвет Adobe кулер цвет cc Adobe кулер рабочий стол Adobe кулер настольное приложение Adobe кулер исследовать Adobe кулер бесплатно Adobe кулер ipad логотип Adobe кулер Adobe кулер онлайн Adobe кулер фотошоп Adobe кулер фотошоп ccches Adobe кулер темы Adobe кулер веб-сайт adobe kuler колесо Adobe палитра приложение Adobe палитры создатель палитры Adobe генератор палитры Adobe инструмент палитры Adobe Photoshop cc цветовое колесо Adobe веб-приложение Builder Adobe Wheel CC после эффектов образцы цвета генератор цветов AI альтернативные дополнительные цвета альтернативное цветовое колесо цветовая схема Android 5 цвет приложения для Android коды цветовая схема приложения для Android Цветовая тема приложения для Android Цветовая палитра Android из rgb Цветовая палитра Android Цветовая палитра Android Цветовая палитра материала Android Цветовые коды дизайна материала Android Палитра Android Цвет палитры Android конструктор приложений цветовая палитра приложения v2017 Идеи цветовой палитры приложения Цветовая схема приложения Дизайнер приложения Цветовая схема генератора цвет приложения схемы приложение цветовые схемы 2018 приложение цветовые темы приложение coolors приложение для цветовых палитр приложение цвета темы приложения по цвету приложения для цвета художник генератор цветовой палитры художник цветовое колесо бесплатно скачать художники проверка цвета автоматический генератор цветовой палитры автоматический генератор гармонии красивые цветовые палитры красивые цветовые палитры для веб-сайтов красивые цветовые схемы красивые html цветовые коды красивые цветовые палитры веб-сайтов лучшие 3 цветовые комбинации для веб-сайтов лучшие цветовые схемы приложений лучший генератор приложений лучшие приложения для дизайнеров лучшие цветовые коды для дизайна веб-сайтов лучшая цветовая комбинация для веб-приложений лучшие цветовые комбинации для семейных фотографий лучшие цветовые комбинации для мобильных приложений лучшие цветовые комбинации веб-дизайн лучшие сочетания цветов для веб-сайтов лучший дизайн цветов лучшие сочетания цветов лучшее приложение для смешивания цветов лучшие цветовые палитры 2017 лучшие цветовые палитры 2018 лучший подборщик цветов для Windows лучшее программное обеспечение для выбора цвета лучшая цветовая схема для кодирования лучшие цветовые схемы лучшие цвета для приложения лучшие цвета для лучший дизайн приложения коло rs для приложений лучший цвет по номерам приложение лучшие цветовые комбинации для веб-сайта лучшие цветовые схемы лучшие приложения для раскраски лучшие цветовые схемы для семейных фотографий лучшие цветовые комбинации градиента для иллюстратора лучшие цветовые комбинации rgb для ПК лучшее приложение для рандомизации лучший цвет темы для твиттера лучший создатель темы лучшие цветовые схемы пользовательского интерфейса лучшие веб-цветовые схемы лучшие веб-цвета 2018 лучшие цветовые палитры веб-дизайна лучшие цветовые схемы веб-сайтов лучшие цветовые схемы веб-сайтов 2017 лучшие цветовые схемы веб-сайтов 2019 лучшие цвета веб-сайтов 2018 лучшие палитры веб-сайтов лучшие инструменты генератор цветовых схем блога генератор синего цвета изображения бесплатно скачать бутстрап цветовые коды бутстрап генератор цветов бутстрап набор палитры цветов цвет бутстрап генератор цветовой схемы начальный выбор цветовой схемы начальный дизайн материалов цвета палитра начальной загрузки генератор темы с изображения бренд генератор цветовой палитры бренд выбор цвета бренд генератор цветовой схемы создание потрясающих цветовых схем для ваших проектов дизайна пользовательского интерфейса создание цветов программное обеспечение для выбора схема окраски автомобиля дизайнер дизайн персонажа цветовая палитра проверить цветовой код из изображения проверить мои цвета выбор генератора выбор приложение колесо выбора приложение выбрать цветовую палитру выбрать цветовую палитру веб-сайт выбрать цветовую схему выбор цветовой палитры хромированная палитра цветов из изображения создатель хромированной темы конфликт сфера генератор ткань приложение подбора цветов cmyk цветовая диаграмма pdf скачать бесплатно cmyk цветовые коды pdf скачать бесплатно цвет 12 доступность цвета генератор приложение для анализа цвета приложение для анализа цвета приложение для анализа цвета iphone инструмент для анализа цвета загрузить фото приложение для смешивания цветов генератор платы генератор цветов конструктор цветовая диаграмма веб-дизайн выбор цвета adobe color chooser онлайн цветовой круг поиск цветового кода с веб-сайта цветовой код html из изображения идентификатор цветового кода из книги цветовых сочетаний изображений PDF скачать бесплатно диаграмму сочетания цветов бесплатно скачать цветовую комбинацию выбор цветовой комбинации код для веб-сайта цветовая комбинация для приложения Android цветовая комбинация для домашнего цвета co mbination для мобильного приложения сочетание цветов для фотошопа сочетание цветов для дизайна пользовательского интерфейса сочетание цветов для веб-сайта сочетание цветов для дизайна веб-сайта сочетание цветов для макета веб-сайта сочетание цветов для веб-сайта с кодом сочетание цветов игра генератор сочетания цветов руководство для дизайнеров сочетание цветов производитель сочетания цветов фотошоп выбор сочетания цветов шаблон веб-сайта цветовые комбинации для изображений генератор цветовых сочетаний диаграмма сочетания цветового контраста генератор цветового контраста выбор цветового контраста инструмент согласования цветов онлайн-генератор цветов css-генератор цветовой дизайн онлайн-инструмент цветового дизайна онлайн-инструмент для поиска цвета с веб-сайта инструмент для поиска цвета онлайн цвет для справки цвет из генератора изображений генератор цветов генератор цветов для веб-сайта генератор цветов из изображения цветовая сетка приложение книга цветовой гармонии PDF скачать бесплатно цветовая гармония фотошоп инструмент цветовой гармонии шестнадцатеричные коды цветов из изображения цветовой оттенок r color hunt приложение цветная охота синий цвет кулер цвет кулер цветовая палитра instagram цвет кулер палитра инстаграм цвет кулер онлайн создание цвета css цвет меня креативное приложение цветовое смешение css смеситель цветов css генератор смесителей цветов приложение для смешивания цветов приложение для смешивания цветов приложение для смешивания цветов диаграмма смешения цветов приложение для смешивания цветов онлайн смешивание цветов игра онлайн игры смешивание цветов бесплатно онлайн руководство по смешиванию цветов приложение инструмент смешивания цветов бесплатно скачать инструмент сочетания цветов цветовая палитра цветовая палитра 4 цвета цветовая палитра 6 цветов цветовая палитра 8 цветов анализатор цветовой палитры цветовая палитра приложение цветовая палитра дизайн приложения цветовая палитра браузер цветовая палитра построитель цвет выбор палитры цветовая палитра генератор css поиск цветовой палитры поиск цветовой палитры из цветовой палитры изображения для дизайна приложения цветовая палитра для веб-сайта цветовая палитра из цветовой палитры фотографии из цветовой палитры изображения из изображения Adobe цветовая палитра из генератора изображений цветовая палитра из изображения онлайн цветовая палитра из картинка генератор цветовой палитры приложение для генератора цветовой палитры colo r генератор палитры на основе генератора цветовой палитры из генератора цветовой палитры из генератора шестнадцатеричной цветовой палитры из генератора цветовой палитры изображения из приложения для изображения генератор цветовой палитры из генератора цветовой палитры из двухцветного генератора цветовой палитры кулера генератор цветовой палитры pantone генератор цветовой палитры фотошоп справка по цветовой палитре помощник по цветовой палитре цветовая палитра шестнадцатеричный генератор цветовая палитра в css цветовая палитра дизайн логотипа создатель цветовой палитры приложение для создания цветовой палитры макет цветовой палитры бесплатный генератор имени цветовой палитры цветовая палитра онлайн-выбор цветовой палитры средство выбора цветовой палитры из программы выбора цветовой палитры изображения программа выбора цветовой палитры цветовая палитра шаблон цветовая палитра инструмент цветовая палитра инструменты для дизайнеров цветовая палитра tumblr цветовая палитра веб-дизайн 2018 цветовая палитра цветовые палитры для веб-сайтов цветовой пантон генератор цветовой узор Adobe цветовой шаблон генератор цветоподборщик exe скачать бесплатно палитру цветов для Mac бесплатная палитра цветов бесплатная загрузка реклама для Windows 10 палитра цветов из изображения палитра цветов из изображения загрузка палитры цветов из png палитра цветов с веб-страницы палитра цветов в indesign палитра цветов дизайн материала палитра цветов материал пользовательский интерфейс палитра цветов сайт палитра цветов тема палитра цветов инструмент онлайн с палитры цветов изображения выбор цвета ux игра генератор цветовых пластин генератор цветовой шкалы создатель цветовой шкалы цветовая схема цветовая схема 2018 приложение цветовой схемы iphone цветовая схема генератор цветовой палитры создатель цветовой схемы определение цветовой схемы конструктор цветовой схемы конструктор цветовой схемы дизайнер 3 цветовых схем дизайнер палитры цветовая схема разработчик программного обеспечения цветовая схема для приложения Android цветовая схема из изображения цветовая схема из фотографии цветовая схема из изображения цветовая схема игра генератор цветовой схемы генератор цветовой схемы приложение генератор цветовой схемы бесплатный генератор цветовой схемы из генератора цветовой схемы шестнадцатеричный генератор цветовой схемы веб-сайт вспомогательная цветовая схема идеи цветовой схемы создатель цветовой схемы цветовая схема онлайн o nline генератор цветовая схема онлайн-инструмент палитра цветовой схемы выбор цветовой схемы инструмент выбора цветовой схемы планировщик цветовой схемы инструмент цветовой схемы составление цветовых схем онлайн-цветовые схемы для веб-сайтов 2017 выбор цвета для дизайна веб-сайта выбор цвета Adobe набор цветов дизайн цветовых оттенков для веб-сайта генератор цветовых оттенков цветовые сайты для дизайнеров цветное умное приложение генератор цветных полос цветовой стиль рекомендации по дизайну Google образец цвета приложение образец цвета из изображения образец цвета игра генератор образцов цвета средство создания образцов цвета выбор образца цвета образец цвета сайт образцы цвета образцы цвета из фото конструктор цветовых шаблонов генератор цветовой темы средство создания цветовой темы средство выбора цветовой темы средство выбора цветовой темы иллюстратор цветовой темы теория цвета теория цвета для графических дизайнеров инструменты цвета инструменты цвета для дизайнеров инструменты цвета для графических дизайнеров генератор цветовых переходов генератор цветовых триад средство выбора цветовой триады приложение цветового круга приложение цветового круга приложение цветового колеса Androidприложение игра цветовое колесо приложение iphone выбор цветового круга генератор кода цветового круга генератор комбинаций цветового круга генератор цветового круга дополнительные цвета генератор цветового круга дополнительные цвета интерактивный инструмент разработки цветового круга цветовое колесо для фотошопа бесплатно генератор цветового круга генератор шестнадцатеричного кода цветное колесо изображение бесплатно скачать цвет колесо изображений бесплатно цветовое колесо сопоставление игра цветовое колесо онлайн цветовое колесо онлайн генератор цветовое колесо онлайн инструмент цветовое колесо палитра создатель цветового круга картинка бесплатно цветовое колесо рандомизатор цветового колеса программное обеспечение цветового круга инструмент цветового круга триада инструмент цветовой круг веб-сайт цвета цветовой инструмент цвета из генератора изображений цвета, которые смешивать цвета, которые идут вместе генератор цвета, которые хорошо смотрятся вместе веб-сайт цветовые приложения для дизайнеров поиск цветового кода из изображения приложение сочетания цветов генератор сочетания цветов производитель сочетания цветов программное обеспечение для сочетания цветов приложение для согласования цветов инструмент для согласования цветов цвет из темного полного фильма d собственная загрузка цветовой генератор из изображения цвет вдохновение графический дизайн приложение для создания цвета приложение для создания цвета приложение для сопоставления цветов бесплатная загрузка цветное мобильное приложение средство поиска цветовой палитры цветовая палитра из цветовой палитры из изображения генератор цветовой палитры из средства создания цветовой палитры изображения средство создания цветовой палитры из цветовой палитры изображения онлайн выбор цветовой палитры предложения цветовой палитры генератор цветовых узоров средство выбора цвета для веб-сайтов средство выбора цвета из средства выбора цвета изображения генератор цветовой схемы indesign бесплатный генератор цветовых схем из изображения цветовая схема справка по цветовой схеме онлайн-создание образцов цвета средство создания образцов цвета образцы цветов для дизайнеров цветовые шаблоны для веб-сайтов цвет колесо генератор программное обеспечение цветового круга инструмент цветового круга приложение для цветовых сочетаний Android цвета бесплатно скачать colr org комбинированный генератор онлайн-генератор комбинаций программное обеспечение дополнительный калькулятор цвета дополнительный селектор цвета дополнительный сопоставитель цветов дополнительный палитра цветов com приложение дополнительного цветового колеса генератор дополнительных цветов дополнительные цвета онлайн инструмент дополнительных цветов генератор дополнительной цветовой палитры генератор дополнительных цветовых схем дополнительные веб-цвета бесплатный искатель цвета бесплатный генератор цветов бесплатный инструмент выбора цвета бесплатный инструмент цвета контраст искатель цвета контрастная цветовая схема классные комбинации цветов крутые цветовые схемы ПК круто color coolors coolors палитра цветов создать цветовую палитру из одного изображения создать цветовую палитру из изображения создать палитру из фотографии создать цветовую палитру создать цветовую палитру для веб-сайта создать цветовую палитру из цвета создать цветовую палитру из изображения создать цветовую палитру из иллюстратора изображений создать цветовую палитру из фотошопа создать цветовую схему из двух цветов создать цветовую схему онлайн создать цветовую палитру из изображения создать цветовую палитру онлайн создать шестнадцатеричную цветовую палитру создать свою цветовую палитру создать палитру из изображения создать палитру из фотошопа изображения создать цветовую палитру pantone css цветовую комбинацию для веб-сайта css color design css color maker онлайн css color maker css сопоставление цветов css микшер цветов css онлайн-генератор цветов css скачать бесплатно css подборщик цветов онлайн генератор цветовых схем css шестнадцатеричные цветовые схемы css генератор цветовых оттенков css css цветовая тема генератор css цветовое колесо css-палитра генератор css случайный цвет из списка css безопасные цвета css веб-безопасные цвета генератор настраиваемой цветовой палитры темный дизайн генератора cc схема окраски автомобиля онлайн-дизайн цветовая палитра дизайн цветовая палитра 2018 дизайн цветовая палитра генератор дизайн семена тема дизайна приложения генератор создать свою собственную цветовую схему палитра цветов рабочего стола найти цветовую палитру загрузить Adobe цветовые темы загрузить цветовую палитру для иллюстратора cc простые цветовые схемы элегантный дизайн веб-сайта извлечь цветовую палитру из изображения приятные для глаз цветовые схемы найти цветовую палитру из изображения найти лучшую цветовую комбинацию найти cmyk из изображение найти цветовой код из изображения найти c код цвета из фотошопа изображения найти имя цвета из шестнадцатеричного кода найти цветовую палитру найти цветовую схему найти цвета, которые сочетаются друг с другом найти цветовой код с веб-сайта найти цветовую палитру найти дополнительный цвет найти цвет css из изображения найти шестнадцатеричный код из изображения найти шестнадцатеричный из изображения найти цвет HTML код из изображения найти код цвета html с веб-сайта найти цвет HTML из изображения найти подходящую цветовую палитру найти подходящие цвета для вашей веб-страницы найти подходящие цвета в Интернете найти мои цвета приложение найти цвет pms в фотошопе найти цветовой код rgb из изображения найти цвет rgb из изображения найти цветовой код из изображения подходящие цвета плоский генератор цветов плоский набор цветов плоский набор цветов плоский дизайн цветовая диаграмма плоский дизайн цветовой код плоский пользовательский интерфейс генератор цветовой палитры генератор шрифтовой схемы бесплатный генератор цветов бесплатная цветовая палитра бесплатный генератор цветовой палитры бесплатное создание цветовой палитры бесплатные цветовые палитры бесплатно инструмент выбора цвета бесплатный дизайнер цветовой схемы бесплатные инструменты цветовой схемы бесплатные цветовые схемы для веб-сайтов бесплатная цветовая гамма инструменты r бесплатно цветовое колесо бесплатное приложение цветового колеса бесплатно диаграмма цветового круга бесплатно цветовое колесо онлайн бесплатно цветовое колесо фотошоп бесплатное программное обеспечение цветового круга бесплатно шаблон цветового колеса бесплатно цветовое колесо бесплатный инструмент генератора 2017 бесплатный генератор гармонии бесплатно HTML цветовые коды бесплатно автономная раскраска бесплатная онлайн-подборщик цветов бесплатный онлайн-генератор цветовых схем бесплатно онлайн-цветовое колесо бесплатные образцы красок бесплатные образцы красок онлайн бесплатные инструменты бесплатный генератор колес бесплатный цветной полноцветный дизайн полноцветный веб-сайт полноцветное колесо игра генератор цветовой палитры игровые цветовые схемы генерировать цветовую палитру для веб-сайта генерировать уникальные цвета получить цветовой код из pdf получить цвет с веб-страницы получить цветовую палитру из изображения получить цветовую палитру с веб-сайта получить цветовую схему из изображения получить шестнадцатеричный цвет из изображения получить цвет rgb из изображения в Интернете хорошие приложения для смешивания хорошие сочетания цветов хорошие сочетания цветов веб-сайт хорошие цветовые палитры хорошие цвета для приложений хороший CSS цветовые схемы Хорошие цвета интерфейса Хорошие цветовые схемы сайта Хорошая цветовая схема сайта mes google цветовой узор google выбор цвета цветовой круг google цветовое колесо google цветовая палитра материала google генератор цветовой палитры материала google инструмент палитры google выберите цвет цветовая схема поиска google средство выбора цвета слайды google ui цвета градиент генератор цветовой палитры инструменты градиента графический дизайн цветовая палитра графический дизайн цветовые схемы отличный цвет отличные цветовые схемы отличные цвета отличные цветовые схемы веб-сайта 2017 счастливый цвет бесплатный онлайн-генератор гармоничной цветовой палитры создатель гармонии онлайн-генератор гармонии онлайн-генератор шестнадцатеричных цветовых схем шестнадцатеричный код из изображения генератор шестнадцатеричного кода из изображения шестнадцатеричный цвет из шестнадцатеричного цвета изображения генератор из изображения шестнадцатеричный генератор имени цвета шестнадцатеричный инструмент цветовой палитры шестнадцатеричное цветовое колесо дополнительная шестнадцатеричная цветовая палитра генератор цветовой палитры дом генератор цветовой палитры инструмент выбора цвета дома сколько существует безопасных для Интернета цветов как выбрать цветовую палитру для веб-сайта как выбрать цветовые комбинации как выбрать цветовая комбинация ионы для веб-сайта как выбрать цветовую палитру веб-дизайн как выбрать цветовую схему для веб-сайта как выбрать дополнительные цвета как создать цветовую палитру из фотографии как создать цветовую схему как создать цветовую палитру из изображения в иллюстраторе как ввести pantone цвет в иллюстраторе как извлечь цветовую палитру из изображения как найти название цвета из изображения как найти изображения с той же цветовой схемой как получить цветовую палитру из изображения как получить цветовой код из файла pdf как получить шестнадцатеричный код из фотошопа как выбрать цветовые схемы как использовать цветовую палитру в веб-дизайне как использовать Adobe Color cc как использовать цветовую палитру в веб-дизайне как использовать Coolors как использовать кулер для веб-дизайна html цветовые коды из изображения html цветовые коды из изображения html цветовые комбинации html-цвет из изображения html-подборщик цветов из изображения html-подборщик цветов с веб-сайта html-подборщик цветов онлайн из изображения html-цветовая схема html-цветовые схемы для веб-сайтов html-подборщик цветов с веб-сайта html c дополнительные цвета генератор html-палитры html-подборщик из цветовой палитры значка изображения определить цветовую палитру иллюстратор образцы цветов бесплатно скачать indesign палитра цветов indesign kuler indesign выбрать цвет из изображения интерактивное цветовое колесо интерактивная диаграмма цветового круга ios 12 цветовая палитра ios 8 цветовая палитра ios 8 цветовая схема ios генератор цветовой схемы ios плоские цвета ios градиентный генератор jake color jake palet kuler kuler adobe color online kuler adobe com down приложение кулера ipad кулер цветовые комбинации генератор цветов кулер cc бесплатно скачать большую цветовую палитру макет цветовые схемы список безопасных для Интернета цветов логотип подборщик цветов генератор цветовых схем создать цветовую палитру сделать палитру из изображения сделать цветовую палитру из изображения сделать цветовую палитру онлайн создать свою собственную цветовую палитру из фотографии сделать свою собственное цветовое колесо онлайн мастер инструменты сопоставление c цветовая палитра согласование цветовой палитры генератор согласование цветовой палитры согласование цветовых схем согласование цветовых генераторов материал генератор цветовой палитры материал цветовая палитра материал цветовой круг материал дизайн цветовая диаграмма материал цвет палитра материал дизайн цветовой круг материал дизайн цветовой палитры генератор материал дизайн материал генератор материал дизайн палитра материал генератор дизайн пользовательского интерфейса цветовая палитра генератор палитры материалов генератор тем материалов мобильное приложение сочетание цветов мобильные цветовые приложения современные цветовые комбинации для веб-сайтов современные цветовые схемы графический дизайн анимированная графика цветовая палитра приятные цветовые схемы не совсем белый фон веб-сайта онлайн-генератор выбора онлайн-колесо выбора онлайн-колесо выбора онлайн-цветовая палитра из изображений онлайн-палитра цветов из изображений онлайн-палитра цветовых схем онлайн-образцы цветов онлайн-смеситель цветового круга онлайн-генератор цветовой палитры онлайн-инструмент цветового колеса онлайн-генератор комбинаций онлайн-шестнадцатеричное цветовое колесо онлайн-дизайн палитры r онлайн-генератор тем онлайн яркое приложение онлайн-генератор колес с открытым исходным кодом цветовая палитра краска создатель цветовой палитры генератор цветовой схемы краска палитра генератора схемы краски Adobe цветовая палитра приложение скачать палитру палитра цветовой схемы couleur веб-дизайн палитра для поиска палитры для Android палитра из палитры изображений из палитры URL-адресов изображения из генератора фотопалитры генератор палитры Adobe палитры генератор из палитры изображения графический дизайн создатель палитры создатель палитры из фотопалитры онлайн-генератор выбор палитры инструмент выбора палитры палитра инструмент палитра палитра приложение палитра цветовая палитра com создатели поддонов генератор рисунков палитры генератор кода pantone комбинации цветов pantone цветовые гармонии pantone генератор цветовой гармонии pantone приложение идентификатора цвета pantone генератор цветовой палитры pantone приложение для выбора цвета pantone цветовое колесо pantone бесплатные цвета pantone, которые хорошо сочетаются друг с другом комбинации цветов pantone генератор цветов pantone генератор цветовых схем pantone pantone co mbinations дополнительная таблица цветов pantone приложение для поиска дополнительных цветов pantone приложение для поиска pantone генератор pantone образцы для фотошопа загрузка pantone в шестнадцатеричный код генератор pantone веб-набор ресурсов цветовой набор приложение для генератора шаблонов приложение для ПК цветовые схемы персональный веб-сайт цветовая схема приложение для сопоставления цветов фото приложение для выбора цвета фотошоп cc цветовое колесо бесплатно цветовые темы для фотошопа цветовая схема для фотошопа образцы для фотошопа скачать бесплатно образцы для фотошопа из изображения выбрать цвет из pdf онлайн выбор цветовой схемы для веб-сайта прекрасный розовый дизайн веб-сайта интересующие цветовые схемы пиксельный выбор цвета бесплатно скачать цветовую палитру playstation приятные цветовые схемы популярные цветовые палитры для популярных веб-сайтов цветовые схемы 2017 популярные цвета для веб-сайтов готовые цветовые палитры основные цвета смотреть бесплатно первичный генератор телефона программирование цветовые схемы читать простое совершенство онлайн бесплатно связанная цветовая схема отношения генератор статуса отношения веб-генератор визуализировать цветовые схемы rgb colo r диаграмма pdf скачать бесплатно rgb генератор цветовой палитры образец цветовой палитры для веб-сайтов создатель схемы дизайн схемы дизайнер схемы 3 дизайнера схем схема генератора схем схема графического интерфейса онлайн-создатель схема веб-разработчик приложение выбор генератора css выбор цветов оттенок 3d скачать бесплатно Shutterstock labs палитры сайты, такие как кулер приложение для эскиза палитра цветов мягкая цветовая палитра генератор пространственной тематической цветовой палитры цвета состояния пользовательский интерфейс логотип метро pms цвета предлагают цветовую палитру костюм сочетания цветов генератор сочетаний костюмов конструктор образцов конструктор образцов генератор образцов цвет дружбы скачать конструктор цветовой схемы бесплатное ПО для генератора тонов с трехцветной палитрой инструмент для выбора цвета с экрана верхние цветовые схемы верхние генераторы веб-сайт тематическое колесо генератор модных цветовых комбинаций 2018 модных цветовых палитр триадный выбор цвета триадный генератор цветов триадный генератор цветов двенадцать цветовых кругов два генератора цветовых палитр генератор двух цветовых схем типы цветовых схем ui col или комбинации цветовая палитра ui генератор цветовой схемы ui цветовые схемы ui выбор цвета ui дизайн цветовые комбинации ui kit цветовая палитра полезный генератор электронной почты ux цветовая палитра яркая цветовая палитра яркие цветовые схемы яркая цветовая палитра яркая цветовая палитра w3 css цветовые темы генератор цветовой схемы стены смотреть оттенок онлайн бесплатно Паутина комбинации цветов погодных условий 2.0 цветовых комбинаций веб 2.0 цветовая палитра веб цветовые комбинации веб цветовой миксер веб цветовая палитра веб генератор цветовой палитры веб идеи цветовой палитры веб выбор цветовой палитры веб цветовые палитры веб подборщик цветов веб цветовые схемы веб образцы цветов веб колесо цвета веб цвета 2018 веб совместимые цвета веб дизайн цветовая палитра веб-дизайн палитра цветов веб-дизайн цветовые схемы веб-дизайн цветовые схемы 2017 веб-дизайн цветовое колесо веб-разработка цветовые схемы веб-разработчик палитра цветов веб-страница цветовая тема веб-поддон веб-поддоны веб-генератор шаблонов веб-подборщик веб-безопасная цветовая палитра веб-безопасная палитра цветов веб-подборщик веб-цвет безопасное цветовое колесо веб-безопасная шестнадцатеричная палитра цветов веб-мастер цветовая палитра веб-страницы цветовые комбинации веб-страницы цветовые схемы веб-приложение веб-приложение генератор приложений веб-сайт фоновый цвет веб-сайта генератор цветов веб-сайт генератор цветовой палитры веб-сайт инструмент цветовой палитры веб-сайт цветовые палитры веб-сайт цветовые схемы 2017 веб-сайт цветовые схемы 2018 цветовые схемы веб-сайта 2019 цветовые шаблоны веб-сайта идеи цветовой темы цветовые темы веб-сайта дизайн веб-сайта согласование цветов дизайн веб-сайта цветовая палитра дизайн веб-сайта вспомогательная палитра веб-сайта тема веб-сайта выбор цвета тема веб-сайта цветовые схемы генератор тем веб-сайта как выглядит цвет Adobe Adobe kuler используется для того, что является моей цветовой схемой цвет колеса Adobe Wheel изображения бесплатноКак выбрать идеальную цветовую схему для вашего сайта WordPress
Вам трудно выбрать цветовую схему вашего веб-сайта? Выбор правильной цветовой комбинации может повысить привлекательность вашего сайта, а также удержать посетителей, чтобы увеличить ваши продажи и конверсии.В этой статье мы покажем вам, как выбрать идеальную цветовую схему для вашего сайта WordPress, понимая психологию цвета и используя один из 4 замечательных ресурсов.
Психология цвета
Это хорошо изученная теория, согласно которой цвета могут влиять на реакцию человека. Цвета оказывают эмоциональное влияние на наши решения и выбор, который мы делаем в повседневной жизни.
Крупные корпорации тратят миллионы долларов на создание хорошо продуманного имиджа и индивидуальности своей продукции.Они нанимают экспертов, чтобы подобрать идеальное сочетание цветов для своих брендов и продуктов.
Цвета, которые вы используете на своем сайте, являются частью имиджа вашего бренда. Вам нужно выбирать цвета, которые вызывают благоприятный эмоциональный отклик у вашего бренда и продуктов.
Так как же определить, какие цвета и какой ответ вы ищете?
К счастью для вас, маркетологи и психологи уже провели много исследований. Взгляните на эту инфографику:
- Красный: цвет молодости и радости.Он отражает смелость и уверенность.
- Зеленый: Создает успокаивающий эффект, вызывает умиротворяющую, прогрессивную и спокойную эмоциональную реакцию.
- Синий: он отражает доверие, силу, надежность.
- Черный: Черный цвет вызывает сложную, прочную и надежную эмоциональную реакцию.
- Белый: Ясность и простота — два основных эффекта белого.
- Желтый: желтый — цвет оптимизма, тепла, дружелюбия.
- Оранжевый: Оранжевый создает веселый, дружелюбный, уверенный и веселый эффект.
- Pink: Чувственность, женственность, романтика и любовь — это эмоции, связанные с розовым.
Другие вещи, на которые следует обратить внимание
Само собой разумеется, что цветам нужен контекст, чтобы работать так, как вы хотите. У вашего бренда или продукта уже могут быть определенные ассоциации, которые могут или не могут работать с выбранными вами цветами.
Вот несколько вещей, которые вы должны учесть, прежде чем выбирать цветовую схему для своего сайта:
Во-первых, необходимо учитывать существующий имидж бренда.Если у вас уже есть логотип и другие маркетинговые материалы, вы можете использовать существующие цвета.
Также необходимо подумать, какие цвета будут хорошо смотреться в Интернете. То, что отлично смотрится на печати, на экране может выглядеть совсем иначе. Подумайте о других средствах массовой информации, таких как слайдеры, видео, изображения, кнопки с призывом к действию и т. Д., Которые вы будете добавлять на свой сайт. Подумайте, какие цвета вы будете использовать чаще всего.
Наконец, вы должны также помнить о доступности. Хорошая цветовая схема будет иметь достаточный контраст, чтобы ее можно было легко прочитать, даже если у ваших посетителей есть проблемы со зрением, как у многих людей по всему миру.Ознакомьтесь с нашим руководством по улучшению доступности на вашем сайте WordPress, чтобы получить дополнительные советы по этому поводу.
Видеоурок
Подписаться на WPBeginner
Если вы предпочитаете письменные инструкции или вам нужна дополнительная информация, продолжайте чтение.
Создание цветовой схемы
Надеюсь, теперь вы определили подходящие цвета для своего веб-сайта с учетом психологии цветов. Мы рекомендуем вам выбрать как минимум два цвета, которые четко представляют ваш бренд и реакцию, которую вы хотите получить от пользователей.
Когда у вас есть эти цвета, есть несколько онлайн-инструментов, которые вы можете использовать для создания неограниченного количества цветовых палитр.
1. Adobe Color CC
Ранее известный как Kuler, Adobe Color CC — отличный инструмент для создания цветовых палитр. Вы можете выбрать правила цвета, а затем крутить колесо. Вы можете вручную настроить каждый цвет в палитре, а остальные цвета будут автоматически настроены в соответствии с цветовым правилом. Вы также можете создавать цветовые палитры, загружая фотографии.
2. Фотокопия COLORLovers
Colorlovers — одно из самых популярных мест для цветного вдохновения и идей. У них есть отличные инструменты для создания цветовых схем. Одним из них является PhotoCopa, который позволяет создавать цветовую схему из фотографий. Вы также можете использовать их основной инструмент, который генерирует комбинации цветов, просто выбирая цвет.
3. Палитра материалов
Вдохновленный концепцией дизайна материалов Google, палитра материалов позволяет создавать цветовые схемы, используя правила дизайна.Он разработан, чтобы вдохновить использование цветовых схем в мобильных приложениях, но эти цветовые схемы можно легко использовать и для веб-сайтов.
4. Coolors.co
Coolors — прекрасный генератор цветовой схемы. Просто нажмите пробел, чтобы создать цветовые схемы. Вы можете изменить цвет в схеме вручную и заблокировать его. Вы также можете загрузить цветовые схемы, чтобы использовать их в своих проектах позже.
Мы надеемся, что эта статья помогла вам выбрать идеальную цветовую схему для вашего сайта WordPress.Вы можете прочитать нашу статью о том, как легко настроить WordPress с помощью CSS Hero.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.
Инфографика от The Logo Company
.