Мини-лекции 13. Цвет на WEB-страницах

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

   Зачем, зачем на белом свете
   Есть безответная любовь...

   Белый свет или как вы его называют цвет, еcть сумма всех цветов видимых человеком. Чёрный же полное отсутствие каких либо цветов. Серый (тот же белый но малой интенсивности) промежуточное значение между белым и чёрным, весьма расплывчатое понятие! Если взять три листа бумаги разной интенсивности, то для нас будут существовать как бы три цвета белый, серый и тёмно-серый. Но если Вам показать серый и тёмно-серый (если Вы конечно до того не видели белого), то Вы скажете, что перед Вами белый цвет и серый. Субъективное восприятие. Всё в сравнении! И вскоре Вы согласитесь с моими выводами.

   ЦВЕТОВЫЕ МОДЕЛИ

   Чтобы как-то характеризовать используемые в жизни цвета и были придуманы цветовые модели. На рис1а схема цветовой модели RGB. Это наша родёмая модель используемая в мониторах и сканерах. RGB, это RED — красный, GREEN — зелёный, BLUE — синий. Три цвета смешиваясь дают белый цвет (свет), неправильный треугольник в центре. Попарное пересечение даёт дополнительные цвета YCM, это YELLOW — жёлтый, CYAN — голубой, MAGENTA — пурпурный. RGB — трёхканальная цветовая модель. Каждый компонент может принимать 256 значений интенсивности цвета от максимума 255 до минимума 0, соответствующий ЧЁРНОМУ цвету! Вот и получается полный раздрай, чёрный цвет есть, но у него интенсивность по нулям! То есть его нет! Это всё равно как особенность русского языка:«Эти гуси, свиньи залезли в чужой огород, собаки!» Одно радует, что это не мы придумали эту словестную лабуду (про чёрный цвет)!

   К сожалению существует ещё одна модель, — CMYK. CMYK от CYAN-MAGENTA-YELLOW. А, К каким боком? Дело в том, что по аналогии с RGB, CMY в сумме даёт не белый, а чёрный! И всё потому-как RGB модель для светящихся (излучающих свет) мониторов, а CMY для печати (типографской) на бумаге. То есть на отражение и каждый компонент отражает свой цвет и поглощает чужие... В итоге все вместе дают чёрный. Но краски не идеальные и не дают в сумме черноты и приходится использовать чёрный Краситель (BLACK)! Вот откуда взялась [К]!

   Откуда же взялось это магическое число 256?! Каждый цветовой канал кодирует байт который состоит из восьми битов. Бит в свою очередь может принимать два значения [0,1], а два в восьмой степени и равняется 256! Каждый канал может принимать значения от 0 до 255 в десятичной системе или от 0 да FF в шестнадцатеричной системе счисления. На рис3 и показаны сравнения систем.

   Описания цветов в WEB-дизайне могут как в десятичной системе счисления, так и шестадцатеричной. Как пример некоторых цветов на рис2. Компьютер (браузер поймёт и так и эдак)! Каждый цвет описывается как сумма трёх цветов и неважно, что некоторые будут отсутствовать?! Так красный цвет в RGB системе будет 255, 0, 0 Как видите зелёный и синий по нулям, но всё равно нужно так указать браузеру. А в шестнадцатеричной будет выглядеть так #FF0000. Но если выражение цвета состоит из двойных одинаковых цифр (букв), то можно писать в сокращённом варианте, вот так: #F00 и браузер поймёт. Решётка служит опознавательным знаком, показывающим, что это цвет, а не счёт за ЖКХ не услуги!

   Все премудрости цветового WEB-дизайна тема длинная и в три слова не поместится... Начинайте с простого, а мастерство со временем придёт и к Вам!

   И напоследок хочу предложить программу-помощницу «HTML Colors 2000». Она поможет Вам подобрать цвет. Во-первых на рис1b медальон составленный из образцов так называемых Web-цветов. Стрелочка указывает на один из них. Слева на рис1 окно программы где показан в окошечке сам цвет, а в другом окошечке HTML-код. Для данного цвета это #СС99СС. А, почему такое определение, что другие цвета отсутствуют? Нет, дело не в отсутствии, а в том, что программа по компьютерным меркам старая-престарая! В то время в WEB-дизайне был самый настоящий бардак (как, впрочем и по всей стране в целом).

   Каждый производитель браузеров вёл свою политику и проталкивал свои интересы. И это всё отражалось в отображении страниц и в частности цветов. То есть, все браузеры правильно отображали только тот джентльменский набор из медальона! Остальные, кто во, что горазд! Конечно сейчас многие браузеры многое понимают... А программа тоже немного... А немного, это как? А, вот так! Нужно щёлкнуть по пимпочке Screen. В левом верхнем углу монитора появится окошечко разделённое горизонтальной чертой, на рис3 слева. Стоит указатель мышки навести на цвет чего-нибудь и в окошечке появится сам цвет, а над ним тот самый HTM-код. Думаю жителям ПРОЗы это будет интересно? Вот из таких двух цветов и состоит фон логотипа ПРОЗА РУ?! На рис1с как раз в окошечке программы (фрагмента программы) сам цвет и слева HTML-код.

   Мне осталось лишь рассказать о левой части окна программы. Это три движка-регулятора значений RGB от 0 до 255. Мышкой нажимаете на движок. Затем ведёте его до какого-то положения и отпускаете. Над регулятором появляется цифорка. Одновременно меняется HTML-код и цвет в окошке. Так Вы можете набрать сочетание значений RGB и получить понравившийся код-цвет.

   По какому же принципу строятся те самые «безопасные» WEB-цвета? Код любого такого цвета состоит из сочетаний пар одинаковых чисел шестнадцатеричной системы счисления. Примерно так: #XXYYZZ. Вот на рис1 как раз такой правильный и очень «безопасный» цвет #CC99CC. Ну, он же из медальона! Раз уж мы коснулись темы «безопасности», то? То все три компоненты «безопасных» цветов могут принимать только такие значения: 0, 51, 102, 153, 204 и 255. А в шестнадцатеричной записи: 00, 33, 66, 99, СС и FF. Получается, что этих «безопасных» всего 216! А вот прозоровские цвета уже не подходят под «безопасные»: #AAAAAA и #60B050

   Вот пожалуй и всё про цветочки...