<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( … ).
