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


06.12.2018 Facebook Twitter LinkedIn Google+ Разное


Содержание

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

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

Цветовая теория для «чайников»

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

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

Если говорить, о полезной информации, которая может пригодиться в процессе выбора цвета для сайта, и которой можно будет воспользоваться при оформлении веб-дизайна, то теорию цвета можно разделить на 3 части:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее
Контраст.

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

Дополнение.

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

Резонанс.

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

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

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

Какие эмоции вызывают цвета?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Как думаете, с каким цветом у людей ассоциируется счастье? Правильно! С цветом солнца — желтым. Желтый можно отнести к универсальным краскам, ведь эмоции, которые он способен вызвать, зависят в большей степени от оттенка.

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

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

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

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

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

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

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

Инструменты для выбора цветовой гаммы веб-сайта

Воплотить теорию на практике и выбрать цвет для сайта можно даже онлайн. Сэкономьте время на создании собственной палитры и воспользуйтесь готовыми: Adobe Color CC, Paletton или Flat UI Color Picker. Если вам не понравятся эти инструменты, можете поискать в интернете другие — их там огромное количество.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Палитра цветов Get Color — все цвета онлайн

Палитра по фото · Пипетка онлайн · Фоторедактор · Цвета RAL · Цветовой круг

  • Абрикосовый — Apricot — #FBCEB1
  • Абрикосовый Крайола — #FDD9B5
  • Агатовый серый — Agate grey — #B5B8B1
  • Аквамариновый — Aquamarine — #7FFFD4
  • Аквамариновый Крайола — #78DBE2
  • Ализариновый красный — Alizarin red — #E32636
  • Алый — Scarlet — #FF2400
  • Амарантово-пурпурный — Amaranth-purple — #AB274F
  • Амарантово-розовый — Amaranth pink — #F19CBB
  • Амарантовый — Amaranth — #E52B50
  • Амарантовый глубоко-пурпурный — Deep purple amaranth — #9F2B68
  • Амарантовый маджента — Amaranth Magenta — #ED3CCA
  • Амарантовый светло-вишневый — Amaranth light cherry — #CD2682
  • Американский розовый — American pink — #FF033E
  • Аметистовый — Amethystine — #9966CC
  • Античная латунь — Antique brass — #CD9575
  • Антрацитово-серый — Anthracite grey — #293133
  • Антрацитовый — Anthracite — #464451
  • Арлекин — Harlequin — #44944A
  • Аспидно-серый — Slate grey — #2F4F4F
  • Аспидно-синий — Slate blue — #6A5ACD
  • Бабушкины яблоки — Granny’s apples — #A8E4A0
  • Базальтово-серый — Basalt grey — #4E5754
  • Баклажановый — Eggplant — #990066
  • Баклажановый Крайола — Eggplant Crayola — #6E5160
  • Бананомания — Bananamania — #FAE7B5
  • Барвинок (Перванш) — Periwinkle (Pervansh) — #CCCCFF
  • Барвинок Крайола — Periwinkle Crayola — #C5D0E6
  • Бедра испуганной нимфы — The thighs of a startled nymph — #FAEEDD
  • Бежево-коричневый — Beige-brown — #79553D
  • Бежево-красный — Beige and red — #C1876B
  • Бежево-серый — Beige-gray — #6D6552
  • Бежевый — Beige — #F5F5DC
  • Бело-алюминиевый — White-aluminum — #A5A5A5
  • Бело-зеленый — White-green — #BDECB6
  • Белоснежный — Snowy — #FFFAFA
  • Белый — White — #FFFFFF
  • Белый антик — White antique — #FAEBD7
  • Белый навахо — White Navajo — #FFDEAD
  • Берлинская лазурь — Prussian blue — #003153
  • Бирюзово-голубой — Turquoise-blue Crayola — #77DDE7
  • Бирюзово-зеленый — Turquoise-green — #1E5945
  • Бирюзово-синий — Turquoise-blue — #3F888F
  • Бирюзовый — Turquoise — #30D5C8
  • Бисквитный — Biscuit — #FFE4C4
  • Бисмарк-фуриозо — Bismarck-Furioso — #A5260A
  • Бистр — Bistre — #3D2B1F
  • Бледно-васильковый — Pale cornflower blue — #ABCDEF
  • Бледно-желтый — Pale yellow — #FFDB8B
  • Бледно-зелено-серый — Pale green-grey — #8D917A
  • Бледно-зеленый — Pale green — #89AC76
  • Бледно-золотистый — Pale gold — #EEE8AA
  • Бледно-карминный — Pale Carmine — #B03F35
  • Бледно-каштановый — Pale chestnut — #DDADAF
  • Бледно-коричневый — Pale brown — #755C48
  • Бледно-песочный — Pale sand — #DABDAB
  • Бледно-пурпурный — Pale purple — #F984E5
  • Бледно-розоватый — Pale pinkish — #FFCBDB
  • Бледно-розовый — Pale pink — #FADADD
  • Бледно-синий — Pale blue — #AFEEEE
  • Бледно-фиолетовый — Pale purple — #957B8D
  • Бледный весенний бутон — Pale spring Bud — #ECEBBD
  • Бледный желто-зеленый — Pale yellow-green — #F0D698
  • Бледный желто-розовый — Pale yellow-pink — #FFC8A8
  • Бледный зеленовато-желтый — Pale greenish-yellow — #FFDF84
  • Бледный зеленый — Pale green — #98FB98

