Интересный факт: существует 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-значные шестнадцатеричные коды… становятся дикими).
Ресурсы
Основы цвета
- Https://www.sciencelearn.org.nz/resources/47-colours-of-light
- Https://www.quora.com/Why-is-white-considered-not-to-be-a-color-in-the-color-spectrum
- Https://en.wikipedia.org/wiki/Web_colors
- Https://en.wikipedia.org/wiki/X11_color_names
- Https://en.wikipedia.org/wiki/Hexadecimal
- Https://medium.com/webkul-dev/hex-color-codes-27cd0a37c3ce
Преобразование цвета
Кодирование