0 .. 1 .. 1-2 .. 2 .. 3 .. 4 .. 5 .. 6 .. 7 .. 8 .. 9 .. 10 .. 11 .. 11-2 .. 12 .. 13 .. 14 .. 15 .. 16 .. 16-2 .. 16-3 .. 17 .. 18 .. 19 .. >>>

1. Базовые цвета HTML и цветовые схемы
2. Применение цветов к разным HTML-тегам
3. Определение цвета программой Adobe Photoshop

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

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

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

Цвета для странички можно применять к самым различным HTML-тегам, важно только знать, действует ли в том или ином теге использование цветов. Цвет можно вносить двумя способами: названием цвета (например red - красный) или в виде цифрового значения (используются цифры в шестнадцатиричной системе счисления). Разумеется для более тонкой настройки цвета необходимо использовать именно второй способ - цифровое значение. Про ввод и присваение цвета тем или иным тегам будет говориться дальше. В данной таблице приводятся основные цвета. Любое значение из всех нижеперечисленных можно разделить на три группы, по два символа на группу. В каждой из групп оба символа должно совпадать, иначе старые браузеры просто могут не понять, какой цвет целесообразно отобразить и перенести на экран правильную цветовую гамму.

Важно! Вы всегда можете эксперементировать с цветами, делая подбор цвета еще более тонким! Как уже было сказано выше, здесь представлены базовые цвета HTML, но это вовсе не означает, что Вы не можете использовать другие цвета, коды которых не вошли в эту таблицу. Так, например, Вы можете использовать в коде цвета цифты от 0 до 9 и символы английского алфавита от A до F по шестнадцатиричной системе счисления. Вы можете взять фиолетовый цвет 9900cc, а можете внести код 9202AB и цвет при этом будет другим. Это используется при тонком подборе цвета на случай, если Вам прийдется совместить его, например, с цветом какого-либо изображения.

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

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

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

Попробуем приукрасить какой-нибудь текст, который мы расположили на странице. Начнем с команды font. В этом теге цвет задается параметром color и выглядить это будет так: <font color="код_цвета">, где "код_цвета" - это код, взятый из таблицы базовых цветов. Регистр букв в коде цвета, как и при написании тегов, значения не имеет. Попробуйте поэксперементировать с цветом текста, используя тег font.

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

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

Запускаем программу и выбираем создание нового документа Файл -> Новый (File -> New) или нажимаем Ctrl+N, как показано на Рисунке 1. После выбора размера создаваемого документа жмите ОК (Да). Далее выбираем на панели инструментов инструмент Кисть или нажимаем английскую букву B. Для того, чтобы выбрать цвет кисти, выберите Пилитру цветов, как показано на Рисунке 2.

Рис.1 Создание нового документа в Adobe Photoshop CS3


Рис.2 Инструмент Кисть и Палитра цветов

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

Рис.3 Тонкая настройка требуемого цвета

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

Рис.4 Настройка требуемого цвета со специальным фильтром

Теперь мы можем выбирать цвет в программе Photoshop. Как Вы видите, это не очень сложно. Есть еще одна хитрость, которая может Вам пригодится. Рассмотрим ее дальше.

В редких случаях Вам может понадобится пободрать цвет фона или текста таким образом, чтобы он был максимально похожим на цвет какого-либо изображения. Здесь Вам может помочь функция Photoshop, которая называется Пипетка. Для начала загрузите в программу любой графический файл (Ctrl+O), содержащий разнообразие каких-либо цветов радуги. После этого выберите кисть и снова запустите Цветовую палитру. Отключите фильтр Только Web-цвета. Теперь наведите курсор мыши на рисунок - курсор превратится в пипетку. С помощью этого инструмента можно выбирать цвет конкретного участка изображения. Поэкспериментируйте, выберите цвета с разных участков рисунка.

Рис.5 Подбор цвета с определенного участка изображения

Как и в предыдущем случае, в поле кода будет обображатся код цвета в HTML. Видите, как все просто?