Инструмент для подбора цветовой гаммы сайта

Подробности
Категория: Инструменты вебмастера
Опубликовано 31.03.2011 17:09
Просмотров: 6034

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

Подбор цветовой гаммы сайта

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

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

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

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

К счастью, такие инструменты в Интернете есть. И их достаточно много. Перечислю некоторые из них:

http://kuler.adobe.com/ — Огромный набор готовых цветовых шаблонов (более 17 тысяч!), возможность их корректировки, создание темы из имеющегося изображения. Масса настроек и возможностей. Этот сайт от компании Adobe предоставляет мощный прецизионный инструментарий для разработчика.

http://www.colorotate.org/ — Готовые шаблоны (около 1000), возможность подбора по рисунку.

http://colorexplorer.com/ — Подбор цветов, цветовые библиотеки, подбор по рисунку.

http://colorschemedesigner.com/ — Полезный конструктор цветовых схем.

Но мне больше нравится простой и эффективный инструмент Color Wizard, который находится по адресу http://www.colorsontheweb.com/colorwizard.asp.

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

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

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

Красный – любовь, страсть, угроза, предупреждение, волнение, питание, импульс, действие, приключение.
Синий — надежность, успех, серьезность, спокойствие, власть, профессионализм.
Зеленый — деньги, природа, животные, здоровье, лечение, жизнь, гармония.
Оранжевый — комфорт, творчество, праздник, веселье, молодежь, доступность.
Фиолетовый — справедливость, двусмысленность, неопределенность, роскошь, фантазия, мечты.
Белый — невинность, чистота, простота.
Желтый — любопытство, игривость, веселье, развлечение.
Розовый — мягкость, сладость, невинность, молодость, нежность.

Коричневый — земля, природа, семейственность, простота.
Серый — нейтральность, безразличие, защищенность.
Черный — серьезность, тьма, тайна.

На сегодня всё. Если хотите, можете подписаться на ленту новостей на моем сайте. И тогда вы ничего не пропустите.


Интерьерное сочетание цветов, онлайн подбор программами

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


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

Источник вдохновения

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

