Работа с цветом: Работа с цветом Основы веб-дизайна

Работа с цветом Основы веб-дизайна

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

Контраст

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

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

Как проверить контрастность текста и фона?

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

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

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

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

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

Вибрации (Vibrancy)

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

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

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

Сайт FOX NEWS раздел LifeStyle содержит в макете более спокойные цвета. Жизнь на сайте в этом разделе идет более размеренная, спокойная. То есть, цвет соответствует характеру контента. И если, например мы перейдем в раздел здоровья, то увидем там еще один цвет: 

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

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

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

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

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

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

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

Grossman & Wisenblit, 1999

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

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

Красный

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

Влияние на чувства
Подогревает страсть, чувства и эмоции
Привлекает внимание
Повышает давление и учащает биение сердца

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

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

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

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

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

Желтый

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

Влияние на чувства
Возбуждает нервную систему
Стимулирует общение
При избыточном использовании напрягает зрение и утомляет глаза

Роль в маркетинге
Вызывает ощущение ясности и улучшает мыслительные процессы
Приносит радость и счастье

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

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

Голубой (и его оттенки)

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

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

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

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

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

Оранжевый

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

Влияние на чувства
Вызывает прилив энергии и энтузиазм
Согревает и способствует доверию
Привлекает внимание

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

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

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

Зеленый

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

Влияние на чувства
Расслабляет, умиротворяет и снимает стресс
Ослабляет боль и депрессию
Освежает и обновляет

Роль в маркетинге
Ассоциируется со здоровьем и продолжением рода
Символизирует естественность и экологичность
Означает новизну, “молодую поросль”

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

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

Фиолетовый

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

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

   Роль в маркетинге
   Используется в продуктах для детей и старшего возраста
   Придает спокойствие и равновесие
   Создает атмосферу креативности, мудрости и духовности

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

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

Выводы: Какой цвет лучше использоваться при создании веб-сайтов? 

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

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

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

Теория цвета

Теперь давайте поговорим о более сложных вещах — о  сочетании цветов. Юные дизайнеры считают недостойной траты времени, чтобы изучить теорию цвета. А зря. Давайте немного изучим «мат. часть.». 

Иоганнес Иттен 

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

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

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

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

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

Немного истории

Первая попытка привести видимые цвета в систему принадлежала Исааку Ньютону. 

Цветовая система Ньютона

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

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

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

Цветовой круг Ньютона

Круг Гёте

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

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

Его исследования расходились с позицией Ньютона. Последовательность цветов в цветовом круге Гете – не есть замкнутый спектр, как у Ньютона, а три пары цветов: три основных цвета (красный, желтый, синий), чередующихся с тремя дополнительными (оранжевый, зеленый, фиолетовый). Последние получаются путем попарного смешения рядом лежащих основных цветов. 

Подробнее о истории теории цвета вы можете прочитать в книге:
Н.Н. Волкова «Цвет в живописи» и  книги И. Иттена «Искусство цвета»

Цветовой круг Иттена

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

Цветовой круг, который лег в основу теории гармонии цветов, готов!

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

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

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

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

Схемы сочетания цветов

Аналогичное (аналоговая триада) — сочетание цветов из трех соседних по кругу секторов. Мягкое и приятное сочетание цветов, часто встречается в природе.

Аналогичное (аналоговая триада)
Analogous 

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

Дополнительное (комплементарное)
Complementary 

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

Контрастная триада 

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

Равноудаленное (классическая триада)

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

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

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

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

Я думаю основные принципы сочетания цветов, вам понятны. 

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

Еще цвета делятся на теплые и холодные. 

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

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

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

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

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

Нейтральные цвета

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

Зачастую эти цвета служат основой и фоном для остальных.

Цветовые модели RGB, CMYK, HSL, LAB

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

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

Цветовая модель RGB

RGB — Red, Green, Blue (красный, зеленый, синий). Данный вид цветовой модели базируется на трех основных цветах, смешение которых в различных пропорциях дает все остальные цвета и оттенки.3 = 16.777.216 различных оттенков.

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

Яркость каждой такой лампочки определяется интенсивностью (делением) от 0 (выключенная «лампочка») до 255 («лампочка», светящая с полной «силой»). Такое деление цветов называется цветовой моделью RGB от первых букв слов «RED» «GREEN» «BLUE» (красный, зеленый, синий).

Если светит например только синяя «лампочка» — мы видим синий пиксель. Если только красная — мы видим красный пиксель. Аналогично и с зеленой. Если все лампочки светят с полной яркостью (R=255, G=255, B=255) в одну точку, то этот пиксель получается белый. Если ни одна лампочка не светит (R=0, G=0, B=0, то точка кажется нам черной. Так как черный цвет — это отсутствие света. Так вот и благодаря сочетанию разной интенсивности цвета этих «лампочек», можно получать различные цвета и оттенки.

Экспериментируем  с RGB

Для того, чтобы лучше понять как это работает, вы можете открыть Affinity Designer и поэкспериментировать со значениями. Откройте окно Color Chooser и найдите поля  R G B. 

Получаем красный цвет

Давайте попробуем сделать красный цвет. Для этого в поле R (Red) зададим максимально значение свечения этого цвета и поставим цифру 255. Остальные G  и B выключим и поставим значение ноль. 

R=255
G=0
B=0

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

Получаем зеленый цвет

Следовательно, чтобы получить чистый зеленый, нам надо поставить максимальное значение 255 зеленому цвету (G — Green) а остальные цвета приглушить.  

R=0
G=255
B=0

Получаем синий цвет

По тому же принципу получаем синий цвет. 

R=0
G=0
B=255

Как я писал уже выше, чтобы получить черный цвет, надо «отключить» все цвета.  Поставьте все значения RGB на ноль и вы получите черный цвет.

R=0
G=0
B=0

Чтобы получить белый цвет, надо смешать все цвета вместе. Тогда мы получим белый цвет.  Поэтому ставим каждое значение на максимум 255.

R=255
G=255
B=255

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

RGB код.

RGB код записывается в одну строчку со всеми значениями. Показатели интенсивности записывают по порядку RGB:

Например если у нас красный:

R=255
G=0
B=0

Будет выглядеть как 255000000 (вместо одного нуля — отображают все три значения, то есть следует писать три нуля, а не один)

Если это белый например, то будет: 255255255 

Но есть еще и HEX коды для кодировки цветов.

И как бонус небольшая памятка по работе с RGB: 

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

Скачать RGB модель (.afdesign)

#RGB HEX коды (Цвета HTML)

Для записи цвета в rgb еще используют шестнадцатеричную систему. Показатели интенсивности записывают по порядку #RGB:

R#ff — Две первые цифры — красный
G#00 — Две в середине — зелёный
B#00 — Две последние цифры — синий

Код цвета: #ff0000

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

Цветовая модель CMYK

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

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

Это происходит примерно так: мы светим на красный предмет белым светом. Белый свет можно представить как R-255 G-255 B-255. Но предмет не хочет отражать весь свет, который мы на него направили, и нагло ворует у нас все оттенки зеленого и синего. В итоге отражает только R-255 G-0 B-0. Именно поэтому он нам и кажется красным.

И поэтому для печати на бумаге весьма проблематично пользоваться цветовой моделью RGB. Для этого и придумали цветовую модель CMY (цми) или CMYK (цмик). 

Система CMYK создана и используется для типографической печати. Аббревиатура CMYK означает названия основных красок, использующихся для четырехцветной печати: голубой (Сyan), пурпурный (Мagenta) и желтый (Yellow). Буквой К обозначают черную краску (BlacK), позволяющую добиться насыщенного черного цвета при печати. Используется последняя, а не первая буква слова, чтобы не путать Black и Blue.

Цветовая модель CMY основана на том, что сам по себе лист бумаги белый, то есть отражает практически весь спектр RGB, а краски, наносимые на нее, выступают в качестве фильтров, каждый из которых «ворует» свой цвет (либо red, либо green, либо blue). Таким образом цвета этих красок определяются вычитанием из белого по одному цветов RGB. Получаются цвета Cyan (что-то вроде голубого), Magenta (можно сказать, розовый), Yellow (желтый). Black (Черный)

Помните цветовую модель RGB? (Я нарисовал это схему для наглядности в Affinity Designer)

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

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

Мы увидим следующую картину:

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

Посмотрите на значения CMYK. Как видите в нем есть примесь желтого и сам цвет Сyan (С) не максимально яркий. Лишь на отметке 52 (из 100) Меняем данные на:

С = 100
M = 0
Y = 0
K = 0

И получаем чистый цвет Сyan по CMYK.

Тут работает все тоже самое как по принципу RGB, как я объяснял выше.
Только минимальный параметр для цвета 0, а максимальный 100.

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

Как видите, после нашей коррекции цвет поменялись. Только в данном случае, при смешивании используем метод Bland mode Darken (в RGB же мы использовали Lighten). Улавливаете суть? Там мы работали и создавали смешение цветов через черный, а тут через белый. Там у нас в RGB был более широкий спектр цветов, тут более узкий. Так как монитор способен отображать больше цветов, чем чернила на бумаге. 

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

Ну и аналогично, с RGB можно получить разные цвета:

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

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

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

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

Вывод:

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

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

Основные цвета или первичные (Primary) — те, цвета, которые состоят в моделях RGB и CMY.
Второстепенные (Secondary), все остальные, которые получаются при смешивании этих цветов.

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

Работа с цветом в дизайне интерьера

1. Правило 60-30-10

При декорировании комнаты, разделите цвета в процентом соотношении таким образом:

• 60% доминирующий цвет
• 30% дополнительные цвета
• 10% цветовой акцент

Можно запомнить, как правило, бизнес — костюма:

• 60% пиджак и брюки
• 30% рубашка
• 10% галстук

Теперь переведем это на язык интерьера:

• 60% цвета во всей комнате составляют стены
• 30% мебель, ковры
• 10% акценты — аксессуары и цветы.

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

Удачные цветовые сочетания удобно выбирать по цветовому кругу. И тут все можно свести к двум базовым схемам:

Комплементарная

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

Аналоговая

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

3. Не забывайте о черном…

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

4. Правила «природных цветов»

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

5. Правило «цветового шаблона»

Выбираем самый большой и привлекающий внимание объект (штора, обивка дивана, ковёр или картина) и смотрим какие цвета там использованы. Это проще чем сначала покрасить стены, а потом обнаружить, что ничто в доме не сочетается с этим цветом. Если ваша любимая картина сочетает красный, черный и серый, то цветовая схема для комнаты может быть следующая: 60 % серого, 30% красного и 10% черного. Или можем сделать красный доминирующим, серый дополнительным, а черный опять пойдет в акцент.

6. Правило «перехода цвета»

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

7. Правило контраста

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

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

8. Цветовые ассоциации

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

9. Подумайте о местных и сезонных цветах

Если нет уверенности в сочетании цветов — можно использовать уже придуманные схемы:

• исторические (викторианский, ар нуво, ар деко, барокко, классицизм…)
• местные (французская, английская, итальянская…)
• сезонные (осенняя, весенняя…)

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

10. Подбор цветов

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

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

Работа с цветом, заливками и палитрами · Понятно о CorelDRAW

• Понятно о CorelDRAW
• Обзор
• Разметка (Layout)
  • Настройки страниц
  • Менеджер объектов
  • Индивидуальные настройки мастер слоёв для каждой страницы
  • Малоизвестная особенность таблиц
  • Выравнивание и распределение объектов
  • Выравнивание и распределение в X6.1
  • Интерактивное выравнивание, распределение и трансформация объектов в X6.2
• Инструменты (Tools)
  • Всё об инструменте Указатель (Pick tool)
  • Перемещение рамки выделения
  • Работа с кривыми
    • Инструмент Shape (Форма). Работа с кривыми и не только!
    • Тонкости инструмента Безье (Bezier Tool)
    • Зеркальное редактирование узлов и гибкий режим
    • Работа с отдельными путями кривой как с объектами
    • Отображение узлов разного типа разными цветами
    • Выравнивание узлов
    • Растровое изображение — кривая?!
    • Объединение узлов
  • PowerClip в X6
  • Навигация по документу «пробелом», как в Photoshop
  • Объединение, пересечение, и другие функции формирования объектов
• Работа с цветом, заливками и палитрами
  • Управление цветом
    • Цвет в CorelDRAW
    • Настройка CMS (Color Management System) в CorelDRAW
    • Желтизна цвета
    • Preserve pure black — хорошо или плохо?
  • Цветовые стили
    • Новые цветовые стили (Color Styles): несколько полезных функций
    • Стили цвета (Color Styles) в X6
    • Решаем проблему цветовых стилей (Color Styles)
    • Удаление (старых) цветовых стилей
  • Заливка
    • Интерактивная заливка (Interactive Fill)
    • Новые возможности заливки в X7
    • Режим заливки, или почему некоторые кривые имеют заливку в тех областях где должен быть просвет
    • Steps в градиентной заливке
    • Заливка штриховкой (Hatch Fill) в CorelDRAW
  • Цвет совмещения (Registration Color)
  • Собственная палитра на основе документа или рисунка
  • Separations preview
  • Названия цветов вместо их значений (X5)
• Эффекты (Effects)
  • Эффект Envelope (Оболочка)
  • Инструмент Contour (Контур)
  • Две прозрачности на одном объекте (хак)
  • Фильтры цветовой и тоновой коррекции для векторных объектов
  • Деформация изображения
• Текст и шрифты (Text & Fonts)
  • Профессиональная работа с текстом (1 часть)
  • Профессиональная работа с текстом (2 часть)
  • Настройка списка шрифтов
  • Быстрый выбор шрифта
  • Колонки для простого текста
  • Отступы и интервалы в тексте
  • Табуляция
  • Оформление списков (Bullets)
  • Дефис или тире?
  • Для чего нужна панель Update Text (Обновить текст)
  • Повёрнутый текст
  • Вставка большого количества текста и автоматическое добавление страниц
  • Фантомные шрифты в документе
  • CorelDRAW и шрифты
• Растровые изображения и PHOTO-PAINT (Bitmaps & PHOTO-PAINT)
  • Пару слов о Corel PHOTO-PAINT
  • Пакетная обработка изображений (PHOTO-PAINT)
  • Наложение фильтров на изображение (PHOTO-PAINT)
  • Подробнее об импорте растровых изображений
  • Обработка растровых изображений
• Автоматизация (Macros)
  • О макросах в CorelDRAW
  • Как создать новый GMS файл
  • Как устанавливать макросы
• Рабочее пространство (workspace)
  • Настройка интерфейса
  • Быстрая настройка интерфейса
  • Интерактивные настройки
  • Назначение горячих клавиш для полей ввода.
  • Настройка расположения иконки Background Tasks
  • Быстрая смена точки отсчёта
  • Улучшаем доступ к списку последних документов
  • Старое окно экспорта для CorelDRAW X5
  • Режимы просмотра документа
  • Snap — временное выключение во время движения
• Разное
  • Обзоры
    • Что нового в X5
    • Что нового в X6
  • Производительность X6 x86 против x64
  • Поддержка Multi-core в CorelDRAW X5
  • Особенности рисования для WEB в CorelDRAW X4
  • Один из вариантов восстановления cdr файла (для X6)
  • Как посмотреть ход выполнения сохранения в X5 и выше
  • CorelDRAW и InDesign
  • Из Excel в CorelDRAW
  • О выборе программ
• Список изменений

Powered by GitBook

• Управление цветом
  • Цвет в CorelDRAW
  • Настройка CMS (Color Management System) в CorelDRAW
  • Желтизна цвета
  • Preserve pure black — хорошо или плохо?
• Цветовые стили
  • Новые цветовые стили (Color Styles): несколько полезных функций
  • Стили цвета (Color Styles) в X6
  • Решаем проблему цветовых стилей (Color Styles)
  • Удаление (старых) цветовых стилей
• Заливка
  • Интерактивная заливка (Interactive Fill)
  • Новые возможности заливки в X7
  • Режим заливки, или почему некоторые кривые имеют заливку в тех областях где должен быть просвет
  • Steps в градиентной заливке
  • Заливка штриховкой (Hatch Fill) в CorelDRAW
• Цвет совмещения (Registration Color)
• Собственная палитра на основе документа или рисунка
• Separations preview
• Названия цветов вместо их значений (X5)

Работа с цветом. Опыт Марко Буччи, иллюстратора, сотрудничавшего с Walt Disney

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


Статья — пересказ этого видео.

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

Что такое цветовая гармония?

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

Может, нам поможет австралийский художник-акварелист Джозеф Збуквич? На вопрос, как он смешивает цвета, Джозеф ответил: «Я не смотрю на цвета на своей палитре. Есть только тёплая сторона, прохладная сторона и ещё всякая мелочь посередине». Тоже не очень внятное объяснение.
Тем не менее, при таком подходе Вейстлинг сумел нарисовать вот эту картину:




А вот одна из работ Збуквича:




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

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

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

Как «общаются» цвета?

Давайте возьмём какой-нибудь пейзаж американского художника-импрессиониста Эдгара Пейна, и попытаемся вписать в него цвет, который туда более-менее подходит (этот цвет вынесен отдельно слева):




Результат получится такой:




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




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




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

Принцип снижения насыщенности

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




Давайте попытаемся нарисовать ту же картину, но используя менее насыщенные версии этих цветов:




Теперь работа смотрится гораздо более гармонично. Почему так происходит?

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




Если бы повстанцы в «Звездных войнах» действовали также разрозненно, как насыщенные цвета, они бы не одержали ни одной победы, считает Марко Буччи.

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




Давайте нарисуем третий вариант всё той же картины с максимальным добавлением серого в каждый цвет:




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




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

Если проделать это с нашей картиной, результат будет примерно таким:




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




Как заставить цвета «разговаривать»?

Давайте вернёмся к картине Збуквича и посмотрим поближе вот на этот фрагмент:




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

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




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




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




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




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




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




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




Рисуем гармоничную картину

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




А вот такой вид этот замысел имел на начальной стадии работы:




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




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




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




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




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

Марко Буччи.

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




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




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

Кто автор урока?

Напомним, Марко Буччи — это известный художник-иллюстратор и преподаватель живописи из Канады. За 15 лет профессиональной деятельности Марко успел поработать с издательством Walt Disney Publishing Worldwide, производителями игрушек LEGO, Hasbro, Mattel Toys и Fisher-Price, разработчиком игр LucasArts, а также мультипликационными студиями Nelvana, GURU Studio, C.O.R.E. Digital Pictures и Yowza! Animation.

В качестве преподавателя Марко сотрудничал с Академией искусств Сан-Франциско, Колледжем Сентенниал в Торонто и другими учебными заведениями.

Переводы предыдущих уроков Марко Буччи:

Цвет для чайников. Обширное руководство для начинающих. | by Anton Guk

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

Дисперсия света

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

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

Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.

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

Интересный факт, оказывается, количество цветов в радуге, зависит от страны проживания. Жители Китая считают, что в радуге пять цветов. Для жителей США типичным ответом будет шесть цветов, в то время как жители России насчитывают их семь (+голубой). На самом деле в радуге собран весь спектр, но мы можем увидеть только некоторые из них.

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

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

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

(красный + оранжевый + желтый) + (зеленый + синий + фиолетовый) = белый

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

Два цвета, объединение которых даёт нам белый цвет, называются дополнительными цветами.

Пример: Если мы удалим из спектра один цвет, к примеру красный и с помощью линзы соберем оставшееся цвета: оранжевый + жёлтый + зеленый + синий + фиолетовый, то результатом у нас будет зеленый цвет. Потому что зеленый является дополнительным цветом по отношению к удалённому нами красному. Почему именно такие соотношения “зеленый — красный” расписано ниже.

Вычитаемые цвета

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

Поглощаемые в физическом эксперименте цвета называются также вычитаемыми.

Параметры цвета

1. Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
2. Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
3. Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Что такое RGB, CMYK, HEX и чем они отличаются

RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).

HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий. Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.

CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.

Почему мы видим цвета такими?

Световые волны сами по себе не имеют цвета. Цвет возникает лишь при восприятии этих волн человеческим глазом и мозгом.

Цвет предметов возникает, главным образом, в процессе поглощения волн. Желтый сыр выглядит желтым потому, что он поглощает все остальные цвета светового луча и отражает только желтый. Когда мы говорим: «этот сыр желтый», то мы на самом деле имеем в виду, что молекулярный состав поверхности сыра таков, что он поглощает все световые лучи, кроме желтого. Сыр сам по себе не имеет никакого цвета, цвет создаётся при его освещении.

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

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

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

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

Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла.

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

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

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

Цветовой круг по Иоханнесу Иттену (1961)

Композиционные схемы

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

15 отличных ресурсов для работы с цветом

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

Тут полный набор инструментов для работы с цветом в Web: переводы из одного цветового представления в другое, color picker, color chart и даже много туториалов про цвета.

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

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

Цвета, палитры,  паттерны – все вычисляется, делится, настраивается из заданной картинки. Очень удобный онлайн инструмент для работы с цветом. Убедитесь сами!

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

С помощью этого приложения вы можете увидеть многоаспектный характер цветов и отношения между ними. Все представлено в 3D виде. Свои палитры вы можете импортировать или экспортировать в Adobe Swatch Exchange. В ColoRotate есть свое сообщество, где можно просмотреть темы, созданные другими пользователями.

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

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

