HTML цвета

HTML цвета

HTML цвета

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

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

У языка разметки гипертекста(HTML) есть возможность задать цвет для нужных элементов и эту возможность предоставляют HTML-атрибуты.

Цветовое оформление страниц сайта делается с помощью таблицы цветов HTML.

Таблицу «безопасных» цветов можно посмотреть, нажав здесь.

Таблица цветов содержит в себе формат кодов HTML:

Каждый код HTML состоит из символа «#» и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, «FF» в шестнадцатеричной системе соответствует 255 в десятеричной.

Значение символов:

Первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 — наименее насыщенный и FF — наиболее насыщенный.

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

Примеры:

#FF0000 — Этим кодом HTML мы сообщаем браузеру команду отображать максимально возможный красный цвет и вообще не отображать зеленый и синий. В результате, естественно, мы получаем чистый красный цвет:

#00FF00 — Этот код HTML отображает только зеленый, без красного и синего.

#0000FF — Этот код HTML отображает только синий, без красного и зеленого.

#FFFF00 — Сочетание красного и зеленого цветов дает нам желтый.

#CCEEFF -Взять немного красного, чуть больше зеленого и по максимуму синего для получения небесно-голубого.

Что делать, если под рукой нет таблицы цветов? Чем заменить?

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

Есть способ задать цвет – написать его название на английском. В основном браузеры читают и адекватно воспринимают названия основных цветов, а также их оттенков, помеченных значениями dark (темно), light (светло). К примеру, черный цвет задается как Black, а темно-красный – DarkRed.

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

Также для ускорения и упрощения процесса определения html-кода цветов рекомендуется использовать программу Color Cop. Программа бесплатная и ее можно скачать с официального сайта Colorcop.net

Утилита Color Cop помогает быстро идентифицировать цвет и сохранить его код.

Программа содержит несколько инструментов:

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

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

При помощи Color Cop можно сохранять код цвета в разных форматах: шестнадцатеричный HTML, шестнадцатеричный Delphi, Powerbuilder, Visual Basic, Clarion, Visual C++, RGB.

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

Окно программы выглядит так:

HTML цвета
Интерфейс программы Color Cop
  1. Пипетка для определения цвета
  2. «Увеличительное стекло»
  3. Указатель цвета в RGB формате
  4. Окно вывода цвета для html кода
  5. Окно для показа определенного цвета
  6. Окно для показа точки определения в увеличенном масштабе
  7. Кнопка для вывода палитры дополнительных цветов для текущего цвета

Палитра дополнительных цветов для текущего цвета выглядит так:

HTML цвета
Палитра дополнительных цветов для текущего цвета

Скачиваем и запускаем. Запускаем программу. Как это работает?

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

В верхнем окне мы видим цвет, а слева его номер в RGB формате.

Посмотрите видео о программе Color Cop, которая упрощает работу веб-дизайнера.

Примеры задания HTML цветов при помощи кодов RGB цветов в HTML-документах и таблице стилей CSS, изменение цвета при помощи атрибута color

Давайте на примерах посмотрим, как задать цвет для страницы сайта и HTML-документа. Рассмотрим как задать цвет путем написания при помощи комбинаций RGB так и просто обычными словами.

Немного теории. И так Вы наверное уже в курсе, что все внешнее оформление HTML-страниц осуществляется при помощи каскадных таблиц стилей(CSS) и указание кода цвета непосредственно в HTML-документах, при помощи HTML-атрибутов встречается крайне редко, а так же очень вредит Вашим проектам. К тому, же бывают ситуации, когда нельзя по тем или иным причинам использовать для стилевого оформления таблицы стилей CSS, к примеру, если Вы хотите создать почтовую рассылку subscribe.

Когда еще не было каскадных таблиц стилей, фон HTML-документа, цвет ссылок в документе, а так же цвет самого текста задавался при помощи HTML-атрибутов непосредственно внутри HTML-документа, цвет фона страницы задавался в тэге <body> путем написания атрибута bgcolor, то есть задавался цвет элементу BODY, который был фоном HTML-страницы, а цвет текста на всей странице с помощью атрибута «text».

И выглядело это все примерно так:

<html>
<head>
</head>
<body bgcolor=»#cfa8de» text=»red»><p>Текст, который мы сделали красным цветом</p>
</body>
</html>

Если Вы скопируете данный пример, в Ваш текстовый редактор(в моем случаем это Notepad++), сохраните документ с расширением .html и откроете его в браузере, то увидите:

HTML цвета
Цвет текста на всей странице с помощью атрибута «text»

А видим мы, что цвет текста на HTML-странице, который мы написали внутри тега <body> при помощи атрибута «text» изменился на красный, то есть параметр red атрибута text сработал, браузер понял что нам нужен красный текст и способ задания цвета при помощи названия этого цвета действительно работает. Так же браузер прекрасно понял RGB комбинацию, которую мы задали через атрибут bgcolor все того же тэга <body>.

Давайте изменим предыдущий пример:

<html>
<head>
</head>
<body bgcolor=»#cfa8de» text=»red»><p>Текст, который мы сделали красным цветом<br>
<font color=»green»>а вот этот участок будет другого цвета</font><br>
<font color=»#c0cd0e»>а здесь для задания цвета текста я использовал модель RGB</font></p>
</body>
</html>

В примере использованы тэги <br>(перенос строк), только для того чтобы было удобней было сделать скриншот участка полученной HTML-страницы.

HTML цвета
Текст, но разбитый на участки с разным цветом

И так мы видим, что те участки текста, которые мы заключили в парные тэги <font>…</font> и задали соответствующие параметры атрибуту color открывающего тэга <font> изменили свой цвет, первая строка стала зеленой(ну естественно параметр «green», атрибута color), вторая строка золотистой, что обусловлено комбинацией RGB цвета переданной в качестве параметра атрибуту color тэга <font>.

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

Иногда для сокращения записи кода цветов используют не шесть знаков, а только три, в том случае, если они совпадают для каждого канала — #666 вместо #666666.

Но браузер Вас не поймет, если Вы попытаетесь написать сокращенную комбинацию внутри HTML-документа, то есть если Вы передадите в качестве параметра атрибуту color сокращенную запись #666, ничего не произойдет.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *