Палитры сочетания: Подбираем цветовую палитру

Содержание

восемь правил подбора цветовой палитры, которые должны знать все / Хабр

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

Pierre Bonnard

: «Цвет не просто делает дизайн приятным для глаз, но и подкрепляет его».

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



1. Ограничьте количество цветов

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

исследования от специалистов из Торонтского университета

, посвященного тому, как люди пользуются

Adobe Color CC

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

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

Как выстроить палитру

Но как выбрать эти два-три цвета? Тут вам поможет цветовой круг.

Такой круг из 12 цветов — один из основных материалов для составления палитры.

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

— Одноцветные палитры

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

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

— Палитры из родственных цветов

Родственные цвета — это те, которые располагаются рядом друг с другом на круге.

Такие гаммы строятся на базе родственных цветов: один из них становится опорным, а остальные используются, чтобы обогатить палитру. Здесь все тоже достаточно просто, но фокус заключается в том, чтобы правильно выбрать яркость используемых цветов — она будет задавать тон для всей гаммы. Например, Clear, утилита для организации списка дел с жестовым управлением, использует кричащие цвета, чтобы визуально привлечь внимание к тем задачам, которые пользователь выполняет в данный момент. Напротив, в приложении для медитации Calm предпочтение отдается паре родственных цветов «синий+зеленый», чтобы создать у пользователей ощущение покоя и умиротворения.

— Палитры из комплементарных цветов

Используя комплементарные (противоположные) цвета, вы легко можете визуально выделить элемент.

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

— Кастомизированные палитры

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

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

2. Черпайте вдохновение в природе

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


Природа создает лучшие сочетания цветов. Из этой фотографии может получиться отличная цветовая схема.

3. Старайтесь придерживаться пропорции 6/3/1

При составлении палитры вам также пригодится вечно актуальное правило от дизайнеров интерьеров: пропорция 6/3/1 позволяет создать идеальный баланс цветов в любом пространстве.

Воплотить эту концепцию в реальность очень просто: ваш опорный цвет должен занимать 60% процентов, дополнительный — 30%, а 10% отводится на акценты. Основная идея состоит в том, что дополнительный цвет должен служить поддержкой для основного, но при этом быть легко различимым на его фоне. На цвет для визуального выделения отдельных областей приходится 10% экрана — можете использовать его для призыва к действию или же любого другого элемента.


4. Сначала проектируйте в черно-белой гамме

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

Вводите цвет в последнюю очередь и очень целенаправленно.


Яркое пятно на сером фоне — простой и эффективный способ направить взгляд на нужный объект.

5. Избегайте черного цвета

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

Если добавить в ваш комплект тщательно отобранных цветов черный, он «задавит» собой все остальные. Он так сильно бросается в глаза именно потому, что не воспринимается как естественный. Многие приложения, которыми мы пользуемся изо дня в день, добавляют в интерфейс якобы черные цвета, которые на самом деле темно-серые. Например, самый темный цвет в верхней панели приложения Asos — не #000000, а #242424. Так что не забывайте регулировать насыщенность.


6. Выстраивайте визуальную иерархию при помощи контраста

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


Благодаря контрасту одна область экрана заметно отличается от остальных.

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

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

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

Красный, Оранжевый, Желтый

Красный

(страсть, сила, опасность, значимость): Красный — очень стимулирующий цвет. Он оставляет ощущение скорости и силы и ассоциируется с энергией. Уже доказано, что он влияет на нас даже на физиологическом уровне,

ускоряя метаболизм и кровообращение

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

Оранжевый (озорной, бодрый, привлекательный, дешевый): Оранжевый — теплый и яркий цвет. Он создает атмосферу бодрости и навевает на пользователей чувство тепла и уюта. Некоторые исследователи утверждают, что оранжевый выражает идею дешевизны.

Желтый (веселый, приветливый, стимулирующий, привлекает внимание): Желтый — крайне разносторонний цвет, который объединяет в себе оттенки с разными значениями. Так, светло-желтый ассоциируется с солнцем, то есть с чем-то позитивным и дружелюбным. Более насыщенные тона оставляют впечатление древних времен и монументальности. Их часто применяют, когда нужно показать что-то незыблемым и мудрым.


Зеленый, Синий, Фиолетовый

Зеленый

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

Синий (спокойный, ответственный, заслуживающий доверия, надежный): Синий цвет обычно ассоциируется с чувствами покоя и умиротворения, а также с силой и надежностью, что в общем дает ощущение профессионализма и возбуждает доверие. Синий внушает нам, что мы в безопасности. По этой причине его активно используют банки и IT-компании. У многих титанов на рынке социальных сетей (Facebook, Twitter, LinkedIn) в интерфейсе также фигурирует синий.

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


Розовый, Черный, Белый, Серый

Розовый

(женственность, невинность, юность): Наиболее широко известная ассоциация с розовым цветом — это женственность.

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

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

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

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

Symbolism Of Colors And Color Meanings Around The World

.

8. Сделайте дизайн доступным

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

Не используйте цвет в качестве единственного индикатора

Примерно 8% мужчин и 0.5% женщин

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


Слева направо: цветовой круг глазами обычного человека — Цветовой круг глазами человека с дейтеранопическим типом дальтонизма — Цветовой круг глазами человека с протанопическим типом дальтонизма.

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


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

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


Низкая контрастность может стать смертельным ударом для юзабилити.

Отслеживайте контрастность, чтобы быть уверенными, что цвет текста будет в достаточной степени выделяться относительно фонового цвета и даже человек с дальтонизмом или очень слабым зрением сможет различать слова. Коэффициент контраста — это математическое выражение того, насколько один цвет отличается от другого (обычно он записывается так: 1:1, 21:1). Чем больше разница между числами, тем сильнее цвета отличаются по яркости. На W3C рекомендуют следующие соотношения между яркостью текста и изображений:

  • Если текст мелкий, соотношение должно быть не меньше 4.5:1;
  • Для крупного текста (то есть 14 pt и выше для жирного шрифта, 18 pt и выше — для обычного) оптимально соотношение 3:1 и больше.

Но есть хорошая новость: вам не придется проверять все вручную. При помощи

Color Contrast Checker

рассчитать коэффициент можно в несколько кликов.


Бонус: Инструменты, необходимые для UX дизайнера

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

Adobe Color CC
Adobe Color CC (раннее известный как Kuler) — отличное решение, чтобы находить, редактировать и создавать палитры. Вы можете модифицировать каждый цвет, входящий в состав гаммы, или устанавливать его в качестве опорного буквально в пару кликов. Готовые палитры можно сохранять и добавлять в библиотеку; кроме того, в открытом доступе на сайте находится большое количество цветовых гамм, созданных другими членами сообщества.


Dribbble Search-by-color

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

dribbble.com/colors

и выберите нужный оттенок.


Material Design

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


Colorzilla

Colorzilla — расширение для браузеров Google Chrome и Mozilla Firefox, которое включает целую кучу инструментов для работы с цветом, включая пипетку с возможностью захвата цвета, генератор градиентов CSS и функцию просмотра палитр.


Coolors.co

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

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


Симулятор дальтонизма в Adobe Photoshop

Photoshop позволяет проверить, насколько ваш дизайн универсально доступен. Достаточно перейти на вкладку View > Proof Setup и выбрать интересующий ваш тип (Protanopia type или Deuteranopia type).


NoCoffee Vision Simulator for Chrome

Чтобы удостовериться, что ваш дизайн доступен для всех, неплохо бы на себе испытать дальтонизм в процессе проектирования. NoCoffee Vision Simulator обеспечивает возможность создать для любого интерфейса симуляцию, показывающую, как она выглядит для людей с цветовой слепотой или слабым зрением. Например, применив фильтр «Deuteranopia» во вкладке «Color Deficiency», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.

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

50 идей от лучших дизайнеров

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

Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших! 

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

 

Цвета для сайта: 50 палитр

1. Active Theory

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

#E27D60 – #85DCB – #E8A87C – #C38D9E – #41B3A3

2. Paypr

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

#242582 – #553D67 – #F64C72 – #99738E – #2F2FA2

3. Resn

Цветовая палитра выглядит очень естественно. Идеально подойдет для сайтов, связанных с природой и “зеленой” тематикой. 

#8D8741 – #659DBD – #DAAD86 – #BC986A – #FBEEC1

4. Grosse Lanterne

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

#05386B – #379683 – #5CDB95 – #8EE4AF – #EDF5E1

5. W&CO

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

we

6. Stinkdigital

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

#8EE4AF – #EDF5E1 – #5CDB95 – #907163 – #379683

7. Bordel Studio

Элегантная палитра объединяет темные приглушенные оттенки и создает утонченный дизайн. 

#5D5C61 – #379683 – #7395AE – #557A95 – #B1A296

8. ReedBe

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

#2E1114 – #501B1D – #64485C – #83677B – #ADADAD

9. Samsy

Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года. 

#0C0032 – #190061 – #240090 – #3500D3 – #282828

10. Bryan James

Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом. Лаконичная гамма.

#1A1A1D – #4E4E50 – #6F2232 – #950740 – #C3073F

11. Anton & Irene

Это красивое сочетание розового, салатового и серого идеально подойдет для создания яркого и располагающего к себе дизайна.            

#E7717D – #C2CAD0 – #C2B9B0 – #7E685A – #AFD275

12. Bert

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

читать 2 м.#0B0C10 – #1F2833 – #C5C6C7 – #66FCF1 – #45A29E

13. BrightMedia 

В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа. Выбор дизайнера.

#5D001E – #E3E2DF – #E3AFBC – #9A1750 – #EE4C7C

14. Julie Flogeac

Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.

#D79922 – #EFE2BA – #F13C20 – #4056A1 – #C5CBE3

15. Epic

Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко. 

#EDC7B7 – #EEE2DC – #BAB2B5 – #123C69 – #AC3B61

16. MediaMonks

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

#2C3531 – #116466 – #D9B08C – #FFCB9A – #D1E8E2

17. eDesign Interactive

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

#272727 – #747474 – #FF652F – #FFE400 – #14A76C

18. HAUS

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

#2F4454 – #2E151B – #DA7B93 – #376E6F – #1C3334

19. Gusto Ids

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

#EAE7DC – #D8C3A5 – #8E8D8A – #E98074 – #E85A4F

20. FCINQ

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

