вышеЦвет в Web-дизайне
Цвет в Web-дизайне

Все, что Вы хотели знать о цвете, но боялись спросить

издание 3-е, переработанное и дополненное

Все живое стремится к цвету.
/И.-В. Гете "Учение о цветах"/


Содержание:

От автора

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

Сколько в радуге цветов?

  что такое цвет; сколько всего цветов; из чего цвет "сделан"; формат RGB; формат CMYK;

Свойства цвета

  как различить два оттенка; яркость, насыщенность, тон, светлота, теплота; формат HSV;

Сочетаемость цветов

  если два цвета рядом; виды контрастов; удобочитаемый текст; где брать "хорошие" сочетания;

Всякое-разное

  разные мелочи и не только;

Приложения /открываются в новом окне/

  Примеры цветов в формате RGB
  Названия цветов
  "Web-безопасные" цвета

1. От автора

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

Цель дизайна - сделать что-то, во-первых, удобно, а во-вторых, красиво (а иногда и наоборот). Что такое красота, почему одна картинка нравится, а другая нет, можно ли "проверить алгеброй гармонию"? Попробуем разобраться с этими вопросами, вернее, с малой частью огромного айсберга под именем "Эстетическое восприятие". Будем учиться вместе?

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

2. Сколько в радуге цветов?

Рис. 1. Цветовой круг Цвет - свойство весьма субъективное и как выглядит мир глазами другого человека очень трудно себе представить. Но, вне зависимости от того, как цвет выглядит в глазах индивидуума, он (этот индивидуум) называет красное красным, а голубое голубым. Сколько же всего существует цветов? По всем известной считалочке "Каждый Охотник Желает Знать Где Сидит Фазан" в радуге 7 цветов (Красный, Оранжевый, Желтый, Зеленый, Голубой, Синий и Фиолетовый), однако спектр радуги непрерывен и такое деление очень условно. Если взять спектр радуги и начать разбивать на цвета, как в считалочке "красный, оранжевый, желтый...", то после желтого через тот же промежуток будет следовать желто-зеленый. Далее можно выделить еще несколько оттенков, о которых считалочка умалчивает, всего же их получится 12. Причем цветовой спектр стремится "замкнуться": между первым и последним в считалочке красным и фиолетовым можно представить промежуточный, пурпурный цвет, спектр сложит свои концы и превратится в цветовое кольцо. Вот поэтому цвета спектра очень часто изображают в виде замкнутого цветового круга (хотя, иногда это может быть и треугольник, и иная фигура, но по сути все схемы подобны цветовому кругу), разные авторы выделяют разное число цветов спектра: 6, 7, 8, 12, 24, 256 и т. д. Я нарисовал круг с 12 цветами. Сразу оговорюсь, что это мой круг и оттенки в цветовых кругах из других источников могут не совпадать с моими, уж извините, но я исходил в данном случае не из чувственного восприятия, не из гармонии, а из алгебры, из образования цветов в формате RGB (о чем читайте далее). Известно и иное разложение спектра, основанное более на чувственном восприятии цвета, в нем, к примеру, синему цвету противопоставлен оранжевый, а желтому - фиолетовый.
Рис. 2. Цветовой цилиндрСложно? А на самом деле, ни круг, ни иная плоская фигура не в состоянии вместить всего разнообразия цветов и оттенков, ведь каждый цвет может быть и темнее, и светлее, и яснее, и блеклее. Все оттенки можно вложить только в объемную, трехмерную фигуру, у разных авторов это цветовые пирамиды, кубы, шары, цилиндры. И цветовой круг будет лишь одним срезом, сечением объемного тела. На рис. 2 я набросал несколько круговых сечений некоего "цветового цилиндра", построенного в осях трех параметров цвета. Но о свойствах цвета, отличающих один оттенок от другого, читайте в следующей главе, а пока мы вернемся к нашим чистым цветам.

Рис. 3. Цвета RGB Как можно описать цвет? Один цвет можно сложить из нескольких других. Если Вы рисовали акварелью, то, наверное, заметили, что при смешивании, например, синего и желтого можно получить зеленый. Если считать желтый и синий простыми цветами, то зеленый получится составным. Можно взять другую пару простых цветов, к примеру, тот же зеленый и красный. В акварели это увидеть уже сложно, а вот на экране монитора эти два цвета дадут желтый и желтый в этом случае будет составным. Полный спектр можно получить при смешивании в разных пропорциях трех разных цветов, только вот какие из них выбрать простыми? Оказывается, в человеческом глазе есть светочувствительные элементы только для трех разных цветов - красного, зеленого и синего и любой цвет мы видим как сочетание этих трех основных цветов. Так же работает и Ваш монитор: если посмотреть сквозь увеличительное стекло на экран, то можно рассмотреть мелкие точки только трех тех же основных цветов, а картинка-то на мониторе разноцветная! Из точек трех цветов складываются изображения любых оттенков. Значит, если мы запишем для какого-то цвета, процентное содержание в нем красного, синего и зеленого, то тем самым можем однозначно его определить. Вот вкратце весь подход для задания цветов в трехканальной цветовой модели RGB (от английского Red-Green-Blue, Красный-Зеленый-Синий). В Web-е применяется именно эта модель описания цвета. Как выглядит численное описание цвета в формате RGB? Например, для оранжевого вот как: #FF7F00. Страшно? Не бойтесь, все довольно просто. "#" - знак того, что это число в 16-ричном формате, дальше 6 циферок, по 2 на каждый цвет: красный, зеленый и синий соответственно. Циферки эти и означают содержание основного цвета. Максимум - шестнадцатеричное FF (в десятичном формате это будет 255), минимум - 0 (он и десятичный 0). #FF7F00 означает, что красного берем по максимуму, зеленого половинку, а синего вообще не возьмем (в десятичном выражении это 255 127 0, в процентном 100% 50% 0%), вот и получится оранжевый.

Небольшое отступление о глубине цвета. Как Вы уже успели заметить, для описания каждого из цветов в цветовой модели RGB используется две шестнадцатеричные цифры (16 бит) или десятичное число от 0 до 255, то есть каждый из основных цветов может иметь 256 градаций. Всего же возможных оттенков, охватываемых данной системой более 16 миллионов. Это соответствует режиму True Color.

