Цвет текста (color)

Одним из основных и наиболее часто используемых CSS свойств является цвет текста "color". Это свойство может принимать значения цвета, выраженные в разных единицах измерения. К примеру, в значении CSS свойства "color" напишем красный цвет (red) текстом:
<span style="color: red;">Тише, мыши, кот на крыше.</span>
- в таком случае текст окрасится в красный цвет (red):
Тише, мыши, кот на крыше.
Но очевидно, что если писать название цвета текстом, то нельзя выбрать оттенки. Поэтому существует ещё два других варианта выбора цветов. Рассмотрим их далее.

Цвет в формате RGB

В палитре RGB основными цветами являются красный, зелёный и синий. При смешении этих цветов получаются все остальные. Максимальное и минимальное значение каждого цвета может быть от 0 до 255. При смешивании трёх цветов со значениями из этого диапазона можно получить более 16 миллионов цветов (256 * 256 * 256 = 16 777 216). Этого вполне достаточно, чтобы человеческий глаз не замечал резкого перехода между цветами.

Приведём пример, как задать цвет через RGB в CSS. Сначала попробуем сделать текст красного цвета:
<span style="color: rgb(255, 0 , 0);">Тише, мыши, кот на крыше.</span>
Как можно понять из записи, в скобках у rgb(...) ставится уровень красного, зелёного и синего цвета, которым будет написан текст. Цвета ставятся в этой последовательности через запятую. Получается такой результат:
Тише, мыши, кот на крыше.
В палитре RGB чёрный цвет - это значение rgb(0, 0, 0), а белый цвет - это rgb(255, 255, 255). Теперь подмешаем к красному цвету зелёный в немного меньшем количестве. К примеру 150 единиц.
<span style="color: rgb(255, 150, 0);">Тише, мыши, кот на крыше.</span>
При смешении красного и зелёного получается жёлтый. Но так как пропорция неравная, поэтому жёлтый получился с оттенком оранжевого:
Тише, мыши, кот на крыше.
Таким образом можно получить любой цвет. Очевидно, что руками перебирать цвета довольно сложно, поэтому лучше использовать встроенные в браузер функции разработчика. В них можно не подбирать цифры наугад, а кликнуть на нужный цвет, что упрощает выбор. Но для практики попробуем сделать это.
Об инструментах разработчика сайтов читайте подробнее в статье "Средства разработки CSS". Там вы узнаете, как изменять CSS свойства на странице без её перезагрузки, как работать с консолью, как изменять значения cookie.

Цвет в формате HEX

Запись цвета в виде rgb(255, 150, 0) является довольно громоздкой. Но существует возможность записи цвета через шестнадцатеричное значение. Если в rgb указываются цвета в десятеричной системе счисления от 0 до 255, то в шестнадцатеричной системе эти числа будут соответствовать 0 и FF. А если записывать все три числа в скобках (255, 150, 0) в одну строку без запятых через эту систему, то получится FF9600 (FF = 250, 96 = 150, 0 = 00).
Hex (hexadecimal) — обозначение шестнадцатеричной системы счисления
Чтобы записать такой цвет в значении свойства "color", необходимо сначала поставить решётку # :
<span style="color: #FF9600;">Тише, мыши, кот на крыше.</span>
Получится точно такой же результат, что и при использовании записи цвета через rgb(255, 150, 0):
Тише, мыши, кот на крыше.
Запись цвета в формате HEX компактнее. Но её можно упростить ещё сильнее. Если первые три символа в этом формате идентичны второй тройке символов, то вторую стройку можно не писать. К примеру, если есть цвет "#F96F96", то можно записать цвет как "#F96".

Другие способы записи цвета?

Существуют и другие способы записи цвета, которые имеют свои преимущества и недостатки. К примеру, RGBA у которого в отличии от RGB есть ещё и четвёртое число, которое означает прозрачность. Но чаще всего используются записи значений цвета через HEX и RGB( ... ).
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: