Таблица цветов html

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

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

В исследовании «Влияние цвета на маркетинг» (Impact of color on marketing) говорится, что использование разных цветов может существенно влиять на настроение и поведение потребителей. Утверждается, что от 60 до 90% покупателей (в зависимости от категории продукта) дают положительную или отрицательную оценку товару, основываясь только на его цвете.

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

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

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

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

Или выбрать более надежный способ — использовать теорию цвета в веб-дизайне.

Цветовая гамма

Цветовая гамма состоит из двенадцати базовых цветов

трёх основ­ных (первичных), трех составных и шести третьего порядка.

В цветовой гамме эти группы расположены на равном расстоянии друг от друга.

Цветовая гамма

■ ОСНОВНЫМИ цветами явля­ются красный, синий и желтый: их нельзя получить смешением других цветов.

■ СОСТАВНЫЕ цвета (зеленый, оранжевый, фиолетовый ) получают путем смешения двух ос­новных цветов: красный и жел­тый цвета дают оранжевый.

■ ТРЕТИЧНЫЕ (цвета третьего порядка) получаются при сме­шении основного и составно­го цветов: красно-фиолетовый, желто-оранжевый, сине–зелёный. сине-фиолетовый, желто-зеленый и красно-оранжевый.

■ ДОПОЛНИТЕЛЬНЫЕ цвета в цветовом круге расположены строго напротив друг друга и при смешении дают нейтраль­ные цвета.

Чистые и яркие цвета располо­жены в широком центральном кольце цветового круга (номера 4. 12.20.28. 36.44.52.60.68,76,84 и 92).

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

Коричневый

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

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

Примеры:

Серо-коричневый фон придает сайту надежности и ответственности.

Благодаря оранжево-коричневому цвету, создается ощущение приземленности и надежности.

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

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

Серо-коричневый фон привносит в дизайн стабильность и приземленность.

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

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

• взаимное ослабление, уничтожение;
• приумножение яркости антипода.

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

• красный – зеленый,
• красно-оранжевый – сине-зеленый,
• оранжевый – синий,
• желто-оранжевый – сине-фиолетовый,
• желтый – фиолетовый,
• желто-зеленый – красно-фиолетовый.

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

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

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

Но у каждого цвета есть оттенки с разным уровнем насыщенности. Поэтому контрастные цвета в зависимости от тона будут восприниматься по-разному:

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

Теория цвета и оттенки кожи

Обзор некоторых основ теории цвета поможет во время технического процесса обработки цвета кожи.

Две цветовые системы

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

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

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

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

Чтобы понаблюдать, как взаимодействуют две системы, откройте в Photoshop диалоговое окно Colour Balance (Image > Adjustments > Colour Balance) или создайте корректирующий слой Colour Balance (Layer > New Adjustment Layer > Colour Balance). Поиграйте со слайдерами и посмотрите, как две системы работают вместе.

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

Цветовые системы в Photoshop

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

Мы не станем преобразовывать наши цифровые файлы в CMYK.

Цвет кожи в значениях CMYK

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

Найдите значение цианового (cyan). Значение мадженты (magenta) должно быть вдвое больше значения циана, а значение желтого цвета (yellow) должно быть приблизительно на одну треть больше, чем у мадженты (20c 40m 50y).

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

«По цифрам»

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

Цвет кожи европейца в CMYK имеет примерно равные значения Magenta (фиолетовый) и Yellow (желтый), а Cyan вносит темную составляющую. Black позволяет передать насыщенный черный, иначе черные элементы в портрете (ресницы, брови, зрачки) могут получиться грязно-коричневыми, а не черными.

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

Резюме

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

Что делать в таком случае? Есть вариант брать с собой и дома выводить цветовой профиль для конткретного помещения с учетом насколько искажено освещение и потом применять ко всем фото, сделанным в этом помещении. Но кардинально это не поможет т.к. слишком разная бывает цветовая температура у источников света и слишком мало цветных плашек у X-rite Colorchecker passport (24). И ни одна из них не телесного цвета. Идеально было бы иметь шкалу на 128 плашек и все разных телесных цветов, это может и помогло бы.

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

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

Теория Цвета

• О цвете с самого начала

• Музей цветовых моделей

• Словарь теории цвета

• Как подобрать гармоничную комбинацию цветов

Словарь теории цвета

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

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

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

Цветовые модели и пространства RGB, sRGB и Adobe RGB

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

Вся суть представления цвета с помощью данной модели вытекает уже из её названия – (R) Red, (G) Green и (B) Blue (красный, зелёный и синий). Для получения любого цвета, используется процесс смешивания базовых цветов модели с различной их интенсивностью.

В модели RGB яркость каждого из основных цветов определяется значением от 0 до 255 (256 градаций). Состояние, когда все три цвета содержат максимальную яркость, создает белый цвет (RGB=255,255,255), напротив, при нулевом значении для всех трёх компонентов мы получаем черный цвет. Исходя из того, что все значения могут быть только целыми, цветовая модель RGB может воспроизвести 256*256*256=16 177 216 различных цветов.

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

Аддитивная цветовая модель RGB

RGB является адаптивной цветовой моделью, и прекрасно подходит для устройств, которые изначально отображают тёмный цвет, например, телевизор или монитор, а уже CMYK адаптирована для печатных изделий. RGB модель можно прекрасно продемонстрировать в виде куба, где отдельные оси x, y и z соответствуют заданному цвету. Фактически, значение любого цвета определяется значением трёх цветовых каналов модели RGB.

К сожалению, сама модель RGB не имеет совершенной спецификации своих основных цветов – красный, зелёный и синий, поэтому возникли разновидности цветовой RGB-модели.

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

RGB изображение и его три RGB компонента

Цветовое пространство модели sRGB

Огромное развитие компьютеров, мониторов и целого рядя других объектов, работающих с цветом, привело к необходимости сформировать достаточно общее, но хорошо определённое цветовое пространство. Таким образом, компании Microsoft и Hewlett-Packard определили цветовое пространство “standart RGB” (sRGB), которое стало широко используемым стандартом для различных устройств и программ, особенно для обычного домашнего и офисного использования.

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

Цветовое пространство модели Adobe RGB

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

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

Черный

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

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

Примеры:

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

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

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

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

Сильные черные акценты делают дизайн сайта утонченным.

Как выбрать цвет правильно?

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

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

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

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

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

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

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

Взаимосвязь калориметрии и воспроизведения цвета

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

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

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

Матье Наполи

Недавно я приобрел экран ASUS PA248Q для обработки фотографий (и для повседневного использования, и для игр: у меня только один дисплей). Этот дисплей предлагает режим «sRGB».

Прямо сейчас экран настроен на использование «стандартного режима», должен ли я вместо этого использовать «режим sRGB»?

Я вижу, что цвета не совпадают между двумя режимами, но какой из них лучше? Если это sRGB, почему он не включен по умолчанию?

Я должен использовать это только для определенных ситуаций?

Итай

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

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

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

1. Показывать цвета вне sRGB с хорошей точностью.
2. Показать sRGB цвета с хорошей точностью.

Однако приложения без управления цветом все равно будут отображать цвета неправильно, и в режиме по умолчанию они будут БОЛЬШЕ неправильными, чем в режиме sRGB. То, какой из них использовать в конечном итоге, будет зависеть от того, какие неуправляемые приложения вы используете для просмотра изображений. Это может включать в себя ваш веб-браузер в зависимости от того, какой из них и версию вы используете .

Erick_Avila

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

ОДНАКО, если вы также являетесь игроком, как вы заявляете, вы должны рассмотреть возможность перехода в режим игры / игры во время игры

Это очень важно для игровых мониторов

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

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

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

Тип 1 – Ресурсы с большим количеством контента или интернет-коммерция

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

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

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

Оранжевый (второстепенный цвет)

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

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

Примеры:

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

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

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

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

Оранжевые акценты добавляют визуального интереса и привлекают внимание к основному действию (call to action)