Рис. 4. Цвета CMYK Кстати, RGB - отнюдь не единственный и не универсальный способ описания цвета. Мало того, что основными цветами можно выбрать совершенно другую тройку из цветового круга и остальные цвета "раскладывать по базису" выбранных цветов. Иногда нужна совершенно иная идеология составления цветовой схемы. Ваш цветной струйный принтер использует чернила из тройки бирюзовый-малиновый-желтый. В полиграфии применяется подобная схема под названием CMYK (англ. Cyan-Magenta-Yellow-blacK (в других источниках Cyan-Magenta-Yellow-Key). Чем же она отлична от RGB? Посмотрите еще раз на цветовой круг: бирюзовый-малиновый-желтый стоят напротив красного-зеленого-синего, являются дополнительными к ним и это, конечно же, не случайно. Обе эти системы (RGB и CMYK) различны по сути и предназначены для описания разных проявлений цвета: с помощью RGB описываются излучающие тела, с помощью CMYK - поглощающие. При поглощении части спектра тело отражает оставшуюся часть и при этом приобретает определенный цвет. В формате CMYK и использует для описания как раз поглощенные, "вычтенные" из белого оттенки, называемые еще субтрактивными. Чем они отличаются от "аддитивных" RGB? А тем, например, что при смешивании дадут не белый, а черный цвет, белый же получится при отсутствии краски. Это как раз и нужно в полиграфии, где лист без красок белый, а при окрашивании темнеет вплоть до черного. Кстати о черном: Вы заметили, что в названии схемы "CMYK" присутствует четвертая буква "K"? Зачем? Это четвертый канал для описания цвета специально для черной краски. Дело в том, что очень сложно получить краски чистых оттенков и в смеси они дают цвет, очень отдаленно напоминающий черный, а черный как назло, очень часто требуется в полиграфических работах. Вот и не стали люди голову ломать, а взяли и добавили четвертую краску. Так теперь и печатают. Ну и хватит с полиграфией, книжки печатать мы с Вами будем в следующий раз, давайте о чем-нибудь другом...

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

3. Свойства цвета

Сколько в русском языке можно насчитать названий цветов? Ну, постаравшись - штук 40, занявшись вопросом серьезно, думаю под 200. Но ведь цветов, как мы убедились в предыдущем параграфе, бесконечное множество. Прилагательное "синий" могут "приложить" к описанию и неба, и моря, и панели Нортон Коммандера, множество оттенков подпадает под одно название. Чем же они отличаются? Ну, во-первых, сразу можно предложить одно из свойств - яркость. Один оттенок цвета может быть ярче другого.

Яркость

Здесь приведены несколько (а именно 256, я, по крайней мере, на столько рассчитывал) градаций синего цвета. Слева расположен чисто синий #0000FF, справа - чисто черный #000000, в середине - промежуточные значения (например, на самой середке #00007F).

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

Чем еще можно различить оттенки одного цвета? Про один можно сказать, что он "густой, сочный, насыщенный синий", другой же "чуть-чуть синеватый". Поговорим о насыщенности цвета. Вот градации насыщенности синего цвета (заметьте, что яркость оттенков в данном случае одинакова):

Насыщенность

Слева у нас опять чистый синий #0000FF, справа - серый #7f7f7f (красного, зеленого и синего поровну), в середине промежуточные оттенки (доля синего постепенно снижается, доля красного и зеленого возрастает, компенсируя снижение яркости и при этом "обесцвечивает" оттенок). Посередке будет что-нибудь вроде #4141BF.

Если же долю синего не снижать, варьируя при этом долей красного и зеленого, то можно получить еще одну интересную градацию - от синего #0000FF до белого #FFFFFF, эта иллюстрация показывает такое свойство цвета, как светлота:

Светлота

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

Теплота

Слева очень холодный, просто замороженный голубой #00FFFF, справа несколько более теплый фиолетовый #FF00FF, между ними все оттенки синего, посередке чисто синий #0000FF.

Вообще же любой цвет можно однозначно определить не только тремя составляющими основных цветов, как в формате RGB, но и другой тройкой цифр, означающих собой три параметра цвета: тон, насыщенность и яркость. На этих трех китах держится другой формат описания цвета - HSV ( от англ. Hue-Saturation-Value "Тон-Насыщенность-Яркость"). Этот формат ничем не хуже (а иногда и удобнее), чем RGB, однако, в Web-е он не прижился, поэтому мы не станем на нем заострять внимание.

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

4. Сочетаемость цветов

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

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

Если же цветов больше двух, то сложностей еще больше (И не переусердствуйте в раскрашивании своей странички: лучше всего и удобнее читается двуцветный текст: черный по белому, трех же цветов будет достаточно для создания яркой, запоминающейся и красивой страницы. Не берите числом, берите уменьем!). Вообще угадать будут цвета сочетаться или нет - дело довольно сложное, каких-то законов здесь очень мало, есть куча рекомендаций и советов, не всегда оправданных. Если у Вас возникают проблемы с подбором цветовой гаммы, то не стоит изобретать велосипед, посмотрите вокруг себя, Вас окружают предметы, раскрашенные разными цветами, над которыми потрудились профессиональные дизайнеры, либо Господь Бог. В природе редко бывает дисгармония, любая веточка, лист или цветок могут Вас подтолкнуть к созданию страничке в необычном, но гармоничном колорите. Если и это сложно, то посмотрите на образцы работ признанных дизайнеров. Пусть это будет не обязательно веб-страничка. Посмотрите изучающим взглядом в телевизор: у каждого центрального телеканала свой стиль, свое оформление, цветовое решение. Присмотритесь к рекламным заставкам, оформлению студий, новостным программам: практически все они выполнены в очень грамотно подобранных цветовых сочетаниях и их опыт не грех использовать в своем творчестве. Огорчил меня только канал ТВЦ, у него жуткая цветовая схема: на теплом фоне кремово-бежевых тонов сверххолодные сине-голубые изображения. Бр-р-р-р! Не в каждом ночном кошмаре такое увидишь! Не будем на них равняться!

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

желтый желтый
предмет, расположенный на теплом фоне выглядит "холоднее" и наоборот; Серый рядом с красным выглядит холодноватым, рядом с синим или зеленым - тепловатым; на светлом фоне цвет предмета кажется более темным, на темном - светлым:
темно-зеленый темно-зеленый
Можно выделить два типа контраста: по светлоте и по тону. Контраст по светлоте оттенка в пределах одного цвета называется ахроматическим:
ахроматический контраст
и текст, и фон здесь одного цвета (синие), но Вы можете различить буквы. Чем различнее яркость оттенков - тем выше контраст. Если же надпись выполнить цветом отличным от цвета фона, пусть даже и той же яркости, то контраст будет называться хроматическим:
хроматический контраст
здесь величина контраста зависит от удаленности цветов фона и предмета. Чем контрастнее (и ахроматически, и хроматически) текст выглядит на фоне, тем легче его читать, однако контраст - это не все, например текст любого яркого цвета, написанный по черному фону, выглядит очень четко и контрастно, однако глаза быстро устают при чтении такого текста, особенно если он достаточно велик по объему, а некоторые достаточно контрастные сочетания цветов вообще "не катят" (© Арт. Лебедев). Проверить ахроматическую контрастность странички можно очень просто: представьте, что Ваша страничка просматривается на черно-белом экране. Проверить страничку в монохромном варианте можно в разных графических редакторах "обесцветив" скриншот с Вашей страницы. Текст при этом должен оставаться контрастным и хорошо читаемым.

У разных народов, в разных культурах разные представления о цвете и сочетаемости цветов. Самыми древними всеми выделяемыми считаются три цвета: белый, черный и красный. Для каждого народа они несут совершенно разную, часто противоположную символическую смысловую нагрузку, однако это сочетание цветов будет всегда классическим, им можно выразить все, что угодно. Это давно заметили и художники и дизайнеры. Вот слова дизайнера Роджера Блэка: «The First Color is White, The Second Color is Black, The Third Color is Red». (Первый цвет - белый, второй - черный, третий - красный). И все! И больше ничего не надо, все есть в этой фразе, подумайте над ней!

Интересны нам будут и цветовые законы в геральдике (рисовании гербов). Вообще, герб, если он составлен по геральдическим правилам - верх искусства: при минимальном наборе цветов, и символов на небольшом пространстве он закончен и самодостаточен, как художественное произведение и при этом максимально оригинален и символичен.герб г. Королев Оказывается, в гербах разрешалось использовать лишь 4 (четыре!) цвета: красный, синий, зеленый и черный и 2 "металла": серебро (белый цвет) и золото (желтый). При этом существовало строгое правило: никакие два цвета из четырех не должны следовать друг за другом или накладываться один на другой, не должны нигде соприкасаться и два металла. Очень здравые правила! Конечно, они очень сильно ограничивают свободу творчества, но, если им следовать, то никогда не получишь некрасивого сочетания цветов, либо аляпистого разноцветия. Жаль, что современные (да и не очень современные) геральдмейстеры часто забывают об этих правилах. Например, наш российский триколор флажок вещь "неправильная", так как Петр I "слизал" его с голландского красно-бело-синего флага (где два "цвета" разделялись "металлом") и, чтобы скрыть улики, перемешал цвета. Теперь на флаге соседствуют синий с красным, ну да ничего, за 300 лет все привыкли.

А что нам скажет алгебра о гармонии? Вернемся снова к цветовому кругу.Сочетание 1 Давайте нарисуем маленькую абстрактную картинку и попробуем ее раскрашивать разными красками. Для начала возьмем идеально сочетаемые черный и белый:
Пример 1 Ну что же, картинка - как картинка, максимально контрастная и цвета гармоничны. Но не цветная... Давайте раскрасим ее! А какие краски из круга выбрать? Первое, пришедшее в голову решение - взять два максимально удаленных друг от друга цвета. Ткнем пальцем в круг наугад. Фиолетовый? Прекрасно! А напротив него зеленый. Посмотрим, что получится:
Пример 2Ну что я об этом могу сказать? Интересно, необычно, ярко, контрастно, вызывающе. Если нет соприкосновения цветов максимальной насыщенности и яркости, то картинка неплохо смотрится, а иначе столь резкая смена цвета режет глаз. Для чего подходят подобные сочетания дополнительных цветов? Если Вам нужно выразить энергичность, молодость, даже агрессивность, крутость, буйство красок и т. п. - это Ваша схема. Исключение может составить лишь известная классическая пара противоположных цветов, мирно сосуществующих друг с другом. Догадались какая? Правильно, синий с желтым:
Пример 3Эти контрастные цвета, сами по себе яркие, при встрече усиливают яркость друг друга. А вот что писал голландский живописец, большой специалист в построении композиций из ярких цветов Ван Гог: "Нет синего без желтого и оранжевого; значит, если вы пишете синее, давайте рядом и желтое, и оранжевое, не так ли?" Мне к этому просто нечего добавить.
А если нам нужно три цвета, как их выбрать? Сочетание 2Давайте снова посмотрим на сочетание дополнительных цветов, например, синий-желтый, только теперь вместо одного из них возьмем два соседних. Такая схема называется цвета, смежные с дополнительным:
Пример 4Такое сочетание будет достаточно контрастным, но более мягким, чем в предыдущем варианте.
Можно попробовать выбрать три равноудаленных друг от друга цвета. Сочетание 3Выберем любую попавшуюся триаду:Пример 5 Такая тройка цветов самодостаточна, эти цвета дополняют друг друга, образуют палитру насыщенных цветов и оттенков.
Попробуем посмотреть и на другую знаменитую триаду: красный-зеленый-синий:Пример 6Тоже хорошее сочетаньице, ничего не убавить (его будет не хватать) и не прибавить (будет лишним, если только оно не черное или белое).
А можно тройку цветов выбрать и по-другому: Сочетание 4брать не удаленные друг от друга, а наоборот смежные цвета. Попробуем?Пример 7 Опять ткнем пальцем в круг и возьмем этот цвет и пару соседних с ним. Что получилось? На удивление неплохо, спокойно, стильно, солидно. Если Вам необходимо будет создать произведение в строгом ключе - присмотритесь к схемам со смежными цветами.

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

?
на месте "?" может стоять любой яркий цвет: оранжевый, бирюзовый, золотистый, розовый.

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

А вот какие сочетания я (хм...) позаимствовал у Арт. Лебедева:

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

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

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

5. Всякое-разное

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

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

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

В. Суриков. Утро стрелецкой казни. Фрагмент. На границе соседствующих цветов часто можно заметить явление цветового (хроматического) контраста. Серый предмет на границе с цветным фоном приобретает оттенок, контрастный цвету фона. Дополнительные цвета в соседстве друг с другом приобретают большую насыщенность. Если необходимо, например, усилить красный цвет, надо рядом с ним поместить бирюзовый. Желтый на синем добавляет яркости и себе и фону. Каких чудес можно добиться, используя знание психологии восприятия цветового контраста, лучше показывать на примерах. Взгляните на фрагмент суриковского "Утра...": у стрельца в руке горящая свеча, пламя которой, вопреки сложившейся традиции, изображено на светлом фоне. Как же заставить "засветиться" пламя, сделать его "белее белого"? Пламя "горит", благодаря одному лишь контрасту, его яркость лишь психологическая, на самом деле яркости цвета пламени и фона (рубахи) приблизительно равны. Верх мастерства!

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

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

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

Таблица примеров плохого стиля в сочетании цветов в моделях одежды:
Цвет Не сочетается с
Чисто красный (в натуре!) Фиолетовый, кирпичный, коричневый, каштановый, красновато-желтый
Розовый Синий, красный, каштановый, сиреневый
Оранжевый Красный
Коричневый Бордо, каштановый, сиреневый, розовый
Желтый Бордо, розовый
Голубой Бордо, темно-фиолетовый, сиреневый
Синий Зеленый, сиреневый, розовый, коричневый
Фиолетовый Красный, кирпичный
Сиреневый Синий, кирпичный, красный, бордо, золотистый, розовый
Бордо Сиреневый, каштановый, красный, золотистый
Серый Коричневый, беж
кстати, я лично не под каждой строчкой этой таблички подпишусь. Одежду таких цветов я носить, конечно, не стал бы, но вот на странице некоторые сочетаньица выглядели бы весьма ярко и живенько...

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

6. Приложения

1. Образование цвета в RGB. Если Вам еще не совсем понятно, как из трех составляющих складывается цвет, загляните табличку, которую я когда-то составил для себя, чтобы выбрать "свой" цвет для страницы (правда, в таблицу сведены только светлые и насыщенные тона). Мне это помогло ("мой" цвет #ffdfbf). Может и Вам поможет? Для того чтобы ускорить загрузку статьи в Вашем браузере и облегчить работу с приложением, таблица открывается как отдельный документ.
2. Названия цветов. Вместо непонятных символов #ff0000 Вы вполне можете использовать нормальное английское слово red и это будет означать один и тот же цвет. Привожу Вам довольно обширный список названий, только учтите, что не все из них понимаются разными браузерами (IE, например, знает их меньше, чем NN) и все-таки лучше проверить страничку в разных браузерах во избежание недоразумений. Таблица открывается как отдельный документ.
3. "Web-безопасные" цвета. Даже если Вы подобрали хорошие цвета для странички, Вы уверены, что все посетители увидят именно то, что Вы задумали? Дело в том, что часто у браузера не хватает (по разным причинам) цветов, чтобы правильно отобразить содержимое странички и тогда он (браузер) подменяет Ваши цвета теми, которые есть в палитре у него. Особенно это актуально для картинок при просмотре их в режиме с 256 цветами. А существуют ли такие цвета, которые браузеры не смогут испортить? Да, они есть (черное всегда будет черным, а красное - красным), всего их 63 = 216 штук и все они (по-моему, я ничего не пропустил) сведены в отдельную таблицу.

CopyRight © 2000-2001 by HECYCBET
Rambler's Top100
Hosted by uCoz