Пользуясь тремя ползунками RGB или HSV вы автоматически получите сочетание из шести цветов и затем сможете настраивать их как вам нравится. Цвета автоматически представляются в виде цветового HTML кода и кода RGB. Вы можете экспортировать их в виде цветовых таблиц в Photoshop и Illustrator.

Загружайте свое фото на этот ресурс, разложите его на пиксели и возьмите нужный вам  цвет, сохраните его и используйте!

24 сочных градиента от дизайнера Luke Davies.

 

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

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

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

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

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

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

15 сайтов, которые взорвут ваш мозг

10 приложений с красивейшим дизайном

Как понять, что ваш дизайн завершен?

Десять ошибок при работе с цветом в UI — Дизайн на vc.ru

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

{«id»:173629,»url»:»https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui»,»title»:»\u0414\u0435\u0441\u044f\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 UI»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui&title=\u0414\u0435\u0441\u044f\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 UI»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui&text=\u0414\u0435\u0441\u044f\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 UI»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui&text=\u0414\u0435\u0441\u044f\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 UI»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0414\u0435\u0441\u044f\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 UI&body=https:\/\/vc.ru\/design\/173629-desyat-oshibok-pri-rabote-s-cvetom-v-ui»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

34 896 просмотров

Иллюстрация Elizabeth Sanchez

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

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

❌ 1. Использование бренд-цвета без изменений

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

Как исправить

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

❌ 2. Злоупотребление акцентным цветом

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

Как исправить

• Всегда держите в голове правило 60-30-10, которое используют дизайнеры интерьеров. Применяйте его в работе с интерфейсом.

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

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

❌ 3. Много ярких цветов, которые «спорят» с акцентным

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

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

Как исправить

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

❌ 4. Использование акцентного цвета для обозначения различных состояний интерфейса

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

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

Как исправить

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

❌ 5. Неудачное сочетание цветов

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

Как исправить

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

❌ 6. «Недоступность» цветов

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

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

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

Как исправить

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

❌ 7. Неосторожное обращение с градиентами

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

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

Как исправить

Проверяйте контраст каждой области градиента, где расположен текст по стандартам WCAG 2.0.

❌ 8. Недостаточное количество оттенков

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

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

Как исправить

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

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

Эта ошибка встречается у начинающих дизайнеров, которые вводят новые цвета и не описывают (или не добавляют их) в основной ui-kit или дизайн-систему. Затем по какой-либо причине они решают изменить цвет. Но при этом в дизайне остаются элементы с предыдущим оттенком. Так появляется очередной дубль цвета и 23-й оттенок черного в тексте.

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

Как исправить

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

❌ 10. Копирование цветов из светлой темы в темную

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

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

Как исправить

• На начальном этапе прорабатывайте достаточное количество как темных, так и светлых оттенков (например, как в Material Design).
• Используйте менее насыщенные оттенки для темной темы.
• Не забывайте про цвет текста. Например, на кнопках, с большой долей вероятности, его придется инвертировать.

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

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

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

Больше моих статей можно почитать в блоге на Medium.


Преобразователь цветов

, RGB в HEX; конвертировать RGB в HEX, HSB, HSL, CIELab

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

Цветовые модели

Цвет RGB
Состоит из красного, зеленого и синего компонентов. Это базовая цветовая модель конвертера.

HEX color
Это шестнадцатеричное представление десятичного числа RGB. значения.

Яркость (относительная)
Расчетное относительное значение яркости для определенного цвета в плане RGB-серого.

HSB color
Состоит из компонентов оттенка, насыщенности и яркости. Он получен из цветовой модели RGB. Чтобы лучше понять эту цветовую модель вы можете рассматривать как HTS (оттенок, оттенок, оттенок) модель.

HSL цвет
Состоит из компонентов оттенка, насыщенности и яркости . Он получен из цветовой модели RGB.Говорят, что модель HSL чтобы представить наиболее естественный способ того, как мы думаем о цвете.

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

CIE L * a * b * или CIELAB
Состоит из компонентов яркости , зеленого / красного и синего / желтого. Если вы пройдете определенный порог в положительном или отрицательном направлении для значения a * или b *, которые вы выходите из цветового пространства sRGB и поэтому значения RGB больше не меняются.

winHSL240
Состоит из компонентов оттенка, насыщенности и яркости . Это внутренняя цветовая модель ОС Windows ™, например используется в Paint и Wordpad. Компоненты имеют диапазон 0-239, 0-240 и 0-240.

winHSL255
Состоит из компонентов оттенка, насыщенности и яркости . Это цветовая модель, используемая в программах Microsoft ® Office.Компоненты имеют диапазон 0–254, 0–255 и 0–255.

pHSL color
Состоит из компонентов оттенка, насыщенности и яркости . Это цветовая модель HSL, разработанная компанией Painter, охватывающая подмножество HSL с намерением выбрать более эстетичный привлекательные цвета.

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

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

Ссылка на эту страницу:

URL

HTML-ссылка

Цитата

Электронная почта

Скопируйте и вставьте следующий текст:

Имя, CSS, RGB, HEX, HSL, Яркость

Примеры названий цветов:
Бордовый # 800000 Тыква # FF7518 Gold # FFDF00 Apple Green # 8DB600 Baby Blue # 89CFF0 Pink # FFC0CB

Цвета с названием имеют преимущество , несущее значение что может быть полезно при выборе хороших цветов.Смысл, наверное, разделяют люди, говорящие или знающие один и тот же язык, потому что Названия цветов привязаны к языковым границам . Конечно, это может быть преимуществом и недостатком одновременно. Зная цвета по названию также помогают создать набор цветов, который сознательный. В среднем люди могут различить от десяти до двадцати цветов. спонтанно. Увеличение этого списка примерно до 50–300 заставляет использовать color интуитивно понятнее .

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

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

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




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

Используйте значения цветов HEX, RGB или HSL как Цветовой код HTML или цветовой код CSS.Для документов / приложений самый быстрый способ использовать определенный цвет — скопировать его HEX значение и вставьте его в назначенное поле ввода.

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

Цветные страницы содержат несколько свойств цвета, например Значения RGB, HEX и HSL. Таким образом вы сможете использовать цвета для большинства приложений.

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




Сводка

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

Ссылка на эту страницу:

URL

HTML-ссылка

Цитата

Электронная почта

Скопируйте и вставьте следующий текст:

Используйте теорию цвета, чтобы сделать вашу работу потрясающей

13 февраля 2020 г. Kaboompics.com/Pexels

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

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

«Теория цвета — это одновременно наука и искусство использования цвета», — поясняет Крис Декер по номеру 99designs . «Это объясняет, как люди воспринимают цвет; и визуальные эффекты того, как цвета смешиваются, сочетаются или контрастируют друг с другом. Теория цвета также включает сообщения, которые передают цвета; и методы, используемые для воспроизведения цвета ».

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

Чем может помочь теория цвета?

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

«… цвет может заставить нас чувствовать себя спокойнее, злее или бодрее. Он также дает важные подсказки о нашем окружении: даже в новом городе красный знак остановки говорит нам остановиться; пигмент фрукта может сообщить нам, созрел он или нет », — пишет Кэсси Шортслив в номере Condé Nast Traveler .

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

Как выбрать цвета для WorkSpaces

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

«То, что когда-то было просто стилистическим выбором, теперь используется в качестве инструмента для подключения сотрудников к организационному бренду, помогая им понять, на кого они работают и почему», — отмечает Удо Шлиманн в журнале Work Design Magazine .«Цвет также может улучшить впечатление от работы, положительно влияя на концентрацию, уровень стресса и настроение. Для достижения этих целей важно понимать, как разные цвета взаимодействуют друг с другом, а также с другими элементами, такими как освещение, текстиль и узоры. По этим причинам мы должны внимательно относиться ко всем аспектам цвета, используя его, чтобы положительно повлиять на рабочее место и его повседневных пользователей ».

В общем и целом, цвета ассоциируются с этими чувствами или эмоциями в соответствии с теорией цвета и принципами дизайна:

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

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

Исследование Wellesley College 2006 г. «дополнительно связывает некоторые вещи, которые мы уже знаем — изменение цветового контекста в зависимости от других цветов в поле зрения, и эта эмоция является важным фактором при размышлении о цвете», — отмечается в сообщении в блоге на сайте Design Shack. . «Исследование показало, что« шарики »в мозгу обезьян по-разному реагируют на цветные стимулы, в зависимости от цвета.Мозг больше всего запускал определенные цвета (красный, затем зеленый, затем синий) и цвета с наибольшей насыщенностью. Это говорит нам о том, что эти цвета сразу же воздействуют на пользователя и привлекают внимание ».

Знаете ли вы себе цену? Примите участие в опросе PayScale Salary Survey и получите бесплатный отчет о заработной плате уже сегодня.

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

Крис Гонсалес / Pexels

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

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

Например, в офисах Microsoft в Милане, Италия: «Некоторые области более коммуникативны, а другие — более приватны, чтобы создать рабочее пространство, которое не будет однообразным и поощряет творчество и взаимодействие», — пишет Эли Хилл по телефону Artsy . «… Чтобы удовлетворить потребность сотрудников в пространствах для совместной работы и мозгового штурма, [итальянский архитектор] DEGW задумал« творческие сады », которые представляют собой получастные деревянные конструкции с мощной акустикой. Их экстерьеры часто украшают растения, что делает их узнаваемыми и уютными помещениями в офисе.”

При другом исследовании тех же офисов на веб-сайте Office Snapshots отмечается, что «не назначенные рабочие станции Open Space на разных операционных этажах отличаются друг от друга с точки зрения компоновки и эстетики в соответствии с функциями и требованиями. Некоторые области более коммуникативны, а другие — более приватны, что позволяет создать рабочее пространство, которое не будет однообразным и поощряет творчество / взаимодействие ».

Создание собственного пространства с помощью цвета

Миа Бейкер / Unsplash

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

«Наша нервная система требует ввода и стимуляции, — пишет Джилл Мортон на Colorcom.com ». (Рассмотрим эффекты одиночного заключения в тюрьмах.) Что касается визуального ввода, нам становится скучно из-за отсутствия разнообразных цветов и формы.Следовательно, цвет отвечает одной из наших основных неврологических потребностей в стимуляции ».

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

Вдохновение в цветах «IN»

Гусейн Камаладдин / Pexels

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

Например, осенью 2019 года в коллекциях весны 2020 года в основном использовался оттенок желтого, который модные обозреватели назвали «оптимистичным». В другом материале Лори Прессман из Pantone отметила, что цвета, показанные на подиумах прошлой осенью, были отмечены как «знакомые и надежные». Является ли этот приток красок, который мы считаем более устойчивым, честным и надежным, из-за бурных текущих событий и суматохи? Или это просто совпадение?

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

«Чем ярче и светлее цвет, тем более радостным и оптимистичным он вызовет у вас чувство», — пишет Эллисон С. Гремиллион по телефону 99designs в недавней статье о теории цвета и эмоциях. «Еще один способ, которым цвета могут вызывать счастливые эмоции, — это комбинировать несколько основных и дополнительных цветов вместе для создания молодежного красочного эффекта».

Или, может быть, выбор цветов 2020 года является реакцией на оттенки предыдущего сезона — весна / лето 2019 года были названы Pressman в Pantone «яркими, но не подавляющими».«Мышление на весну / лето 2019 года отражает наше желание смотреть в будущее с вдохновляющими цветами, которые придают уверенность и дух; цвета, поднимающие настроение; радостные оттенки, которые поддаются игривому экспрессионизму и ведут нас по пути творческих и неожиданных сочетаний ».

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

СКАЖИТЕ НАМ, ЧТО ВЫ ДУМАЕТЕ




Какая ваша любимая цветовая комбинация рабочего пространства? Ждем вашего ответа.Поделитесь своей историей в комментариях или присоединитесь к беседе в Twitter.

10 основ теории цвета, которые должен знать каждый

New Africa — stock.adobe.com

Купите эти товары сейчас: диван — цветочный горшок — акцентный стол Большинство из нас не являются дизайнерами интерьеров по профессии, и это нормально. Считаете ли вы дизайн интерьера приятным хобби или неизбежным злом, которое помогает сохранить презентабельный вид вашего дома, иногда бывает сложно понять отраслевой жаргон.В конце концов, как часто вы вообще слышите о Tertiary Colors? Мы в Freshome стремимся к тому, чтобы наш контент был доступен для всех — не требуется высшее образование. Итак, сегодня мы вернемся к основам. Подготовьтесь к небольшому дизайну 101. В этом посте мы рассмотрим основы теории цвета, которые должен знать каждый энтузиаст дизайна. После прочтения обязательно сохраните эту ссылку в легкодоступном месте. Это пригодится в следующий раз, когда вы не совсем уверены, что выбрали правильный цвет краски.

siraanamwong — stock.adobe.com

Купите эти товары сейчас: красочные стулья

1. Как использовать цветовое колесо

Как и тригонометрия, цветовое колесо, вероятно, одна из тех вещей, о которых вы узнали в раннем детстве и о которых не задумывались с тех пор. Однако, чтобы по-настоящему понять цвет, вам, возможно, придется избавиться от некоторых из этих знаний. Проще говоря, цветовое колесо дает визуальное представление о том, какие цвета хорошо сочетаются друг с другом. По сути, это устраняет все догадки. Большинство моделей состоит из 12 цветов.Однако теоретически цветовое колесо можно расширить, включив в него бесконечное количество оттенков. Не волнуйтесь, если вы еще не запомнили цветовое колесо. Есть множество способов получить к нему доступ в цифровом виде. Paletton — это веб-сайт, который позволит вам создать свою собственную цветовую схему, не вставая с экрана компьютера, а ColorSchemer предлагает те же возможности в приложении, которое доступно для iphone.

279photo — stock.adobe.com

Купите эти продукты сейчас: Кофейная кружка — Мобильный — Цветные ручки — Кнопки

Мгновенно получайте скидки на предметы интерьера!

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

Посмотреть предложения

2. Какие основные цвета

Спорим, некоторые из вас прочитали последний абзац и сказали: «12? Как в цветовом круге 12 цветов? В радуге всего 7 цветов. » Правда. Но, поверьте, на самом деле на каждом цветовом круге есть как минимум 12 оттенков. Вот как все ломается:

• Основные цвета: Красный, синий и желтый. Нельзя сделать из смешивания других цветов.
• Дополнительные цвета: оранжевый, фиолетовый и зеленый.Может быть получен путем смешивания основных цветов вместе.
• Третичные цвета: Шесть оттенков, которые можно получить путем смешивания основных и дополнительных цветов.

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

Getty Images

Купите эти продукты сейчас: Диван — Цветочные горшки — Потолочные светильники — Центральный стол

3.Изменение цвета с помощью нейтралов:

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

• Оттенок: Акт освещения цвета путем добавления к нему белого.
• Оттенок: Затемнение цвета путем добавления черного.
• Тон: Слегка затемняя цвет за счет добавления серого.

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

New Africa — stock.adobe.com

Купите эти продукты сейчас: Подушка — Коврик — Одеяло — Приставной столик в спальню

4. Цветовая температура

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

ponsulak — stock.adobe.com

Купите эти продукты сейчас: декоративные подушки — наволочки — чехлы для диванов

5. Дополнительная цветовая схема

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

Photographee.eu — stock.adobe.com

Купите эти товары сейчас: Современный диван — Подвесные светильники — Искусственные растения — Роспись стен

6. Сплит-дополнительная цветовая схема

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

Getty Images

Купите эти продукты сейчас: Круглый стол — Торшер — Телевизор — Микроволновая печь

7.Аналогичная цветовая схема

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

Getty Images / iStockphoto

Купите эти продукты сейчас: Шторы — Цветочные горшки — Барный стул — Подвесной светильник

8. Триадическая цветовая схема

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

aanbetta — stock.adobe.com

Купите эти товары сейчас: красочные стулья — обои

9. Цветовая схема тетрадика

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

AntonSh — stock.adobe.com

Купите эти продукты сейчас: Горшок для кактуса — Подушка — Настенное искусство

10. Цветовая схема квадрата

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

Getty Images / Johner RF

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

— Дизайнер цветовых схем

Влюблен в цвета с 2002 года.

1. Приложение Paletton
2. Colorpedia
3. О компании Paletton
4. О компании Paletton

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

Этот инструмент палитры использует различные цветовые модели для объединения смежных цветов и / или дополнительных цветов к основному оттенку. Выбирайте модели от монохромных до трехцветных или четырехцветных наборов цветов, с дополнением или без него (противоположный оттенок), наслаждайтесь даже режимом свободного стиля. Поиграйте с яркостью и насыщенностью палитры, выберите из предустановленных предустановок или создайте случайные палитры.Уникальный фильтр имитации зрения имитирует палитру, которую видят люди с различной слабостью зрения, дальтонизмом, различными вариантами дальтонизма (протанопия, дейтеранопия, тританопия, протаномалия, дейтераномалия, тританомалия, дисхроматопсия или ахроматопсия), а также несколько гамма-симуляций (симуляция слишком яркого дисплея или слишком темной печати), обесцвечивания, преобразования оттенков серого или веб-цветов (устаревшая 216-цветная палитра). Палитру можно экспортировать во множество различных форматов (HTML, CSS, LESS, XML, текст, изображение PNG, палитра образцов Photoshop ACO или формат палитры GIMP GPL) для раскрашивания ваших работ.Проверьте цветовой контраст всех цветовых пар, используемых в палитре, и проверьте, соответствует ли цветовой контраст требованиям WCAG. Подробнее о цветах в Colorpedia.

Paletton является преемником предыдущего приложения Color Scheme Designer 3, которым с 2009 года пользовались почти 20 миллионов посетителей (в то время как первая версия была опубликована в 2002 году), как профессиональных дизайнеров, так и любителей, интересующихся дизайном, дизайном мобильных или настольных приложений или веб-дизайном. дизайн интерьера, мода или обустройство дома и переделки.Полная история Paletton в Colorpedia.

Javascript не обнаружен. Для этого приложения требуется Javascript.

Как работают цвета шестнадцатеричного кода — и как выбирать цвета без палитры цветов

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

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

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

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

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

Что означает шестнадцатеричное число?

Во-первых, давайте посмотрим на «шестнадцатеричную» часть термина «шестнадцатеричный цветовой код». Hex в этом контексте означает «шестнадцатеричную» систему счисления, в которой есть 16 основных цифр, а не более привычные 10.

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

Шестнадцатеричный, как следует из названия, представляет собой способ кодирования системы счисления с основанием 16. Десятичная, наша обычная система счисления, с которой вы уже знакомы, — это основание 10. В шестнадцатеричной системе для первых 10 чисел используются те же числа, что и в обычной системе счисления (0–9), а затем они меняются на буквы, так что числа от 10 до 15 кодируется буквами A — F.4. Это упрощает преобразование между шестнадцатеричным и двоичным числами (хотя сегодня мы этого делать не будем).

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

Какие компоненты составляют цвет?

Как использовать шестнадцатеричную систему для кодирования цветов в RGB?

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

Источник

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

255 — максимальное значение для компонента, поэтому это значение указывает, что первый компонент (красный или R) должен быть максимальным, а два других должны быть минимальными.8. Но это еще один факт, о котором вам действительно не нужно знать.)

Наблюдательные читатели среди вас уже заметили, что даже на этом этапе работать с цветами в этой форме довольно просто. Черный как значение RGB — это RGB (0,0,0), а белый — это RGB (255,255,255). Зеленый? Правильно, RGB (0,255,0).

Как работают шестнадцатеричные цвета

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

Взгляните на свою шестнадцатеричную таблицу, и вы увидите, что «FF» переводится в «255» в стандартной кодировке с основанием 10.

Источник

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

Отсюда вы можете понять, что означает # ff0000 при преобразовании в цвет — это то же самое, что и RGB (255,0,0).То есть чистый красный цвет. Точно так же # ff00ff указывает максимальное количество красного и синего одновременно, что дает пурпурный цвет:

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

Эта система также означает, что существует огромный диапазон доступных цветов, потому что каждый компонент может принимать любое значение от 0 до 255.Подсчитайте количество возможных различных комбинаций, и вы обнаружите, что доступно 16 777 216 цветов.

Как использовать сокращения в шестнадцатеричном коде

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

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

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

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

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

Как использовать свои собственные шестнадцатеричные коды

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

Source

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

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

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

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

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

Идем дальше

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

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


Важность цвета на рабочем месте

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

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

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

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

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

Выбор цвета




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

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

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

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

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

Другой подход — оставаться в пределах одного сегмента цветового круга. Это может создать среду с определенным характером, а также может помочь обозначить «зоны». Этот подход использовался во время нашей работы для Toronto Pan Am Sports Center , унаследованного от Pan Am / Parapan Am Games 2015 года.В несколько нетрадиционном рабочем месте центр теперь является домом для сотрудников Canadian Sport Institute Ontario , University of Toronto Scarborough Athletics & Recreation и City of Toronto Parks & Recreation , в то время как он продолжает предоставлять спортивные программы.

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

Создание ощущения связи




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

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

Изображения любезно предоставлены Entro.

Отражая суть бренда




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

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

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

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

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

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

Работа с цветом: Работа с цветом Основы веб-дизайна