Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Html коды и таблица RGB цветов для сайтов, как можно подобрать и задать цвета текста в Html и CSS, Яндекс.Цвета и другие программы палитр

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Я продолжаю публиковать статьи в рубрике «HTML для чайников». Сегодня хочу поговорить про цвета в HTML и CSS, пояснить для тех, кто еще не в курсе, как можно задать нужные цвета в Html или CSS коде, каким образом формируются цвета, как для поиска или захвата нужно цвета использовать специально предназначенные для этого программы и многое другое.

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

Позволю себе вам напомнить, что мы уже успели познакомиться в статье про то, что такое язык Html, тэги и валидатор W3C с основополагающими принципами используемыми в языке гипертекстовой разметки. Так же мы уже рассмотрели Html теги img и ссылки, узнали как создается таблица в Html, узнали много вариантов создания Html форм и то, как осуществлять верстку сайта при помощи html тега div.

Задание цвета в Html и CSS, коды и таблица базовых RGB цветов текста для сайта

Вполне логично, что в языке гипертекстовой разметки и CSS (таблицах каскадных стилей) имеется возможность цветового оформления документов, ибо в противном случае сайты были бы очень скучными и однотипными. Для задания цветов в Html и CSS обычно используют цветовую модель под названием RGB (аббревиатура, образованная от трех английских слов, обозначающих красный, зеленый и синий цвета).

В цветовой модели RGB используются только три цвета (понятно, что это красный, зеленый и синий), каждый из которых может быть представлен в Html коде цвета с разным уровнем яркости свечения. В Html или CSS коде цветов для каждого из каналов (красный, зеленый и синий) можно будет выбрать одну из 256 возможных градаций яркости. Число 256 взято по той причине, что столько значений цвета можно закодировать в одном байте информации.

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

Давайте теперь попробуем разобраться как задать яркость в каждом канале для цвета в Html и сколько у нас есть для этого возможностей? На самом деле, есть два основных способа:

1. задание Html кода цветов для сайтов с помощью записи яркости по каждому из каналов (красному, зеленому и синему) в шестнадцатеричной системе счисления
2. задание кода цвета в CSS с помощью ввода названия цвета в коде web документа

Давайте начнем со сложного и попробуем разобраться с шестнадцатеричной системой записи кода цветов в языке гипертекстовой разметки. Если бы мы хотели, например, записать код белого цвета в десятичной системе, то получили бы код 256 256 256, а для черного — 0 0 0. Тут, наверное, все понятно.

Но в шестнадцатеричной системе счисления кроме арабских цифр используются еще и первые шесть букв латинского алфавита, ну и есть своя специфика формирования цифр. Углубляться в это, думаю, не стоит, но для примера скажу, что белый цвет для Html можно будет задать так: #ffffff, а черный так: #000000. Т.е. 00 соответствует 0 в десятичной системе счисления, а ff соответствует 256.

Т.е. на каждый канал RGB цвета в Html или CSS коде отводится две шестнадцатеричных цифры, поэтому Html коды цветов состоят из шести цифр (или букв, которые приравнены к цифрам в шестнадцатеричной системе) перед которыми ставится знак решетки «#». Все довольно просто. Например, в приведенной таблице для простейших цветов их Html или CSS коды будут выглядеть так:

Естественно, что вы не обязаны сами придумывать и сопоставлять Html или CSS коды цветов с теми, что вы хотите увидеть на web странице своего сайта. Подбирать цвета для сайта вы можете в любом графическом редакторе, где вам обязательно покажут код этого цвета в цветовой схеме RGB, или найти таблицу Html цветов и скопировать нужный вам код.

Яндекс Цвета — Html коды, подбор RGB палитры цветов в выдаче Yandex

Не хотите использовать для этой цели графический редактор или искать таблицу с кодами цветов? Нет проблем. Прокрутите немного вниз эту страницу и вы найдете массу специфических и заточенных именно для работы с цветом в Html или CSS коде программ. Если и это вам не подходит, то откройте просто Яндекс и введите в поисковую строку запрос со словом «цвет» или каким-либо названием цвета.

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

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

Собственно, инструмент Яндекс Цвета может пригодиться и обычным пользователям интернета, например, для того, чтобы понять как же все таки будет выглядеть мебель цвет сер-бур-малин-в-крапинку. Можете посмотреть видео про использование Яндекс.Цветов:

Некоторые цвета в языке гипертекстовой разметки могут быть заданны с помощью слов, например, «black» означает черный цвет, «white» — белый и т.д. Но тут есть один нюанс. Задание цветов в Html таким образом возможно только для ограниченного их числа. Ну, во-первых, наверное, понятно, что все 16 миллионов возможных в RGB схеме цветов вы с помощью слов представить не сможете ни в одной таблице (устанете ее прокручивать).

В валидаторе W3C для спецификации языка гипертекстовой разметки 4.01 (ее в полной мере поддерживают все возможные браузеры на текущий момент) определено только 16 оттенков, которые составляют таблицу цветов, которые в Html или CSS коде можно задавать словами:

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

Примеры использования Html кодов и названий RGB цветов в web документах и CSS — изменение цвета текста в атрибуте color

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

Поэтому я все же приведу пример задания цвета кодом и словами непосредственно в Html, хотя при этом и будут использоваться уже не рекомендованные валидатором W3C теги. Например, раньше цвет фона web страницы задавали в теге «BODY» через атрибут «bgcolor», а цвет текста на всей странице с помощью атрибута «text». Задание нужных цветов в таком коде могло выглядеть, например, так:

<body  bgcolor="#fff8dc" text="navy">Содержимое web страницы</body>

В результате вы получите web страницу с бежевым фоном и темно-синим шрифтом. До того, как CSS вошел в обиход, для изменения цвета шрифта какого-либо отдельного участка текста повсеместно использовали сейчас уже не рекомендуемый валидатором W3C тег «FONT», в который для задания цвета включали атрибут «color»:

<font color="#0000ff">участок текста, который нужно было окрасить в синий цвет</font>

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

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

Подбор и определение HTML кода RGB цветов

Как я уже писал чуть выше, для задания кода цвета в HTML и CSS используется RGB (трехцветная – красный, зеленый, синий) цветовая схема. Для каждого из трех основных цветов предусмотрено 256 градаций – от 0 до 255 (если перевести эти значения в шестнадцатеричную систему счисления, то получим – от 00 до FF).

Т.к. у нас три основных цвета, из комбинации которых формируются все остальные цвета, то запись кода цвета в HTML и CSS будет иметь примерно такой вид: 99FF66 (оттенок зеленого). Добавив перед ним # получим HTML код цвета: #99FF66. Само собой разумеется, что вы сами не должны вычислять HTML код нужного цвета.

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

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

• HTMLColor 2000



• ColorPic

• ColorMania

• Contrast Analyser 2.0

• Absolute Color Picker

• Just Color Picker

• Microsearch Color Picker

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

<font color=”#99FF66”> Кусок текста, цвет шрифта которого нужно изменить на оттенок зеленого </p>

На мой взгляд, все просто и понятно. Для того, чтобы увидеть результат работы написанного (можно писать в любом текстовом редакторе, но я советовал бы воспользоваться Notepad++) вами HTML кода на экране, вам нужно сохранить файл содержащий код с расширением html, а затем открыть этот файл в любом удобном для вас браузере.

Можете также посмотреть видео «Цвет в Html и CSS»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Пробелы и спецсимволы (мнемоники) в Html коде, неразрывный пробел и другие специальные символы, форматирование Html и CSS кода
• Background в CSS (color, position, image, repeat, attachment) для задания цвета фона или фоновой картинки Html элементов
• Font, Html color, Blockquote, Pre — форматирование текста в HTML, Html шрифты, Strong, Em, B, I
• Свойства CSS text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
• CSS спрайты (sprites), где можно создать и скачать готовые CSS спрайты
• CSS (таблицы каскадных стилей) — что это такое, Style и Link для связывания языка Css и Html
• Яндекс кнопка (блок) Поделиться и другие кнопки социальных сетей для сайта