Интересный факт: существует 16 777 216 цветовых комбинаций *, которые вы можете использовать в Интернете (* без учета прозрачности).

Если вы использовали CSS для стилизации веб-сайта, вы, вероятно, сталкивались с назначением элементу CSS одного из этих значений цвета по имени, шестнадцатеричным кодам или значениям RGB ... но понимаете ли вы, что означает каждое из этих значений цвета? Нет!

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

В таблице слева перечислены 16 стандартных веб-цветов с соответствующими названиями цветов, шестнадцатеричным и RGB, которые они представляют. Я не собираюсь много говорить о названиях цветов, потому что они в основном являются пережитком, но прежде чем мы перейдем к HEX и RGB, давайте сначала поговорим о том, как работают цвета.

Как работают цвета

Есть несколько отличных веб-сайтов, которые объясняют, как наши глаза видят цвет и что именно представляет каждый цвет в спектре света.

Ключевая информация, которую вам нужно знать, заключается в том, что черный поглощает все цвета (представленные длинами волн), белый отражает все цвета, и то, что мы называем «цветом», обычно поглощает все другие цвета, но отражает «этот» цвет. Например, что-то, что выглядит «красным», поглощает весь цвет, но отражает красный цвет, который в конечном итоге становится цветом, который мы видим.

В детстве большинство из нас обнаружили, что, смешивая цвета, мы получаем новые цвета! Одно ключевое отличие, как объясняется на Quora, заключается в том, что у света другой набор основных цветов, чем у базовых пигментов, которые мы использовали в цветных карандашах в детстве. В пигментах три основных цвета - синий, желтый и красный.

При освещении основными цветами являются красный, зеленый и синий (RGG - см. Диаграмму Венна слева). Смешивая комбинации основных цветов света или отражения цветов, мы также получаем желтый, голубой, пурпурный и белый. Поглощение всего света дает нам черный цвет.

Как оказалось, продвинутые селекторы цвета HEX и RGB основаны на этой концепции поглощения или отражения цветов (длин волн) света.

Как только вы поймете, что RGB на самом деле означает «красный, зеленый, синий», а шестизначный шестнадцатеричный код (например, # FF0055) состоит из первых двух цифр, представляющих красный цвет, средние 2 - зеленого, а последние 2 - синего, мы обнаруживаем, что и HEX, и RGB представляют собой одну из 256 комбинаций одного и того же света и работают одинаково.

Значения каждой цифры (0–9, A-F для HEX, плюс 0–255 для RGB) - это просто оценки того, сколько света поглощается и, таким образом, составляет этот цвет. Это наш цветной Розеттский камень.

Шестнадцатеричные коды

Шестнадцатеричный цветовой код представлен 6 цифрами, каждая цифра имеет одно из 16 возможных значений (0–9 + A-F) или 256, если каждый цвет имеет 2 цифры в HEX (16x16). Поскольку сложно представить A-F числовыми значениями, я думаю об этом так:

6 Available Hex Digits: ••••••
                   Red: ••
                 Green:   ••
                  Blue:     ••
Each 'digit' can be one of 16 values in HEX (starting at 0):
    Value: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
   In HEX: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,  A,  B,  C,  D,  E,  F
And each HEX value represents absorbing or reflecting light
    Scale: ABSORBS ALL --------------------------- REFLECTS ALL

Давайте рассмотрим несколько примеров в таблице выше:

  • Если мы подумаем о цвете HEX для «белого» как #FFFFFF, все должно начинаться, чтобы иметь смысл, потому что мы знаем, что белый отражает ВСЕ КРАСНЫЙ, ЗЕЛЕНЫЙ и СИНИЙ.
  • Если белый отражает все и является буквой F в спектре, нам нужно перейти к противоположной стороне для «черного», который поглощает все, и найти «черный» шестнадцатеричный код # 000000. Говорят, что отражает 0% красного, зеленого и синего. Имеет смысл.
  • Глядя на «красный» # FF0000 - мы говорим HEX полностью отразить (F) первые две цифры нашего шестнадцатеричного кода, которые являются «красным» светом, и поглотить другие цвета.

И последнее, на что следует обратить внимание ... в HEX есть ярлык: вам нужен один из 4096 цветов, который может быть представлен 3 цифрами (4096 = 16 x 16 x 16). Если шестнадцатеричные коды сами по себе являются палиндромами, их можно сократить до трех цифр.

LONG HEX      SHORT HEX      Color
#FFFFFF       #FFF           White
#FF0000       #F00           Red
#FFFF00       #FF0           Yellow

RGB

В RGB используются те же концепции поглощения и отражения света, что и в HEX, поэтому это не сложнее, это просто другой синтаксис. Можно утверждать, что это более простой синтаксис!

В RGB вам необходимо предоставить 3 значения того, сколько света нужно поглощать или отражать для трех основных цветов: красного, зеленого и синего по шкале от 0 до 255. Помните, что ноль здесь считается значением, поэтому технически 256 значений для цветового блока (то же, что и Hex).

Как вы можете видеть ниже, установка значения 0 означает «отражение 0 света», а 255 означает «отражение всего света». Таким образом, красный цвет равен (255,0, 0), отражая только красный свет. Черный - (0,0,0), а белый - (255,255,255) - полярные края нашего спектра. RGB проще, чем Hex, потому что он полностью числовой; вам не нужно иметь дело с буквенно-цифровой шкалой.

Если вам когда-нибудь понадобится преобразовать значение RGB в HEX, вы можете использовать один из множества онлайн-инструментов или просто разделить каждое значение на 16 и отбросить остаток. Опять же, шестнадцатеричный - это всего лишь 16 значений, поэтому, например, мы можем разделить 255 на 16 и получить 15,9. Отбрасывая .9, мы получаем 15, и, глядя на мой фрагмент кода выше, значение HEX в 15 равно F. Таким образом, F в HEX составляет ≈255 в RGB.

Резюме

Надеюсь, этот пост помог вам немного лучше понять Hex и RGB, до такой степени, что вы сможете угадать, что означает один из кодов в будущем, без необходимости искать их!

Одна вещь, которую я не затронул, но это интересная тема, заключается в том, что вы можете включить непрозрачность (обозначенную a для альфа) как в RGB, так и в HEX. Вы можете прочитать больше об этом здесь для RGBA и здесь для HEX (8-значные шестнадцатеричные коды… становятся дикими).

Ресурсы

Основы цвета

Преобразование цвета

Кодирование