#D83F87 – #2A1B3D – #44318D – #E98074 – #A4B3B6

21. Change Digital

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

#5680E9 – #84CEEB – #5AB9EA – #C1C8E4 – #8860D0

22. Watson/DG

Если вы ищете более классический бизнес-вариант, обратите внимание на эту сдержанную палитру для web-проекта. 

#88BDBC – #254E58 – #112D32 – #4F4A41 – #6E6658

23. Supremo  

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

#25274D – #464866 – #AAABB8 – #2E9CCA – #29648A

24. Umwelt A/S

Эта простая, но эффективная комбинация выглядит профессионально и стильно. 

#17252A – #2B7A78 – #3AAFA9 – #DEF2F1 – #FEFFFF

25. Waaark           

Яркая и элегантная цветовая гамма сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.  

#F8E9A1 – #F76C6C – #A8D0E6 – #374785 – #24305E

26. Five Hundred 

Игривая и полная жизни палитра отлично дополнит смелые проекты.

#A64AC9 – #FCCD04 – #FFB48F – #F5E6CC – #17E9E0

27. Immersive Garden

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

#61892F – #86C232 – #222629 – #474B4F – #6B6E70

28. SMFB

Здесь яркий акцентный желтый эффективно привлекает и направляет внимание пользователей. 

#FAED26 – #46344E – #5A5560 – #9D8D8F – #9B786F

29. Nurture Digital 

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

#182628 – #65CCB8 – #57BA98 – #3B945E – #F2F2F2

30. Born05

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

#687864 – #31708E – #5085A5 – #8FC1E3 – #F7F9FB

31. Stinkdigital

Красивый яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости. 

#A1C3D1 – #B39BC8 – #F0EBF4 – #F172A1 – #E64398

32. AILOVE

Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание. 

#59253A – #78244C – #895061 – #0677A1 – #2D4159

33. Superhero Cheesecake

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

#1F2605 – #1F6521 – #53900F – #A4A71E – #D6CE15

34. Burocratik

Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.

#10E7DC – #0074E1 – #1B9CE5 – #6CDAEE – #F79E02

35. Google Brand Studio

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

#4285F4 – #5C2018 – #BC4639 – #D4A59A – #F3E0DC

36. Details

Неожиданное и современное решение поможет любому web-сайту стать лучшим в своей нише.

#080F5B – #0D19A3 – #15DB95 – #F4E4C1 – #E4C580

37. Cher Ami

Энергичная и оптимистичная палитра создана для ярких проектов.

#FBE8A6 – #F4976C – #303C6C – #B4DFE5 – #D2FDFF

38. Leavingstone

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

#B23850 – #3B8BEB – #E7E3D4 – #C4DBF6 – #8590AA

39. Elespacio

Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм. 

#F78888 – #F3D250 – #ECECEC – #90CCF4 – #5DA2D5

40. SFCD  

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

#19181A – #479761 – #CEBC81 – #A16E83 – #B19F9E

41. Great Works Copenhagen

Бесстрашное сочетание оттенков синего и красного подчеркнет профессионализм и силу проекта. 

#314455 – #644E5B – #9E5A63 – #C96567 – #97AABD

42. Resn

Красивый плоский дизайн в современном небанальном исполнении.

#00887A – #FFCCBC – #FFFFFF – #D3E3FC – #77A6F7

43. Play

Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный выбор цвета для бизнеса в сфере HoReCa.  

#844D36 – #474853 – #86B3D1 – #AAA0A0 – #8E8268

44. details.ch

Утонченная и классическая палитра с современными нотками, подчеркнет серьезность и актуальность проекта.

#5F6366 – #4D6D9A – #86B3D1 – #99CED3 – #EDB5BF

45. stinkdigital

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

#802BB1 – #2D283E – #564F6F – #4C495D – #D1D7E0

46. EPIC

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

#265077 – #022140 – #494B68 – #1E4258 – #2D5F5D

47. Apart

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

#806543 – #33266E – #111111 – #542F34 – #A6607C

48. FUTURAMO

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

#501F3A – #CB2D6F – #CCCCCC – #14A098 – #0F292F

49. Panic

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

#C34271 – #F070A1 – #16FFBD – #12C998 – #439F76

50. madeo

Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.

#026670 – #9FEDD7 – #FEF9C7 – #FCE181 – #EDEAE5

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

И снова о цвете. Сочетания и ограничения палитры. Тема 11

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

 

Это два “более/менее” противоположных цвета. Почему более/менее?

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

 

Кстати, эта пара-самое распространённое сочетание для городских пейзажей.

 

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

 

В идеале охра ещё и светлая по тону, а фиолетовый тёмный.

Тогда получается два контраста:контраст цвета и контраст тона(про тон поговорим на следующей неделе).

 

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

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

 

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

 

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

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

 

И! Таким способом я вижу всю колористику работы и могу сразу не брать какие-то сочетания,если они мне не нравятся.

 

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

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

обзор 4 лучших приложений для смартфона

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

Палитра цвета в интерьере

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

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

SHÄDZ 

Новое приложение от создателя довольно известного SwatchMatch. Очень простое: вам не нужно даже заранее делать снимок, вы просто наводите камеру телефона на любой объект, и приложение в зависимости от настроек либо определяет один цвет, либо составляет палитру на основе изображения. Палитру можно редактировать, добавляя или убирая отдельные цвета, а также сохранять или делиться ею. Наша любимая фишка — «совет от гения»: если вы с помощью приложения выбираете отдельный цвет, оно предлагает несколько палитр, созданных на основе картин великих мастеров, где интересующий вас цвет доминирует. 

Особенность: «дополненная реальность». 

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

Рейтинг у приложения довольно хороший: «Сфотографировала бочок своей кошки и сделала спальню в этих цветах)) Очень понравилось!», — написала пользовательница Татьяна.

Особенность: гибкое редактирование палитры.

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

Особенность: «примерка» цвета на интерьер.

Color Capture 

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

Особенность: создает красивые свотчи из трех цветов. 

 

Читайте также:

 

цвет, приложения, программы, ремонт, DIY

Какие наиболее лучшие сочетания цветов. Цветовой круг. Палитра цветов

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

Удивительные свойства цвета

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

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

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

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

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

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

Терминология

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

  • цветовой тон – синоним цвета и традиционно относится к одному из 12 цветов;
  • яркость: степень удаленности цветового тона от черного цвета;
  • светлота: близость тона к белому цвету;
  • насыщенность – интенсивность или чистота цвета (чем ближе оттенок приближается к серому, тем менее он насыщен).

Лучшие сочетания цветов

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

1. Монохромная схема: использование различной яркости, светлоты или насыщенности тонов одного цвета в диапазоне от светлого до темного. Пример удачного монохромного сочетания – красный с черным и белым. Эта схема обеспечивает тонкий и консервативный дизайн. Синий с белым – классическая комбинация китайского фарфора IX в. и французского текстиля XVIII в.

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

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

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

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

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

Вдохновение

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

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

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

Психология цвета

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

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

Красный

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

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

В брендинге: часто обозначает силу, уверенность и власть и является очень заметным.

Оранжевый

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

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

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

Желтый

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

Альтернативные значения: в некоторых восточных и азиатских культурах желтый ассоциируется с высоким происхождением или статусом. В некоторых частях Африки и Латинской Америки этот тон является традиционным цветом траура.

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

Зеленый

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

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

В брендинге: бренды или товары, представляемые как «зеленые» (натуральные, здоровые, экологически чистые, органические и т. д.), часто используют природные цвета, такие как зеленый и коричневый.

Голубой

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

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

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

Фиолетовый

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

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

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

Черный

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

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

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

Белый

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

Альтернативные значения: в Китае белый – цвет траура. Во многих культурах он обозначает мир – белый флаг является универсальным символом перемирия или капитуляции.

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

Цвет в дизайне

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

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

Общепринятым правилом использования основной трехцветной палитры является правило «60-30-10». Такой подход часто используется в оформлении интерьеров, но также может эффективно применяться и для веб-дизайна или печати. Достаточно уделить доминирующему цвету 60 %, а двум акцентам отдать оставшиеся 30 % и 10 %. Хорошим примером, поясняющим это правило, является мужской костюм: на пиджак и брюки приходится 60 % цвета одежды, рубашка занимает 30 %, а галстук – оставшиеся 10 %. Все вместе обеспечивает сбалансированную, элегантную внешность.

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

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

Исследование, проведенное в Университете Виннипега, показало, что первоначальные суждения людей о продукции в значительной степени основаны на цвете (60–90 % оценки). Это означает, что тон в дизайне – не только художественный выбор, но и важнейшее бизнес-решение, которое затрагивает все – от восприятия потребителями бренда до реализации продукции.

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

RGB против CMYK

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

По этой причине им необходим инструмент, обеспечивающий стабильный цвет при работе с обеими системами – например, при разработке логотипа для веб-сайта и его печати на визитке. Одной из таких систем является Pantone Matching System (PMS). В ней тона могут быть сопоставлены для веб-сайтов и печати (а также для различных типов печатных поверхностей), чтобы обеспечить одинаковый вид.

Цвет: понять, исследовать и любить его!

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

Цвет: как выбрать палитру для своей игры

[pullquote align=right]
Даг Сюарт из Kongregate рассказал о том, как цвет может определить вашу игру и как с ним лучше работать.
[/pullquote]

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

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

Краткий обзор теории цвета

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

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

Выбор цветовой гаммы

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

Теплые тона:

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

Холодные тона:

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

Вестерн/антиутопия:

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

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

Нуар/киберпанк:

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

Например, в Far Cry: Blood Dragon мир в основном окрашен в темно-синие и темно-фиолетовые тона. Яркий неоновый свет обозначает важные локации и опасных существ, чтобы привлечь вас или предупредить.

Монохромная/ограниченная палитра:

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

Создайте свою тему и разрушьте несколько правил

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

Некоторые способы использования цвета

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

Ориентирование

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

Вы можете сделать контрастными только самые важные объекты, как в игре Super Hot!, оставив всё остальное обесцвеченным. Это привлекает все внимание к ключевым объектам значительнее, чем низкоконтрастная палитра.

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

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

Сообщение об опасности и безопасности

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

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

История и развитие героя

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

Инструменты и хитрости для создания ваших палитр

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

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

Adobe Color и Coolors

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

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

Paletton

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

Accessible Color Matrix

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

Другие источники вдохновения

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

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

Цвет в фильмах

Если вы нашли опечатку – выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected]

Коллекция цветовых сочетаний Tikkurila | Roomcolor

Подберите цвет вашей комнаты!

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

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

Как пользоваться

  • 1Выберите палитру
  • 2 Выберите комнату (спальня, кухня и т. д.)
  • 3Выберите цвет (прямоугольник)
  • 4Нажмите на стену
  • Используйте семейства цветов (кружки) для более удобного перемещения к желаемому оттенку.
  • Если вы уже знаете номер цвета, можете найти его через строку поиска.
  • Вы можете поделиться результатом через мессенджеры.

Важная информация:

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

12 лучших цветовых палитр для веб-дизайна адвоката

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

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

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

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

Вот некоторые из наших любимых:

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

Красная цветовая палитра — еще один распространенный выбор для адвокатов. Эти красные дают ощущение традиции, силы и профессионализма.

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

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

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

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

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

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

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

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

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

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

 

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

цветовых палитр | Атласный лед

ПОМАДА 101

ПАЛИТРЫ СМЕШИВАНИЯ ЦВЕТОВ

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

Бабье лето
  • папоротник

    8 частей Зеленый

    8 частей Белый

    3 части Фиолетовый

  • Туман

    9 частей Белый

    4 детали Синий

    4 детали Зеленый

  • Октябрьское небо

    9 частей Оранжевый

    7 частей Красный

    2 детали Черный

  • Мама

    9 частей Желтый

    6 частей оранжевый

  • Ревень

    9 частей Красный

    6 частей Фиолетовый

  • шелуха

    9 частей Белый

    7 частей Желтый

    3 части оранжевый

Любимые принцессы
  • мечтательный розовый

    9 частей Розовый

    6 частей Красный

    3 части Фиолетовый

  • Чувство смелости

    9 частей Синий

    6 частей Зеленый

    5 частей Черный

  • Золотая красавица

    9 частей Белый

    7 частей Желтый

  • Грива русалки

    9 частей Красный

    7 частей Оранжевый

  • Снежная королева

    9 частей Белый

    4 детали Синий

    3 части Зеленый

  • Запутался

    9 частей Белый

    8 частей Розовый

    5 частей Фиолетовый

Набор закусок для игрового дня
  • Зеленая богиня

    9 частей Белый

    5 частей Желтый

    5 частей Зеленый

  • Пепперони

    9 частей оранжевый

    6 частей Красный

    5 частей Черный

  • Халапеньо

    9 частей Белый

    5 частей Зеленый

  • Пиво

    9 частей Белый

    3 части Желтый

    5 частей Оранжевый

  • чили

    8 частей Красный

    8 частей Черный

    7 частей Оранжевый

  • Крыло Баффало

    8 частей оранжевый

    7 частей Желтый

    7 частей Белый

Букет свадебных цветов
  • Калла Лили

    9 частей Белый

    4 детали Желтый

    3 части шоколада

  • персиковая роза

    9 частей Белый

    5 частей Розовый

    5 частей Оранжевый

  • Желтый тюльпан

    9 частей Желтый

    7 частей Белый

  • Пион

    8 частей Розовый

    7 частей Белый

    4 части Фиолетовый

  • Гербер Дейзи

    8 частей Красный

    6 частей Желтый

  • Гортензия

    8 частей Фиолетовый

    6 частей Бирюзовый

    6 частей Белый

Драгоценные тона
  • Топаз

    9 частей оранжевый

    5 частей Красный

  • Королевский розовый

    9 частей Красный

    4 части Фиолетовый

  • Рубиново-красный

    9 частей Красный

    6 частей Фиолетовый

  • Изумруд

    9 частей Зеленый

    7 частей Синий

  • павлин

    7 частей Синий

    7 частей Бирюзовый

  • Глубокий сапфир

    9 частей Синий

    7 частей Фиолетовый

    4 детали Черный

Весна витает в воздухе
  • цыпленок

    9 частей Белый

    8 частей Желтый

  • Весенний рассвет

    9 частей Желтый

    7 частей Оранжевый

  • Яйцо Робина

    9 частей Белый

    5 частей Синий

  • Свежая трава

    8 частей Зеленый

    8 частей ярко-зеленый

  • вишня в цвету

    9 частей Белый

    5 частей Розовый

    4 части шоколада

  • Апрельский душ

    6 частей Белый

    4 части Фиолетовый

    4 части Розовый

Однажды на свадьбе
  • Что-то голубое

    9 частей Белый

    2 части Синий

  • Античный белый

    9 частей Белый

    2 части шоколада

  • Жемчужная нить

    7 частей Белый

    3 части Желтый

    2 части шоколада

  • тост за пару

    9 частей Белый

    4 детали Желтый

    4 части оранжевый

  • Краснеющая невеста

    9 частей Белый

    3 части Розовый

  • Мягкое розовое золото

    9 частей Белый

    4 части Розовый

    3 части шоколада

Коллекция Валентина
  • румяна розовый

    9 частей Белый

    4 части Розовый

  • Фиолетовый

    4 части Фиолетовый

    6 частей Белый

    5 частей Розовый

  • Гвоздика розовая

    9 частей Розовый

    4 части Фиолетовый

  • Будь моим красным

    7 частей Красный

    7 частей Белый

  • Красная роза

    9 частей Красный

    5 частей Фиолетовый

  • Алый Красный

    8 частей Красный

    6 частей Фиолетовый

Коллекция «Зимний праздник»
  • Сосна

    6 частей Зеленый

    5 частей Синий

    5 частей Красный

  • Санта Красный

    7 частей Красный

    5 частей Фиолетовый

  • Золотая Звезда

    7 частей Желтый

    4 части оранжевый

    4 части шоколада

  • Эг-ног

    8 частей Белый

    5 частей Желтый

    3 части шоколада

  • Зимний синий

    9 частей Белый

    4 детали Синий

  • Серебряный колокольчик

    7 частей Белый

    2 части Синий

Осенняя коллекция
  • Горчица

    7 частей Желтый

    5 частей Оранжевый

  • тыква

    7 частей Оранжевый

    4 части шоколада

  • Клюква

    8 частей Красный

    5 частей Зеленый

  • Баклажан

    3 части Фиолетовый

    6 частей Красный

    6 частей Белый

  • Мудрец

    7 частей Желтый

    6 частей Зеленый

    5 частей Оранжевый

  • Карамель

    7 частей Белый

    5 частей шоколада

    5 частей Красный

Обратите внимание, : Используйте эту таблицу цветов только для справки.Цвета на экране могут отображаться по-разному на каждом мониторе. Помощь с палитрами цветовых сочетаний предоставлена ​​художником передового опыта Сатико Виндбил из Mimicafe Union и Лиз Шим из Eat Cake Be Merry.

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

ПРИМЕЧАНИЕ: OMNISCI IS NOW HEAVY.AI

Рассказывать убедительные истории с помощью данных может быть довольно сложно.

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

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

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

В этом посте рассказывается следующее:

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

Типы цветовых палитр


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

  • категории
  • последовательный
  • Расходящиеся
  • Расходящиеся



8 категориальные
категориальные (цветные набор 2) Цвета, представляющие типы столкновений на дату

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

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

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

1.Retro Metro (по умолчанию)

2. Dutch Field


3. River Nights

4. Spring Pastels

Добавьте эти цветовые палитры к категориальным цветам и наборам цветов 1 и 2 в цветах панели настроек пользовательского интерфейса Immerse. (см. Добавление цветов и палитр на панель инструментов Immerse далее в этом посте).

Последовательный


Последовательная (количественная) цветовая палитра, представляющая столкновения по дням и часам

Применяйте последовательную цветовую палитру, когда переменная является числовой или имеет естественно упорядоченные значения.Например, на тепловой карте «Столкновения по дням и часам» выше количество столкновений последовательно упорядочено от наименьшего (синий цвет) к наибольшему (желтый цвет).

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

5. От синего до желтого (по умолчанию)


6.От серого к красному

7. От черного к розовому

8. Синий

Добавьте эти цветовые палитры к непрерывным цветам в разделе цветов панели настроек Immerse UI (см. Добавление цветов и палитр на панель Immerse Dashboard далее в этом сообщении). ).

Расходящиеся

Расходящиеся (количественные) цветовые палитры, представляющие
Процентное изменение с течением времени и объекты, подверженные риску затопления по округам в 2050 году


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

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

9. От синего до красного (по умолчанию)

10. От оранжевого до фиолетового

11. Розовая пена

Раздел цветов панели настроек пользовательского интерфейса (см. Добавление цветов и палитр на панель управления Immerse далее в этом посте).

Добавление цветов и палитр на панель мониторинга Immerse

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

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

Доступ к панели настроек пользовательского интерфейса

Раздел цветовой палитры панели настроек пользовательского интерфейса состоит из четырех подразделов.

  • Набор цветов 1
  • Набор цветов 2
  • Категориальные цвета
  • Непрерывные цвета
Раздел цветовой палитры на панели настроек пользовательского интерфейса , добавьте шестнадцатеричное значение цвета и щелкните значок «Сохранить», чтобы добавить цвет.

Набор цветов 1 или 2 добавить, отредактировать или удалить

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

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

Щелкните раскрывающийся список, чтобы просмотреть доступные палитры и параметры для добавления, редактирования или удаления. Каждая палитра должна содержать от 2 до 10 цветов.

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

Щелкните палитру, чтобы добавить, изменить или удалить цвета, как мы делали это для набора цветов 1 и 2. новые цвета в вашем распоряжении.

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

Попробуйте сами сегодня: загрузите OmniSci Free, полнофункциональную версию, доступную для бесплатного использования.

Какие цвета и палитры вы планируете добавить в Immerse? Поделитесь ими и любыми визуализациями, которые вы создаете, с нами через LinkedIn, Twitter или наши форумы сообщества.

Красный, белый и синий. Семь правил о цветовых палитрах, которые… | by Nick Babich

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

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

Применение цвета в дизайн-проекте во многом связано с балансом. Чем больше цветов вы используете, тем сложнее достичь баланса. Вы получите лучшие результаты, если будете придерживаться максимум из 3 основных цветов в своей цветовой схеме.Согласно исследованию Университета Торонто о том, как люди использовали Adobe Color CC, большинство людей сказали, что предпочитают простые цветовые комбинации, основанные только на двух или трех цветах.

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

Как создать схему

Так как же выбрать эти два или три цвета? Цветовой круг может помочь.

12-цветный круг — важный инструмент для создания цветовых схем

Существует ряд предустановленных стандартов цветовых схем, упрощающих создание новых схем, особенно для начинающих:

  • Монохроматическая . Монохроматические схемы проще всего создать, поскольку все они берутся из одного цвета, но включают различные оттенки, оттенки и тона. Монохроматические цвета хорошо сочетаются друг с другом, создавая успокаивающий эффект.
Монохроматическая схема очень приятна для глаз (особенно синие или зеленые оттенки). Как вы можете видеть в этом примере с Facebook, схема выглядит чистой и элегантной.
  • Аналог . Аналогичные цветовые схемы создаются из родственных цветов; один цвет используется в качестве доминирующего цвета, в то время как другие используются для обогащения схемы.Хотя это относительно легко осуществить, хитрость заключается в том, чтобы определить яркость цветов, которые вы используете, так как вся схема будет преувеличена. Например, приложение Clear, управляемое жестами, использует яркие аналогичные цвета для визуального определения приоритетов вашего текущего набора задач. В то время как Calm, приложение для медитации, использует аналогичные цвета синий и зеленый, чтобы помочь пользователям чувствовать себя расслабленными и умиротворенными.
Аналогичные схемы создаются с использованием трех цветов, расположенных рядом друг с другом на цветовом круге с 12 спицами.Clear, управляемое жестами приложение для ведения дел, использует яркие и энергичные аналогичные цвета, чтобы визуально расставить приоритеты в текущем наборе задач. Calm использует аналогичные цвета для создания общего настроения.
  • Дополнительный. В своей основной форме эти схемы состоят только из двух сильно контрастирующих цветов. Эта схема используется для привлечения внимания зрителя. При использовании дополнительной схемы важно выбрать доминирующий цвет и использовать его дополнительный цвет для акцентов. Например, когда человеческий глаз видит объект, полный различных видов зелени, немного красного будет очень хорошо выделяться.
Использование дополнительных цветов — самый простой способ выделить что-либо.
  • Пользовательский. Создать собственную цветовую схему не так сложно, как многие думают. Есть простой трюк, который вы можете использовать для создания отличной цветовой палитры: просто добавьте яркий акцентный цвет в нейтральную палитру (например, традиционную монохромную схему). Недавно созданная схема будет очень яркой визуально.
Добавление одного цвета к дизайну в оттенках серого просто и эффектно привлекает внимание.Макет с сочетанием белого и серого с акцентами синего цвета в цветовой гамме Dropbox.

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

Лучшие цветовые комбинации исходят от природы.Вы можете создать цветовую схему из кадра.

60–30–10 — это простое правило, которое поможет вам создать хорошо сбалансированные цветовые палитры. Идея состоит в том, что один цвет (обычно нейтральный) составляет 60 процентов палитры. Другой дополнительный цвет составляет 30 процентов палитры. Третий цвет, используемый в качестве акцента, занимает оставшиеся 10 процентов. Эта формула работает, потому что создает ощущение равновесия.

60 % — ваш доминирующий оттенок, 30 % — дополнительный цвет и 10 % — акцентный цвет.Эта техника позволяет глазу комфортно перемещаться от одной фокусной точки к другой.

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

Цвет этого волка темно-серый, а не черный.

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

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

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

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

«Цвет создает, усиливает, изменяет, раскрывает и задает настроение картины». — Кифф Холланд

Когда вы выбираете цветовую палитру для своего приложения/сайта, вы не можете просто думать о том, как все выглядит — вы должны думать и о том, как они ощущаются .Выбранные вами цвета могут работать как 90 661 вместо 90 662, так и 90 661 против 90 662. Чтобы вы начали, я составил краткое справочное руководство, в котором описаны основные ассоциации с каждым цветом (в западном мире).

Красный, Оранжевый, Желтый

  • Красный (Страстный, Могущественный, Опасный, Важный): Красный — чрезвычайно стимулирующий цвет. Создается впечатление скорости и силы. Он известен как цвет энергии. Он доказал физиологические эффекты увеличения кровообращения и повышения метаболизма.Вот почему, когда люди видят красный цвет, они читают сильнее и быстрее. Использование красного цвета — это способ привлечь внимание пользователей или выделить отдельный элемент, требующий внимания.
  • Оранжевый (Игривый, Энергичный, Привлекательный, Дешевый): Оранжевый — теплый и яркий цвет. Он обладает энергичной аурой и способен создать у ваших пользователей ощущение теплого гостеприимства. Некоторые исследователи считают, что оранжевый означает дешевизну.
  • Желтый (Веселый, Дружелюбный, Стимулирующий, Привлекающий внимание): Желтый — чрезвычайно универсальный цвет, в зависимости от того, какой оттенок вы выберете.Светло-желтый ассоциируется с солнцем и, следовательно, передает позитив и теплоту. Темные оттенки желтого (как золото) создают впечатление старины и возраста. Эти более темные оттенки часто связаны с безвременьем и мудростью.

