Уроки Joomla

Изучение CMS. Работа с компонентами, модулями и плагинами.

Разбираемся с шестнадцатеричными цветами в 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? И как узнать какое оно обозначает число в переводе на человеческую систему счисления? Прежде всего нужно следовать следующему алгоритму:

  1. Берём первый символ, и переводим его в десятичную систему.  А - это у нас 10, теперь умножаем его на 16. Получаем 160.
  2. Теперь переводим Bв шестнадцатеричную систему. Получаем 11.
  3. Складываем числа, которые у нас получились в первом и втором пункте. Получаем 171.

Альтернативные способы задания текста

Шестнадцатеричный способ задания числа на самом деле не единственный. И нередко можно встретить такие обозначения:

  1. color: green; - это буквенное обозначение цвета.
  2. color:  RGB(130, 33,67); - десятичный способ представления числа.
  3. Часто можно встретить и расширенное обозначение второго варианта :
    color: RGBA(100,200,44,0.5) ; - A от слова Alpha (альфа-канал). Он отвечает за прозрачность.
  4. color: RGB(40%, 50%, 80%); - здесь у нас проценты идут от числа 255.

Надеюсь данная статья была вам полезна в попытке разобраться с шестнадцатеричными цветами и их представлением.