Именно таким источником вдохновения является бесплатный онлайн ресурс IN COLOR BALANCE ( https://color.romanuke.com/ ). Здесь создана отменная коллекция невероятно красивых фото . К каждой фотографии добавлена подборка цветов, составляющих цветовую композицию.


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

Кради как художник

Это название известной книги Остина Клеона (https://austinkleon.com/steal/) . Основная мысль – ваш личный творческий подход к уже придуманным кем-то идеям, это тоже творчество. Оно дает прекрасные результаты.
Поэтому, почему бы не воспользоваться цветовой гаммой, которая уже придумана и используется с успехом крупными компаниями для своего продвижения.

Бесплатная программа BrandColors ( https://brandcolors.net/) предлагает более 500 цветовых схем, которые используют в своих логотипах известные мировые бренды. Тут же для вашего удобства приведены точные hex коды каждого цвета.

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

Выбор готовой палитры

Бесплатный онлайн подбор цветов, все палитры уже готовы, вы только выбираете. В программе ColorDrop (https://colordrop.io/ ) представлены очень удобные 4-х цветные палитры для различных целей. Палитры составлены специалистами по цветовому оформлению. Цвета обозначены в различных кодах, что дает больше возможности для подбора в компьютерной графике, художественной краски, строительной краски, цвета ткани, отделки, полиграфии.

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

Составление собственной палитры по фото

Если у вас есть фото интерьера, цветовую гамму которого вы хотите воспроизвести у себя дома, то сделать это просто. Загружаете любимое фото в программу COOLORS ( https://coolors.co/ ), которая быстро сгенерирует цветовую карту по изображению.
Нажимаете значок фотоаппарата, в окно грузите фото, или указываете ссылку, если фото размещено в интернете. После того, как фото появится на экране, визиром уточняете точки, откуда брать образец цвета.


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

Работать с цветом можно при помощи кнопок
— Alternative shades – оттенки цвета
— Drag – передвинуть цвет вправо или влево по палитре
— Adjust – настроить тон, насыщенность и яркость
— Lock – зафиксировать цвет.


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

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

30 цветовых палитр для веб-сайтов — выберите цвета для своего веб-сайта

Цвет — это первое, что люди замечают на вашем сайте. Начните с этих профессионально созданных цветовых комбинаций.

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

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

Как выбрать цвета для веб-сайта

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

При разработке веб-сайта придерживайтесь четырех или менее цветов. Изображение через Visual Generation.

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

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

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


Цветовые палитры для сайтов о здоровье и красоте

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

1. Аромат лаванды

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

Используйте холодные тона, чтобы придать дизайну безмятежность. Изображение предоставлено Эйрен Фагус.
2. Безмятежное небо

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

Не бойтесь черпать вдохновение в природе. Изображение предоставлено Тананья Пити.
3. Йога на открытом воздухе

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

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

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

Медовые тона придают веб-дизайну изысканность и гламур. Изображение предоставлено Ефетовой Анной.
5. Спа-центр

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

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

Цветовые палитры для предприятий по продаже продуктов питания и напитков

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

6. Яркая чаша

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

Пробуждает аппетит свежей зеленью и ярким цветом. Изображение предоставлено Тимолиной.
7. Звездный синий

Blueberries — настоящая звезда шоу. Глубокие синие и пурпурные тона этого универсального фрукта являются отличным источником вдохновения для магазинов напитков и кулинарных блогов.Палитра холодных тонов гармонична и радует глаз.

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

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

Ярко-оранжевый и успокаивающий синий — классическая привлекательная комбинация.Изображение предоставлено Kiian Oksana.
9. Насыщенный красный

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

Более мягкие красные тона обладают всей глубиной настоящего красного без какой-либо резкости. Изображение предоставлено Daxaio Productions.
10. Фермерский рынок

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

Цвета урожая вызывают ассоциации с пышными садами и фруктовыми садами. Изображение через marcin jucha и chelovector.

Цветовые палитры для сайтов блогов и портфолио

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

11. Работа с сеткой

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

Выбирайте цвета, которые дополняют вашу работу.Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через miniwide, GoodStudio, GoodStudio, Moremar, Ardea-studio, Lavrushka, GoodStudio и GoodStudio.
12. Красочная эстетика

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

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

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

Мягкие розово-розовые тона придают нотку женственности. Изображения через Юлию Завалишину, Серенко Наталью и босоточку.
14. Коралловая зелень

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

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

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

Простота тоже работает. Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через Mio Buono, Mio Buono, Mio Buono, Mio Buono, Mio Buono и createvil.

Цветовые палитры для экологических объектов

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

16. Зеленая красота

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

Теплые нейтральные и глубокие оттенки драгоценных камней передают изысканность и гармонию. Изображение предоставлено Абрамовой Александрой.
17. Рыба-клоун

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

Вызовите морскую жизнь с помощью насыщенного красно-оранжевого и темно-синего цветов. Изображение предоставлено J’nel.
18. Воздействие на океан

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

Черпайте вдохновение в самом море. Изображения через Mr.anaked и WindAwake.
19. Блестящие лилии

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

Яркие желтые и насыщенные зеленые цвета придают вашему сайту весеннюю свежесть. Изображение предоставлено ДЖУТАРАТ БУАДОК.
20. Амазонский тукан

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

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

Цветовые палитры для сайтов фитнеса и тренировок

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

21. Силовые тренировки

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

Спортивные синие и желтые цвета сделают ваш сайт ярким. Изображение через ColorMaker.
22. Тренажерный зал Excel

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

Темно-красный действует как мощный фоновый образ. Изображения через sportpoint и Alex_Colt.
23. Ряд мощности

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

Насыщенный розовый и желтый цвета согревают успокаивающий синий цвет. Изображение предоставлено Dmitrydesign.
24. Бесстрашный фитнес

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

Глубокий золотисто-желтый цвет выделяется на фоне теплых красных тонов. Изображения через Джейкоба Лунда и Зубдаша.
25. Поход в горы

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

Тренируйтесь и вдохновляйтесь на свежем воздухе. Изображение через everst.

Цветовые палитры для сайтов одежды и одежды

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

26. Яркая одежда

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

Значение цвета, Теория цвета и др.

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

Изображение обложки с vhpicstock.

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

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


Цветовая терминология

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

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

Цветовое колесо

Вы, наверное, видели цветовое колесо на уроках искусства или вспомнили знаменитую аббревиатуру «Рой Г. Бив», чтобы запомнить каждый цвет радуги. Цветовой круг — это иллюстративная диаграмма, которая показывает 12 цветов по кругу, которые используются для представления отношения каждого цвета друг к другу. Расположенные напротив друг друга цвета дополняют друг друга. Цвета, расположенные рядом с другими цветами, имеют общие характеристики и часто хорошо сочетаются друг с другом.

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

Изображение предоставлено aekikuis.

Основные цвета

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

Изображение предоставлено aekikuis.

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

Дополнительные цвета

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

Изображение предоставлено aekikuis.

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

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

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

Изображение предоставлено aekikuis.

Название каждого третичного цвета начинается с соседнего основного цвета в сочетании с соседним вторичным цветом.Вы никогда не увидите желто-зеленого названия; он всегда будет желто-зеленым.


Цветовые схемы

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

Приведенные ниже изображения цветовой палитры также можно найти в нашей 101 цветовой комбинации, вдохновленной изображениями из коллекции Shutterstock.

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

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

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

Изображение предоставлено Пативат Сариа.


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

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

Изображение с tofutyklein.


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

Аналогичные цвета — это группа из трех или четырех цветов, которые граничат друг с другом в цветовом круге. Слово «аналогичный» означает «тесно связанные», поэтому сочетание этих оттенков имеет гармоничную привлекательность, аналогичную монохроматическим цветовым схемам.

Изображение предоставлено aekikuis.

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

Изображение предоставлено Кеном Фунгом.


Дополнительные цвета

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

Изображение предоставлено aekikuis.

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

Изображение предоставлено casanisa.


Разделение дополнительных цветов

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

Изображение предоставлено aekikuis.

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

Изображение предоставлено Maciej Bledowski.


Двойные дополнительные (тетрадические) цвета

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

Изображение предоставлено aekikuis.

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

Изображение предоставлено leonori.


Триадные цвета

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

Изображение предоставлено aekikuis.

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

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

Изображение предоставлено alphaspirit.


Значение цвета и его влияние на брендинг

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

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

Теплые тона

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

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

Значение красного

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

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

Изображение предоставлено Гильманшином.

Значение апельсина

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

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

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

Изображения через Zamurovic Photography.

Значение желтого

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

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

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

Изображение предоставлено Gluiki.


Холодные цвета

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

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

Значение зеленого

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

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

Изображение с помощью FlashMovie.

Значение синего

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

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

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

Изображение взято с сайта marbleszone.com.

Значение фиолетового

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

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

Умиротворяющая и роскошная привлекательность

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

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

Таблица цветовых кодов HTML

HTML цветовых кодов и названий.

Палитра цветов HTML

Красный цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светлый лосось # FFA07A RGB (255,160,122)
лосось # FA8072 RGB (250,128,114)
темный лосось # E9967A RGB (233,150,122)
светло-коралловый # F08080 RGB (240,128,128)
индийский красный # CD5C5C RGB (205,92,92)
малиновый # DC143C RGB (220,20,60)
огнеупорный кирпич # B22222 RGB (178,34,34)
красный # FF0000 RGB (255,0,0)
темно-красный # 8B0000 RGB (139,0,0)

Оранжевый цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
коралловый # FF7F50 RGB (255,127,80)
помидор # FF6347 RGB (255,99,71)
оранжевый красный # FF4500 RGB (255,69,0)
золото # FFD700 RGB (255,215,0)
оранжевый # FFA500 RGB (255,165,0)
темно-оранжевый # FF8C00 RGB (255,140,0)

Желтые тона

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-желтый # FFFFE0 RGB (255,255,224)
лимонный шифон #FFFACD RGB (255,250,205)
светло-золотисто-желтый # FAFAD2 RGB (250,250,210)
papayawhip # FFEFD5 RGB (255 239 213)
мокасины # FFE4B5 RGB (255 228 181)
персиковый # FFDAB9 RGB (255 218 185)
палево-золотой # EEE8AA RGB (238,232,170)
хаки # F0E68C RGB (240,230,140)
даркхаки # BDB76B RGB (189 183 107)
желтый # FFFF00 RGB (255,255,0)

Зеленые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
зеленый # 7CFC00 RGB (124,252,0)
шартрез # 7FFF00 RGB (127,255,0)
зеленый лайм # 32CD32 RGB (50,205,50)
лайм # 00FF00 rgb (0.255,0)
лесозеленый # 228B22 RGB (34,139,34)
зеленый # 008000 RGB (0,128,0)
темно-зеленый # 006400 гб (0,100,0)
зелено-желтый # ADFF2F RGB (173,255,47)
желто-зеленый # 9ACD32 RGB (154,205,50)
весенне-зеленый # 00FF7F RGB (0,255,127)
средний весенний зеленый # 00FA9A RGB (0,250,154)
светло-зеленый # 90EE90 RGB (144 238 144)
бледно-зеленый # 98FB98 RGB (152 251 152)
темно-синий # 8FBC8F RGB (143 188 143)
средний зеленый # 3CB371 RGB (60,179,113)
Сигрин # 2E8B57 RGB (46,139,87)
оливковый # 808000 RGB (128,128,0)
темно-оливковый, зеленый # 556B2F RGB (85,107,47)
Olivedrab # 6B8E23 RGB (107,142,35)

Голубые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-голубой # E0FFFF RGB (224,255,255)
голубой # 00FFFF RGB (0,255,255)
аква # 00FFFF RGB (0,255,255)
aqu

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

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

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

12 лучших палитр цветов и инструментов для дизайнеров

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

1. Удлинитель хромированной пипетки ColorPick

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

ColorPick позволяет найти шестнадцатеричный цветовой код любого элемента.

2. ColorSnapper 2

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

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

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

3. Расширение Webflow для Chrome

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

Под рукой, правда?

Генераторы цветовых схем и палитр
Генераторы палитры

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

На самом деле выбрать цвета бывает непросто — к счастью, есть инструменты, которые помогут нам в этом!

4. Счастливые оттенки

Созданный полностью в Webflow никем иным, как Маккензи Чайлд, Happy Hues предлагает вам различные цветовые палитры для вдохновения и показывает реальные примеры того, как эти цвета могут быть использованы в профессиональном дизайне.

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

5. Цвет

Генератор образцов

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

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

Coolors позволяет легко подобрать и уточнить вашу палитру.

Coolors — еще один популярный генератор палитр. Вы можете выбрать любой цвет и, исходя из выбранного цвета, создать подходящую цветовую схему для любого дизайн-проекта.Хотя (немного) менее интуитивно понятный, чем Color (отсюда и лишнее o), Coolors позволяет экспортировать, хранить и повторно использовать вашу палитру в таких инструментах, как Adobe. У Coolors также есть мобильное приложение, поэтому вы можете просматривать и изменять цвета из любого места.

7. LOLColors

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

8. Цветовой круг бренда

Цветовое колесо

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

Цветное вдохновение

Благодаря достижениям в области HTML и CSS дизайнеры теперь могут в полной мере использовать красочные градиенты в Интернете, не беспокоясь о создании тяжелых изображений или написании сложного кода.Единственная проблема сейчас — попытаться сузить круг выбора!

Следующие четыре инструмента — это наш лучший выбор для выбора цветовой палитры.

9. CSS Градиент

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

10.Adobe Capture CC

Цветовые палитры, созданные пользователем в Adobe Color.

Какой лучший способ черпать вдохновение в цветах, чем окружающий нас мир? Экосистема Adobe Color имеет ряд ресурсов (включая генератор образцов), но чаще всего я использую их приложение для iOS, Adobe Capture CC.

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

11. Colormind

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

12. Раскрашиваемый

Разработанный Jxnblk, Colorable позволяет веб-дизайнерам и дизайнерам печати легко тестировать различные цветовые комбинации, используя их шестнадцатеричные коды.Легко настраивайте значения RGB и HSV для точной настройки цветов. Сайт чрезвычайно прост в использовании: просто добавьте шестнадцатеричное значение для двух цветов, и система оценит комбинацию на основе рекомендаций WCAG по доступности. Этот рейтинг гарантирует, что дальтоники или слабовидящие пользователи смогут читать дизайн с этими двумя цветами.

Этот сайт — один из наших нынешних фаворитов — он ставит доступность во главу угла своих рекомендаций.

Это лишь некоторые из инструментов цвета, которые мы используем каждый день. Сообщите нам, какие инструменты вы используете в Twitter или Facebook.

.
Comments