Зеленый, Синий, Фиолетовый

  • Зеленый (Натуральный, Безопасный, Свежий): Зеленый отражает чувство защиты окружающей среды и близость к природе. Это также означает рост, и поэтому его часто связывают с бизнесом. Зеленый означает чувство правильного или неправильного.
  • Синий (Спокойный, Ответственный, Заслуживающий доверия, Надежный): Синий цвет часто ассоциируется со спокойными и расслабляющими эмоциями. Он также ассоциируется с силой и надежностью, вызывая чувство доверия и профессионализма. Синий излучает чувство внутренней безопасности. Вот почему вы можете увидеть банки и технологические компании, использующие этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, используют синий цвет в своих сетях.
  • Фиолетовый (Роскошный, Таинственный, Романтичный, Одухотворенный): Исторически связанный с королевской властью, фиолетовый намекает на то, что продукт относится к категории элитных.

Розовый, Черный, Белый, Серый

  • Розовый (Женственность, Невинность, Молодость): Розовый наиболее известен своими ассоциациями с женственностью.
  • Черный (Мощный, Утонченный, Таинственный, Дерзкий): Черный привлекает внимание быстрее, чем другие цвета, включая красный. Вот почему он чаще всего используется только для текста и акцентов.
  • Белый (Чистота, Здоровье, Чистота, Невинность): Белый акцентирует другие цвета вокруг себя, что делает его популярным выбором в качестве вторичного цвета.
  • Серый (Нейтральный, Формальный, Утонченный, Стерильный): Серый олицетворяет нейтралитет, он может принимать характеристики как черного, так и белого. При использовании в качестве основного цвета он создает впечатление официальности.

Важно отметить, что значение цветов может варьироваться в зависимости от культуры и обстоятельств. Чтобы узнать больше об этом, ознакомьтесь со статьей «Символика цветов и значения цветов во всем мире».

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

Избегайте использования только цвета в качестве индикатора

Приблизительно 8% мужчин и 0,5% женщин страдают той или иной формой дальтонизма. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм этого состояния, наиболее распространена слепота на красный и зеленый цвета. Человек, страдающий этой формой дальтонизма, как правило, не может видеть вариации красного и зеленого цветов.

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

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

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

Избегайте низкой контрастности текста

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

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

Проверьте контрастность, чтобы убедиться, что цвета фона и переднего плана отображаются с достаточным контрастом для дальтоника или слабовидящего человека.На самом деле это не так сложно — все, что вам нужно сделать, это проверить коэффициент контрастности. Коэффициенты контрастности показывают, насколько цвет отличается от другого цвета (обычно записывается как 1:1 или 21:1). Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для основного текста и текста изображения:

  • Мелкий текст должен иметь коэффициент контрастности не менее 4,5:1 относительно фона.
  • Крупный текст (14 pt жирный/18 pt обычный и выше) должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.

Хорошая новость, вам не нужно проверять это вручную. Используя инструмент Color Contrast Checker, вы можете проверить свои цветовые сочетания всего за несколько кликов.

Webaim средство проверки цветового контраста

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

Adobe Color CC (ранее известный как Kuler) — отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет в палитре можно индивидуально изменить или выбрать в качестве основного цвета несколькими простыми щелчками мыши.Палитры можно сохранять и добавлять в библиотеку, а на сайте доступно несколько отличных цветовых схем, созданных сообществом:

Adobe Color CC — отличный инструмент, который может ускорить изучение различных вариантов цветовых схем.

Если вы хотите провести визуальное исследование использования определенного цвета другими дизайнерами, перейдите на страницу dribbble.com/colors и выберите нужный цвет.

Вы также можете указать минимальный процент кадра, содержащего цвет (например, кадр на 30 % состоит из синего). Укажите минимальный процент кадра, содержащего цвет.

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

ColorZilla — это расширение, доступное для Google Chrome и Mozilla Firefox, которое включает в себя множество инструментов, связанных с цветом, включая палитру цветов, пипетку, генератор градиентов CSS и браузер палитр.

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

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

Coolors позволяет загрузить изображение и создать из него цветовую палитру.

Моделирование цветовой слепоты в Adobe Photoshop

С помощью Photoshop вы можете проверить доступность своего дизайна. Просто перейдите к View > Proof Setup , а затем вы можете выбрать один из двух типов (тип Protanopia или тип Deuteranopia).

Чтобы предотвратить проблемы с доступностью в дизайне, рекомендуется испытать на себе дальтонизм во время проектирования. NoCoffee Vision Simulator можно использовать для имитации нарушений цветового зрения и условий слабого зрения на любом пейджере. Например, используя параметр «Дефицит цвета» «Deuteranopia», вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.

15 Зеленая цветовая палитра Вдохновение с именами и шестнадцатеричными кодами!

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

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

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

Идеально подходит для современных и стильных ощущений, а также пробуждает дух; Настоятельно рекомендуется!

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

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

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

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

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

Но помните, что зеленый цвет — это не только свежесть, надежда и жизнь.

Добавить комментарий

Ваш адрес email не будет опубликован.

Начните вводить, то что вы ищите выше и нажмите кнопку Enter для поиска. Нажмите кнопку ESC для отмены.

Вернуться наверх