Однажды, приступая к работе над созданием своего сайта, я столкнулся с проблемой выбора цветовой гаммы при оформлении главной страницы. Да, можно, конечно же сделать начальный лист ярким и красочным, если использовать так называемые "безопасные цвета", отлично воспринимаемые без искажений большинством браузеров. Тогда и проблем не было бы. Но меня, выросшего в эпоху застоя, честно говоря, немного подташнивает от ярких плакатно-кричащих красок. Хочется чего-нибудь ненавязчивого, мягкого, теплого, постельного..., простите, пастельного. Но, перелистав немало электронных материалов о цвете, увидел, что по интересующему меня вопросу написано либо слишком поверхностно, либо слишком заумно.
Вру. Ничего я не читал. Так, кое-что где-то слышал, кое-что где-то видел. Поэтому я, питая определенную страсть к систематизации, решил самостоятельно исследовать некоторые аспекты цветовой палитры. Да и привести свои мысли в порядок не мешало бы.
Прекрасно понимая, что изобретаю велосипед, сразу оговорюсь: я не претендую на оригинальность мысли и не выдаю свои выводы за аксиому. Если в размышлениях засквозит алогичность или где-то ошибусь — не обессудьте.
Аминь.
Солнце — воистину универсальный источник света. Оно всегда обращало на себя внимание наших далеких предков, восхищало нас и долго еще будет поражать впечатление наших потомков. О нем немало написано научных и поэтических трудов. Поэтому, дорогой читатель, на этих страницах лишь вкратце коснемся этой темы.
Для того, чтобы показаться умным, я мог бы, конечно, сейчас пополемизировать о таких свойствах света, как дисперсия, дифракция, интерполяция, преломление, отражение и т.д. Но я обманул бы самого себя. А мне хотелось бы вместе с тобой, может быть с твоей помощью, упорядочить свои мысли и обрывки знаний в этой области.
Итак. Начнем с самого начала и позволим себе немного углубиться в теорию.
Представь себе, дорогой читатель, настенные часы с маятником и обрати внимание на сам маятник. Из самого левого своего положения он движется направо и, достигая крайней правой точки своего движения, возвращается в первоначальное положение. Это называется периодом колебания. Секундная стрелка при этом передвигается на одно деление вперед. Получается, что маятник совершил одно колебание в секунду.
Если частоту колебаний маятника увеличить вдвое, то он будет совершать два колебания в секунду, если втрое, то — три. Поэтому запомним, что частотой называют количество колебаний в секунду.
Частоту обозначают латинской буквой "f". Имеряют ее в герцах и, чтобы было понятно, что это частота, а не, скажем, килограммы, то после цифр ставят буквы "Гц" или (по международному стандарту) "Hz". Например:f = 20000 Hz
Теперь, немного устав от теорий, но зная, что такое часота и с чем ее едят, вернемся в реальный мир. Мир отовсюду звучащей музыки, мир светящейся, мерцающей и мигающей не только ночью рекламы, мир телевидения, мир мчащихся автомобилей, самолетов и поездов, мир космических полетов и компьютерных технологий. Мир, насквозь пронизанный электро-магнитными волнами. Да, да, дорогой читатель! Все это звучащее и сверкающее есть не что иное, как обыкновенные электро-магнитные волны. И именно они, воздействуя с той или иной частотой на наши органы чувств, вызывают у нас соответствующие ощущения. Но оставим в покое звук, пусть им занимается акустики, и обратим внимание на более высокую частоту.
Существует такой интересный раздел науки, как спектроскопия, которая изучает электро-магнитные колебания. Эти колебания, излучаемые, кстати, не только солнцем, можно разделить на радиоизлучение (радио- и телечастоты), инфракрасное излучение (тепло), видимое излучение (воспринимаемое человеческим глазом), ультрафиолетовое излучение (вспомни лето, море, солнце, пляж...), рентгеновское излучение (об этом мы тоже слышали), гамма-излучение (вспомни Чернобыль). Существуют еще излучения: какое-то на букву "Ф" (очевидно фамилия ученого), молекулярное, лазерное, кристаллическое... Но не будем себе всем этим забивать голову. Отметим лишь, что свет, видимый свет, о котором здесь идет речь, является электро-магнитными колебаниями очень высокой частоты.
Позволим себе немного отдохнуть от столь глубоких размышлений и представим себе, что мы находимся где-то в тенистой роще на берегу неглубокого ручья, в котором резвится веселая стайка золотых рыбок. Возьмем прутик и попробуем вспугнуть их. Хочу успокоить всех сторонников Общества защиты животных, что рыбок мы трогать не будем, а прутик нам нужен только для научных экспериментов. Итак, если прутик погрузить в воду, можно заметить, что он уже не прямой, а как бы согнулся в месте, где он заходит в воду. Этот эффект называется преломлением и вызван причинами, о которых мы здесь не будем говорить. Важно лишь то, что в данный момент прутик находится в двух средах: в воздухе и в воде. Если вернуться опять к нашей теме, то свет тоже все время находится далеко не в вакууме, а проходит через какие-либо прозрачные среды: атмосферу Земли, стекла витрин, солнцезащитные стекла очков. Даже через наши глаза. И везде он преломляется. А при преломлении несколько изменяется частота элоктро-магнитных волн.
Кроме того, свет, как и все электро-магнитные волны, может отражаться. Сейчас невольно вспоминются солнечные зайчики из детства. Так вот, при отражении света от какой-нибудь поверхности, которая необязательно должна быть прозрачной, тоже изменяется его частота.
— Зачем мне знать весь этот бред? — спросишь ты. Но, мой дорогой многострадальный читатель, я уже подхожу к самой сути нашей темы.
Дело в том, что свет, претерпевая все эти преломления, отражения и то, что называется всякими умными труднопроизносимыми и труднозапоминаемыми словами, которые я приводил выше и больше не собираюсь их повторять, чтобы не испытывать твое и без того уже истощенное терпение, определенным образом меняет свою частоту. Все вместе взятое производит эффект разложения света. То есть луч света начинает распадаться в виде веера или веника, если так понятнее, где каждая соломинка имеет свою частоту. Причем эти "соломинки" выстраиваются в определенном порядке, по возрастанию частоты или по убыванию.
Короче говоря, если смотреть на такой "веер" (или "веник"?), мы можем наблюдать настоящую радугу. Считается, что радуга состоит из семи основных цветов. Если ты хорошо учился в школе, то наверное помнишь фразу "Каждый Охотник Желает Знать, Где Сидит Фазан", где начальные буквы слов соответствуют начальным буквам цветов радуги, в которой они следуют друг за другом. Вообще то радуга имеет миллионы цветов, но они не такой интенсивности (яркости), как эти семь, поэтому играют (хотя и незаслуженно) как бы второстепенную роль.
Подведем итоги вышесказанного.
Электро-магнитные колебания в зависимости от частоты в диапазоне различаемого излучения, попадая на сетчатку человеческого глаза, вызывают определенное цветоощущение.
Да, я и сам вижу, что слишком заумно получилось. Тогда вернемся к нашему "венику". То, что человеческий глаз способен различать, так это от первой "соломинки" с самой низкой частотой (пурпурный цвет) и до последней — с самой высокой (фиолетовый цвет). Все, что находится за пределами этого "веника", человеческий глаз просто не воспринимает.
На этом мы с тобой, дорогой читатель, покончим со всеми непонятными словами, забудем их и больше не будем вспоминать.
Еще в те далекие древние времена человек уже пытался как-то скрасить свою однообразную повседневность. Он разрисовывал стены своего жилища, украшал свою кожу татуировкой, одевал на себя яркие украшения. Тяга к эстетике не пропала в нем и до наших времен. И в этом отношении практически ничего не изменилось. Влияние цвета на психику человека давно изучено и выпущено изрядное количество научных трудов. Цвет может поднимать настроение и подавлять его, может быть веселым и мрачным, может возбуждать и угнетать. Эти характеристики цвета очень широко используются в рекламной индустрии. Разные цвета по разному воспринимаются человеком в зависимости от его настроения, образа жизни, мироощущения. Это несложно увидеть, если вспомнить серые дома доперестроечного периода, напыщенные станции московского метрополитена, деловые кварталы Нью-Йорка или ночной Лас Вегас. Различные цветовые решения принимаются, например, на праздничных концертах и в официальных церемониях, в поздравительных открытках и в деловых бумагах, в вечерних костюмах и в повседневной одежде. Только человек с полным отсутствием вкуса может недооценивать значение цвета в той или иной ситуации.
Анекдот по теме:
Я купил себе машину.
— Какого цвета?
— Ты закат видел?
— Ну?..
— Такая самая, только зеленая.
Для того, чтобы рассказать тебе, как получается цвет на экране твоего монитора, я сначала должен объяснить в двух словах принцип его работы. Поэтому наберись терпения и следи за мыслью.
Внутри монитора есть три так называемые электронные пушки, которые через специальные фильтры, пропускающие только три цвета (красный, зеленый и синий), "выстреливают" поток электронов в виде тончайшего луча. Этим лучом управляет специальная система отклонения, посылающая его туда, куда надо. Экран, на который ты сейчас смотришь, с обратной стороны покрыт люминофором и электроны, попадая на него, заставляют его светиться. А ты, дорогой читатель, сидя перед монитором, уже видишь готовое изображение.
Примечание: Часть электронов, пробивая люминофор, пролетают дальше. Так что лучше находиться от монитора не ближе расстояния вытянутой руки и не на его осевой линии. Это не касается жидкокристаллических мониторов. Там принцип получения изображения несколько иной.
Если разрешение твоего монитора установлено 800х600, это значит, что видимая часть экрана разделена на 600 горизонтальных полосок одинаковой ширины и каждая из них имеет 800 одинаковых отрезков. Эти отрезки выглядят в ввиде маленьких квадратиков, но невооруженным глазом воспринимаются как точки. Эти точки называются пикселями.
В зависимости от разрешения экрана и, следовательно, от количества пикселей на нем меняется и величина самих пикселей, а от этого, в свою очередь, зависит качество изображения.
Для того, чтобы вывести на экран изображение, электронные пушки, начиная с крайней линии, посылают поток электронов трех цветов на крайний пиксель, затем на второй, на третий и, дойдя до конца линии, переходят на крайний пиксель следующей линии. И так до тех пор, пока не зажжется последний пиксель на последней линии. Затем все начинается сначала. Этот процесс повторяется с частотой от 60 до 100 раз в секунду.
Цвет каждого пикселя зависит от смешения сигналов, посылаемых на него электронными пушками. То есть, если сигнал посылает только пушка, излучающая красный цвет, то и пиксель будет тоже красного цвета, а если красная и зеленая, то получим пиксель желтого цвета.
При определенных комбинациях, когда та или иная электронная пушка включена или выключена, можно получить 8 цветов окрашивания пиксе| Color | Color's name | R | G | B | Color | Color's name | R | G | B | |
|---|---|---|---|---|---|---|---|---|---|---|
| Black | 0 | 0 | 0 | Red | 1 | 0 | 0 | |||
| Blue | 0 | 0 | 1 | Fuchsia | 1 | 0 | 1 | |||
| Lime | 0 | 1 | 0 | Yellow | 1 | 1 | 0 | Aqua | 0 | 1 | 1 | White | 1 | 1 | 1 |
Следующий шаг в развитии компьютерных технологий позволил изменять величину сигнала каждого цвета, что сказалось и на изменении цветовой палитры изображений. Появились цветовые оттенки, полутона, градации. Современные компьютеры позволяют разбивать уровень сигнала каждого из трех цветов на 256 уровней. То есть от 0, когда сигнала нет, до 255, когда сигнал максимальный.
— Почему 256, а не другая цифра? — спросишь ты.
Так сложилось, что компьютеры при определении цвета используют шестнадцатиричную систему. И, так же, как в десятиричной системе следущим порядком после десяти является сотня, в шестнадцатиричной системе следующим порядком после 16 является (16х16) 256.
А теперь посчитай, дорогой читатель, сколько цветов мы можем получить при таком раскладе.
256х256х256=16'777'216
Круто, не правда ли?
Но радоваться еще рано. Цветовую палитру в почти 17 миллионов цветов ты можешь увидеть на своем мониторе если у тебя будет соответствующая видеокарта. А пикселей то всего (600х800) 480 тысяч. Можно, конечно установить разрешение 1024х768, но это увеличит число пикселей меньше, чем в два раза. Но и огорчаться по этому поводу тоже не стоит хотя бы по нескольким причинам:
— Так для чего же тогда целых 17 миллионов цветов?
Так не всю же цветовую палитру надо использовать на одной страничке! Эти миллионы применяются в фотографии, в растровой графике, где бывает необходимо передать плавный переход от одного цвета к другому. Для того, чтобы придать изображению максимальную приближенность к реальности.
Но давай, дорогой читатель, ограничимся темой оформления сайта и только в этом контексте будем рассматривать невообразимое количество цветов.
Для того, чтобы твой сайт со всеми задуманными тобой цветами одинаково смотрелся на любом компьютере в любом браузере, надо просто пользоваться всего 16-тью цветами, называемыми основными. Пусть это будут цвета логотипа или баннера, цвет фона странички или выделенного текста, цвет рамки таблицы или разделительной линии, но ты будешь уверен в том, что вся многомиллионная аудитория, рвущаяся к тебе на сайт, увидит его в том виде, в каком ты его задумал. Вот эти основные цвета.
| Color | Color's name | R | G | B | Color | Color's name | R | G | B | |
|---|---|---|---|---|---|---|---|---|---|---|
| Black | 00 | 00 | 00 | Purple | 80 | 00 | 80 | |||
| Navy | 00 | 00 | 80 | Olive | 80 | 80 | 00 | |||
| Blue | 00 | 00 | FF | Gray | 80 | 80 | 80 | |||
| Green | 00 | 80 | 00 | Silver | C0 | C0 | C0 | |||
| Teal | 00 | 80 | 80 | Red | FF | 00 | 00 | |||
| Lime | 00 | FF | 00 | Fuchsia | FF | 00 | FF | |||
| Aqua | 00 | FF | FF | Yellow | FF | FF | 00 | |||
| Maroon | 80 | 00 | 00 | White | FF | FF | FF |
Да, не густо...
Но поверь мне, дорогой читатель, что этими цветами пользуются профессиональные web-мастера и дизайнеры, если хотят добиться максимальной читаемости сайтов.
Можно, конечно, несколько расширить цветовую палитру если, допустим, плюнуть на тех, кто пользуется слишком допотопными компьютерами со старыми и дешевыми браузерами...
Эй, эй! Потише! Я же сказал "допустим"!!!
Да, так вот. Большинство современных широкораспространенных браузеров способно поддерживать так называемые "базовые цвета".
| Aliceblue F0F8FF |
Antiquewhite FAEBD7 |
Aqua 00FFFF |
Aquamarine 7FFFD4 |
| Azure F0FFFF |
Beige F5F5DC |
Bisque FFE4C4 |
Black 000000 |
| Blanchedalmond FFEBCD |
Blue 0000FF |
Blueviolet 8A2BE2 |
Brown A52A2A |
| Burlywood DEB887 |
Cadetblue 5F9EA0 |
Chartreuse 7FFF00 |
Chocolate D2691E |
| Coral FF7F50 |
Cornflowerblue 6495ED |
Cornsilk FFF8DC |
Crimson DC143C |
| Cyan 00FFFF |
Darkblue 00008B |
Darkcyan 008B8B |
Darkgoldenrod B8860B |
| Darkgray A9A9A9 |
Darkgreen 006400 |
Darkkhaki BDB76B |
Darkmagenta 8B008B |
| Darkolivegreen 556B2F |
Darkorange FF8C00 |
Darkorchid 9932CC |
Darkred 8B0000 |
| Darksalmon E9967A |
Darkseagreen 8FBC8F |
Darkslateblue 483D8B |
Darkslategray 2F4F4F |
| Darkturquoise 00CED1 |
Darkviolet 9400D3 |
Deeppink FF1493 |
Deepskyblue 00BFFF |
| Dimgray 696969 |
Dodgerblue 1E90FF |
Firebrick B22222 |
Floralwhite FFFAF0 |
| Forestgreen 228B22 |
Fuchsia FF00FF |
Gainsboro DCDCDC |
Ghostwhite F8F8FF |
| Gold FFD700 |
Goldenrod DAA520 |
Gray 808080 |
Green 008000 |
| Greenyellow ADFF2F |
Honeydew F0FFF0 |
Hotpink FF69B4 |
Indianred CD5C5C |
| Indigo 4B0082 |
Ivory FFFFF0 |
Khaki F0E68C |
Lavendar E6E6FA |
| Lavenderblush FFF0F5 |
Lawngreen 7CFC00 |
Lemonchiffon FFFACD |
Lightblue ADD8E6 |
| Lightcoral F08080 |
Lightcyan E0FFFF |
Lightgoldenrodyellow FAFAD2 |
Lightgreen 90EE90 |
| Lightgrey D3D3D3 |
Lightpink FFB6C1 |
Lightsalmon FFA07A |
Lightseagreen 20B2AA |
| Lightskyblue 87CEFA |
Lightslategray 778899 |
Lightsteelblue B0C4DE |
Lightyellow FFFFE0 |
| Limegreen 32CD32 |
Linen FAF0E6 |
Magenta FF00FF |
|
| Maroon 800000 |
Mediumauqamarine 66CDAA |
Mediumblue 0000CD |
Mediumorchid BA55D3 |
| Mediumpurple 9370D8 |
Mediumseagreen 3CB371 |
Mediumslateblue 7B68EE |
Mediumspringgreen 00FA9A |
| Mediumturquoise 48D1CC |
Mediumvioletred C71585 |
Midnightblue 191970 |
Mintcream F5FFFA |
| Mistyrose FFE4E1 |
Moccasin FFE4B5 |
Navajowhite FFDEAD |
Navy 000080 |
| Oldlace FDF5E6 |
Olive 808000 |
Olivedrab 688E23 |
Orange FFA500 |
| Orangered FF4500 |
Orchid DA70D6 |
Palegoldenrod EEE8AA |
Palegreen 98FB98 |
| Paleturquoise AFEEEE |
Palevioletred D87093 |
Papayawhip FFEFD5 |
Peachpuff FFDAB9 |
| Peru CD853F |
Pink FFC0CB |
Plum DDA0DD |
Powderblue B0E0E6 |
| Purple 800080 |
Red FF0000 |
Rosybrown BC8F8F |
Royalblue 4169E1 |
| Saddlebrown 8B4513 |
Salmon FA8072 |
Sandybrown F4A460 |
Seagreen 2E8B57 |
| Seashell FFF5EE |
Sienna A0522D |
Silver C0C0C0 |
Skyblue 87CEEB |
| Slateblue 6A5ACD |
Slategray 708090 |
Snow FFFAFA |
Springgreen 00FF7F |
| Steelblue 4682B4 |
Tan D2B48C |
Teal 008080 |
Thistle D8BFD8 |
| Tomato FF6347 |
Turquoise 40E0D0 |
Violet EE82EE |
Wheat F5DEB3 |
| White FFFFFF |
Whitesmoke F5F5F5 |
Yellow FFFF00 |
YellowGreen 9ACD32 |
Как ты уже, наверное, понял, дорогой читатель, цвет задается RGB-значением в цифрах или названием самого цвета из 140 цветов в вышеприведенной таблицы. Например:
<font color=#FF1493><b>Строка темнорозового цвета</b></font>
<font color="seagreen"><b>Строка цвета "SeaGreen"</b></font>
В результате получим:
Строка темнорозового цвета
Строка цвета "SeaGreen"
Примечание: некоторые названия цветов не воспринимаются браузерами Netscape Navigator и Opera, хотя с RGB-значением они воспроизводят соответствующий цвет.
Но и это еще не все. Существует 216 цветов, включая основные, которые можно использовать на любом браузере без опасения, что они могут быть не восприняты или искажены. Эти цвета так и называются — "безопасными".
Безопасная палитра цветов |
|||||
|---|---|---|---|---|---|
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC3FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Вот, пожалуй, мы с тобой, дорогой читатель, и разобрались с теорией. И теперь я тебя приглашаю в свою лабораторию.
Пастели и постели
Размышления о цвете
Лаборатория цвета - 1
Лаборатория цвета - 2
Лаборатория цвета - 3
Разное
Условные единицы
На что обращают внимание мужчины
Галя
Красная Шапочка