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

Одним из основных и наиболее часто используемых 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>

При смешении красного и зелёного получается жёлтый. Но так как пропорция неравная, поэтому жёлтый получился с оттенком оранжевого:

Тише, мыши, кот на крыше.

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

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

Запись цвета в виде rgb(255, 150, 0) является довольно громоздкой. Но существует возможность записи цвета через шестнадцатеричное значение. Если в rgb указываются цвета в десятеричной системе счисления от 0 до 255, то в шестнадцатеричной системе эти числа будут соответствовать 0 и FF. А если записывать все три числа в скобках (255, 150, 0) в одну строку без запятых через эту систему, то получится FF9600 (FF = 250, 96 = 150, 0 = 00). Чтобы записать такой цвет в значении свойства "color", необходимо сначала поставить решётку # :

<span style="color: #FF9600;">Тише, мыши, кот на крыше.</span>

Получится точно такой же результат, что и при использовании записи цвета через rgb(255, 150, 0):

Тише, мыши, кот на крыше.

Запись цвета в формате HEX компактнее. Но её можно упростить ещё сильнее. Если первые три символа в этом формате идентичны второй тройке символов, то вторую стройку можно не писать. К примеру, если есть цвет "#F96F96", то можно записать цвет как "#F96".

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

Существуют и другие способы записи цвета, которые имеют свои преимущества и недостатки. К примеру, RGBA у которого в отличии от RGB есть ещё и четвёртое число, которое означает прозрачность. Но чаще всего используются записи значений цвета через HEX и RGB( ... ).