Разбираемся с шестнадцатеричными цветами в HTML. Урок 9
Сегодня мы поговорим о том, по какому принципу компьютер понимает, какой цвет нужно отобразить в данный момент на экран. Вы наверное уже обратили внимание, что цвета обычно задаются с помощью шестнадцатеричного кода следующим образом:
color: #abсс33;
Но чтобы разобрать эту запись, нужно прежде всего понять в соответствии с какой цветовой схемой монитор показывает нам цвета и как получает нужный. А происходит это путём смешивания трёх цветов – Red (красный), Green (зелёный) и Blue (синий) в определённой пропорции. Отсюда и само название цветовой схемы – RGB.
С этим вроде бы всё понятно. Но как машина понимает, в каких пропорциях смешивать эти самые три цвета? Особенно по этому непонятному коду, который мы ей задаём - #abcc33. На первый взгляд, этот код действительно выглядит сумбурной последовательностью цифр и букв, но всё становится ясным, как только начинаешь всё раскладывать по полочкам.
Первым делом, давайте разделим этот код #abсс33 на 3 компонента. В итоге мы получим три строки по 2 символа в каждой. Но возможно вы спросите, «а как же компьютер понимает, где тут зелёный цвет, где красный, а где – синий?». Всё просто, эта последовательность RGB. А значит порядок будет следующим:
ab – это красный цвет,
сс – зелёный,
33 – синий.
Однако вы можете возразить, что cc это никакие не цифры вовсе, более того они очень подозрительно похожи на буквы. И на самом деле вы будете правы, потому что таковыми они на самом деле и являются. Вся штука в том, что мы можем использовать в качестве значения пропорции того или иного цвета только число от 0 до 255. Однако, 255 – это уже три символа, а мы максимально можем использовать только 2. А значит и максимальное число, которое мы можем поместить в компонент это 99. Но это в том случае, если бы мы использовали десятеричную систему.
А поскольку у нас используется шестнадцатеричная система, в качестве дополнительных цифр которой используются буквы - A, B, C, D, E и F; то мы вполне можем обозначить число с тремя знаками, используя всего лишь два.
Когда я говорил, что в качестве цифр используются буквы, то я имел ввиду следующее:
A – это десять,
B – одиннадцать,
С – двенадцать,
D – тринадцать,
E– четырнадцать
F – пятнадцать.
А ещё не забываем что у нас есть цифры 0 - 9. Всё это вместе взятое образует 16 символов, отсюда и само название системы счисления – шестнадцатеричная. Но мы-то люди, и мы привыкли иметь дела с десятичной системой счисления.
Как перевести число из шестнадцатеричной системы в десятеричную?
Что же такое ab? И как узнать какое оно обозначает число в переводе на человеческую систему счисления? Прежде всего нужно следовать следующему алгоритму:
- Берём первый символ, и переводим его в десятичную систему. А - это у нас 10, теперь умножаем его на 16. Получаем 160.
- Теперь переводим Bв шестнадцатеричную систему. Получаем 11.
- Складываем числа, которые у нас получились в первом и втором пункте. Получаем 171.
Альтернативные способы задания текста
Шестнадцатеричный способ задания числа на самом деле не единственный. И нередко можно встретить такие обозначения:
- color: green; - это буквенное обозначение цвета.
- color: RGB(130, 33,67); - десятичный способ представления числа.
- Часто можно встретить и расширенное обозначение второго варианта :
color: RGBA(100,200,44,0.5) ; - A от слова Alpha (альфа-канал). Он отвечает за прозрачность. - color: RGB(40%, 50%, 80%); - здесь у нас проценты идут от числа 255.
Надеюсь данная статья была вам полезна в попытке разобраться с шестнадцатеричными цветами и их представлением.