Осмысление цветовых кодов

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

---

Введение: цветовые коды

Как вы, возможно, знаете, существует два распространенных способа определения цвета в веб-дизайне:

1. RGB (___, ___, ___)
2. #_ _ _ _ _ _

Оба из них чаще всего реализуются с использованием CSS или HTML, как вы можете рассмотреть ниже:

В первом примере кода каждый текст «Text Here» будет отображаться в виде светло-серого цвета. Мы рассмотрим, почему это позже; однако обратите внимание на то, что, несмотря на то, что цветовые методы кажутся совершенно разными, на самом деле они точно такого же цвета.

Во втором примере у нас просто есть быстрый код CSS. Это довольно просто — все, что имеет класс «foo», будет иметь цвет текста rgb (111,222,111 ). Для более любопытных это будет цвет лайма.

Пока что многое из этого должно иметь для вас смысл. Давайте теперь подробно рассмотрим, как мы перейдем от этих относительно загадочных кодов к чему-то более конкретному.

---

Приложение А: RGB

В RGB каждое значение между запятыми может быть числом от 0 до 255. Например:

Поскольку RGB означает «красный, зеленый, синий», это означает, что для красного существует значение 10, для зеленого — 137, а для синего — 29. Это неизбежно что-то вроде неприводимой дроби. Таким образом:

• красный будет 10/255 (десять из
  максимальное значение 255)
• зеленый будет 137/255 (137 из 255 максимумов)
• и 29/255 для синего.

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

Когда установлено в ноль, нет этого конкретного цвета. В 255 обратное, конечно, подтверждается. Следовательно:

• RGB (0,0,0) = черный
• rgb (255 255 255) = белый

Это верно, потому что цветовая система RGB основана на цвете через свет . Это сильно отличается от того, как вы обычно создаете цвета, например, с помощью краски или мелков. Если бы у вас была комбинация rgb (255,255,255) с использованием краски, вы, вероятно, получили бы что-то вроде мутного коричневого, но уж точно не белого!

---

Приложение B: шестнадцатеричное

Шестнадцатеричный цвет обычно сложнее объяснить, чем RGB. Принципиально они одинаковы. Однако внутренняя работа шестнадцатеричного числа, несомненно, более запутанная.

Чтобы объяснить шестнадцатеричный цвет, мы сначала должны вернуться к некоторой двоичной системе счисления и к базовой шестнадцатеричной системе счисления, чтобы понять, что нечто подобное действительно пытается «сказать»:

Для тех из вас, кто не знает, как это работает, или каковы они есть, вот краткое руководство:

Двоичный 101

• Двоичный код состоит полностью из нулей и единиц.
• Ноль дает значение ноль, а один дает значение один; но не всегда.
• Бит это либо 1, либо ноль. 1 немного. 0 немного. Но 01 не бит — это 2 бита. 10 тоже не бит, а 2 бита.
• Давайте представим, что у нас есть четыре бита; это умно названо клевом, или половиной байта. Вместо этого числа, равного двум, или 11, или 110, или как вы можете догадаться, это на самом деле сильно отличается.
• По мере накопления большего количества битов значение каждого бита удваивается.
• Поскольку первый бит имеет максимальное значение 1 и альтернативное значение 0, второй бит может быть 2 или 0, третий может быть 4 или 0, четвертый может быть 8 или 0 и т. Д. И т. Д.
• Используя эту систему, вы можете создать любой нормальный (базовый 10) номер. Любое число на всех.
• Примечание: накопленные значения складываются вместе, в зависимости от того, являются ли они 1 или 0. Кроме того, вы должны отметить, что двоичные чтения в большинстве случаев читаются справа налево.

---

Если это немного сбивает с толку, я предлагаю прочитать его снова. Если после этого все еще не имеет смысла, это нормально — следующие примеры помогут вам лучше понять.

Подождите — как это связано с цветовыми кодами?

Шестнадцатеричное, как следует из названия, предоставляет шестнадцать используемых «значений» для числа, которое нужно принять. Как вы могли заметить ранее, «клев» может дать вам любое число от 0 до 15: всего шестнадцать значений!

Доказательство концепции

Предполагая, что у нас есть следующее:

И зная, что двоичные значения каждого бита станут следующими:

Двоичное значение 1111 станет:

который…

  15 

Аналогично, если бы двоичное число было 0000, конечный результат был бы просто нулем, потому что 0 + 0 + 0 + 0 равно 0.

Еще один пример

Значения для каждого бита: 8,4,2 и 1 (по порядку). Сложите двоичные значения из них:

Равный 5.

Надеюсь, эти быстрые примеры полезны. Я призываю вас попробовать некоторые другие быстро самостоятельно. Я даже дам вам один:

Преобразовать из двоичного в десятичное: 1010
Подсказка: это между 9 и 11.

---

Может показаться, что это ни к чему не приведет в отношении веб-разработки, но, поверьте мне, мы почти на месте.

В шестнадцатеричном виде есть шестнадцать различных представлений для двоичной последовательности: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E и F. Они, в свою очередь, , представляют числа 0-15 (всего 16 чисел). Оба они представляют одно и то же двоичное число. Но быстро — остановись и подумай — #FFFFFF дает белый цвет, верно? И вы никогда не можете иметь букву выше F в цветном коде HTML. Запомни.

Двоичные, десятичные и шестнадцатеричные отношения

Вот краткая диаграмма, которая отображает отношения между двоичным, десятичным и шестнадцатеричным:

Это означает, что, если вы хотите создать число 15, вы можете написать F в шестнадцатеричном или 1111 в двоичном. Кроме того, если вы хотите сделать, скажем, 10, вы должны написать A в шестнадцатеричном или 1010 в двоичном.

---

Применение шестнадцатеричного к цветным кодам

Теперь мы немного ближе к пониманию того, как именно работает шестнадцатеричный код. Давайте быстро представим пример цветового кода HTML, разделенного на три части:

# 006699 до -> # 00,66,99

Теперь это выглядит немного знакомым; если ты думаешь, что я думаю, ты прав. Шестнадцатеричная система организована точно так же, как RGB: она имеет значение для каждого красного, зеленого и синего цветов. Основное различие:

• RGB может содержать до трех символов, чтобы определить число от 0 до 255.
• Шестнадцатеричное, с другой стороны, требуется только два, чтобы получить значение от 0 до 255. Отчасти это является причиной того, что шестнадцатеричный формат является более распространенным способом использования цветов в веб-разработке — просто потому, что его легче набирать, требуя меньше символов.

---

Теперь мы рассмотрим, как вы можете создать значение до 255, поскольку до сих пор мы только научились создавать числа до 15.

• Допустим, у нас есть число, например 66. Подвох здесь в том, что 66 написано в шестнадцатеричном, а не в обычном числовом формате. Следовательно, это не будет равно 66, оно будет равно чему-то другому, чему-то большему.
• Во-первых, давайте преобразовать эту проблему в двоичный файл. Согласно нашей удобной диаграмме выше, 6 в двоичном виде — это 0110. Это означает, что 66 в двоичном виде будет 0110 0110 (или 01100110, то же самое).
• Поскольку двоичное чтение выполняется справа налево, мы сначала декодируем самую дальную правую часть. Как известно, первый 0110 будет равен 6.
• Затем налево. Так как есть два шестнадцатеричных символа, соединенных вместе, чтобы создать «66», крайние левые двоичные цифры будут равняться чему-то другому, и определенно не снова 6 Еще раз, мы продолжим удваивать значение каждого бита.
• Слева направо значения каждого бита (с 8 битами [что составляет один байт!]) Будут: 128, 64, 32, 16, 8, 4, 2, 1. Таким образом, учитывая, что биты для левой стороны имеют гораздо большее значение, мы получим гораздо большее число:

Мы обнаружили, что первый кусочек справа равен шести. И теперь мы обнаружили, что второй клев слева равен 96. Итак, что вы делаете с ними? Просто добавьте их! 96 + 6 = 102. Следовательно, шестнадцатеричное значение 66 равно 102 в нормальной десятичной системе.

Это означает, что в шестнадцатеричном формате RGB-эквивалент 66 (в шестнадцатеричном) равен 102. Соответственно, # 666666 равен rgb (102,102,102).

Давайте сделаем еще одно преобразование шестнадцатеричного в десятичное:

255 — максимальное значение для любого цвета. Итак, если бы у нас был #FFFFFF, который мы все знаем как белый, это был бы rgb (255,255,255), который также белый.

Для понимания давайте сделаем одно окончательное преобразование. На этот раз мы собираемся преобразовать весь шестнадцатеричный цвет в RGB. Наш цвет # 6AB4FF.

Вывод: # 6AB4FF эквивалентен rgb (106 180 255).

Теперь вам может быть интересно, как мы получаем из этих значений фактический цвет, который мы можем себе представить в нашей голове. Следующий раздел поможет покрыть это. Итак, теперь, когда мы знаем, как связаны шестнадцатеричное и RGB, и теперь, когда мы знаем, как на самом деле работает шестнадцатеричное, мы сейчас рассмотрим, как вы можете придумать цвет на лету в своем собственном коде, и поможем сделать любой цвет без необходимости использовать палитру цветов.

---

Истинный цвет

Быстрый факт: поскольку в каждом значении красного, зеленого и синего есть 8 битов, это означает, что всего 24 бита в одном цвете RGB (8 * 3 = 24). Здесь мы получаем термин 24-битный цвет, часто называемый «True Color».

Благодаря 24-битному цвету мы можем создавать до 16 777 216 — более шестнадцати миллионов — цветов. Обычно это более чем удовлетворительно для любого проекта. 32-битный цвет, однако, начал становиться все более заметным, но не обязательно в области веб-дизайна. Вы можете прочитать больше о глубине цвета на Wikipedia.org в этой статье . Кроме того, вы можете просмотреть изображение всех ~ 16 миллионов цветов в одном изображении здесь (блог Дэвида Нейлора). Это действительно захватывающе! Размеры изображения 4096×4096 имеют смысл, поскольку 4096 — это квадратный корень из 16 777 216 .

---

Наконец: приложения

Чтобы эти знания были нам полезны, вам нужно научиться быстро и легко создавать собственные цвета. Мы начнем с как можно более простого, а затем перейдем к более сложным цветам.

Урок № 1

Допустим, мы хотим сделать серый цвет на лету. Цвета в оттенках серого распространены и, как правило, наиболее полезны во многих случаях. Итак, мы знаем следующее: # 000000 равно черному,
и #FFFFFF равен белому. Следовательно, наиболее распространенными из оттенков серого будут увеличения между этими двумя значениями. Чтобы сделать оттенок серого, мы должны соответствующим образом установить значения между белым и черным.

Логически, значение ближе к #FFFFFF будет более светлым тоном серого, а значение ближе к # 000000 будет темнее. Имея это в виду, давайте сделаем довольно светло-серый цвет. Некоторое быстрое размышление дает нам следующее решение: #DDDDDD достаточно далеко от белого, так что он будет для нас приятным светло-серым.

Позже мы хотим сделать темно-серый. Еще раз, все просто. Просто сделайте что-то вроде # 333333. Как видите, значения серого очень просты. Если вы обнаружите, что вам нужен еще более специфический оттенок серого, помните, что, как правило,
если все значения красного, зеленого и синего одинаковы или почти одинаковы, оно будет отображаться как серый. Одним из таких примеров этого является цвет «Gainsboro», который имеет цветовой код #DCDCDC. Это означает, что он на единицу меньше нашего цвета #DDDDDD в каждом значении красного, зеленого и синего. Вы, вероятно, не сможете различить эти два, но увеличение или уменьшение на 1 даст вам немного больше «серой точности».

Урок № 2

Второй самый простой набор цветов, который вы можете создать, это красный, зеленый и синий (очевидно). Давайте использовать красный в качестве примера. Если мы хотим создать чистый красный RGB, мы дадим значение цвета
максимальное значение красного, с 0 зеленым и 0 синим. Это имеет смысл правильно? Чтобы сделать красный в шестнадцатеричном, мы просто поместили # FF0000. Теперь у нас есть красный.

Создание зеленого и синего происходит по тому же принципу. Чтобы сделать чисто зеленый: # 00FF00 (все зелёное, больше ничего). Чтобы получить чистый синий цвет: # 0000FF (все синее, больше ничего).

Достаточно просто; однако эти цвета в большинстве случаев абсолютно отвратительны при использовании в веб-дизайне. Поэтому, чтобы использовать эти цвета, нам нужно соответствующим образом их закрасить.

К счастью, затенение тоже легко. Давайте использовать синий для этого примера. Мы уже настроили # 0000FF для нас. Чтобы изменить оттенок нашего синего значения, нам просто нужно изменить последние два символа шестнадцатеричного цветового кода. Так как FF — максимально возможный синий цвет, на данный момент мы можем сделать его только темнее. Поэтому давайте сделаем так:

Изменение # 0000FF на # 000055 (уменьшение количества черного и, следовательно, перемещение синего ближе к черному) приведет к получению темно-синего цвета.

Как вы можете видеть, затенение красного, зеленого и синего цветов далеко не сложно — это просто вопрос уменьшения количества определенного цвета. То же правило применяется к красному и зеленому, а не только к черному, поэтому # 005500 — более темный оттенок зеленого, а # 550000 — более темный оттенок красного. (Конечно, вы можете пойти ниже или выше 55, если хотите).

Урок № 3

Я полагаю, вы, вероятно, думаете: а как насчет желтого, фиолетового и всех других цветов? Ну, к счастью, это немного сложнее, чем большая тройка RGB. Начнем с желтого.

Чтобы создать желтый, нам сначала нужно подумать о цветовом спектре. Немного мнемоники, которую любят использовать люди, это «Рой Дж. Бив», что означает «красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый. Теперь логика в этом несколько запутана, но попытайтесь придерживаться меня. Чтобы получить желтый, мы используем два основных цвета: красный, зеленый и синий по обе стороны от того места, где будет желтый. В этом случае это будет красный и зеленый. Таким образом, если бы мы написали # FFFF00, у нас был бы желтый. Фантастический!

Есть только несколько других возможных комбинаций, использующих этот метод, поэтому мы быстро рассмотрим их. Между красным и синим на цветовом круге код будет # FF00FF, и мы получим розовый или пурпурный цвет, как это традиционно называется, Далее, между зеленым и синим (# 00FFFF), у нас будет голубой. И теперь, к сожалению, это фактически все простые комбинации, которые мы можем сделать. Остальное требует некоторой мысли, о которой мы поговорим через минуту. Во-первых, давайте выясним, как закрасить эти цвета.

Достаточно просто, на этот раз мы начнем заливку голубого, который, как мы помним, # 00FFFF. И … вы, наверное, догадались, но чтобы закрасить желтый, голубой или розовый, все, что вам нужно сделать, это изменить любые значения FF на меньшие. В этом примере, затеняя голубой цвет до более темного, мы можем сделать что-то вроде # 005555. DarkCyan — одно из официальных имен цветов HTML, # 008B8B, так что оно будет немного светлее того, которое мы только что создали. Итак, вот оно: как закрасить желтый, голубой и розовый.

Конец примечания о затенении

Чтобы сделать цвет светлее, достаточно просто сделать низкие значения (обычно значения 00) больше и оставить FF (или другие основные цвета) в покое. Например, если бы у нас был зеленый цвет, и мы хотели сделать его светлее, мы бы начали с # 00FF00. Затем, чтобы облегчить его, мы просто увеличили бы значения 00. #AAFFAA выдает приятный весенний зеленый цвет.

Кроме того, чтобы сделать # FF00FF (розовый) светлее, это тот же процесс. Увеличьте низкие значения: #FFAAFF. Это дает светло-розовый цвет. Работает как шарм!

---

Приложения 2: логическое создание и декодирование цветов

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

Создание собственного цвета

Чтобы создать красивый цвет, нам нужно поработать над тем, что мы уже знаем, и продумать то, что мы пытаемся создать логичным образом. Давайте создадим сценарий; мы хотим сделать тонкий оранжевый цвет, который соответствует нашим потребностям — вроде чуть более темного оттенка апельсиновой соды.

Начнем с того, что мы уже знаем, как сделать, и оно желтого цвета: # FFFF00. Нам нужно переместить его немного ближе к оранжевой области, поэтому для этого мы бы ослабили некоторую часть зеленого «притяжения», как мне нравится это называть. Это увеличивает количество красного. Я решил изменить его на # FF5500. Этот быстрый и простой пример дает вам представление о том, как вы будете создавать цвет. Последнее, что я хотел бы упомянуть, это то, что вы можете быть удивлены, почему я не начал добавлять к синему количеству, которое мы оставили в значении 00. Причина в том, что, когда вы начинаете добавлять синий медленно с шагом 11, 22, 33 и так далее, он все еще выглядит довольно оранжевым. Однако, как только вы пройдете 55 лет, вы увидите некоторые проблемы. Особенно, если мы увеличим его до чего-то вроде # FF5599. То, что происходит, — то, что это превращается в действительно розовый цвет. Почему это? Хорошо вспомним, когда мы изначально создали розовый. Код был # FF00FF. Красный максимально, а синий максимально. Итак, в нашем оранжевом цвете, когда вы начинаете менять # FF5500 на # FF5599, наши красные и зеленые значения больше не являются выдающимися значениями. Вместо этого это красный и синий, которые дают розовый. Таким образом, значение 55 для зеленого просто осветлит наш оттенок розового вместо того, чтобы перемещать его в оранжевую область.

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

Декодирование цвета

Итак, вы видите этот прекрасный цветовой код, глядя вам в лицо, но вы не представляете, какого цвета это на самом деле. Большой! Вероятно, именно здесь начинается самое интересное. Лучший способ научить вас, как это сделать, — выполнить простой тест. Однажды мне задали следующие несколько вопросов на тесте в одном из моих классов информационных технологий.

1. # 000000 представляет цвет ____.

1. зеленый
2. черный
3. белый
4. красный

2. # 00FF00 представляет цвет ___.

1. зеленый
2. черный
3. красный
4. белый

3. # FFCC66 представляет оттенок ___.

1. синий
2. красный
3. фиолетовый
4. золото

Надеюсь, вы смогли понять все это! Особенно первые два. Вы должны были быть в состоянии понять, что ответ на номер один был черным, или B. Для второго вопроса ответ также был довольно прост. Следуя схеме красного, зеленого, синего, мы знаем, что, поскольку каждое значение, кроме зеленого, установлено в 00, этот цвет будет иметь некоторый оттенок зеленого. Кроме того, поскольку значение зеленого цвета — FF (или 255), мы знаем, что этот цвет будет чисто зеленым. Таким образом, ответ будет А.

Кажется, что единственным трудным для расшифровки цветом будет номер три, # FFCC66. Это понятно. Поскольку значение синего цвета (равное 66) намного меньше двух других чисел, его можно считать относительно неактуальным. Таким образом, вы можете сравнить его с желтым цветом # FFFF00. Между этими двумя они выглядят несколько похожими. С помощью этого метода вы можете добавить первые три ответа, поскольку ни один из них не является удаленно близким к желтому. Поэтому ответ D. Пониженное значение CC для зеленого цвета слегка затеняет цвет, а увеличение синего цвета будет придавать цвету гораздо больше сходства с золотом.

Процесс декодирования цветовых кодов в первую очередь включает в себя продумывание и сравнение с уже известными цветами!

---

Один последний указатель

Вот последний быстрый совет о том, как вы можете ускорить создание цвета с помощью шестнадцатеричной системы. Используя этот метод, вы можете сократить некоторые цветовые коды с семи символов до четырех (например, от #_ _ _ _ _ _ до # _ _ _). Этот метод называется сокращением цвета, и идея заключается в том, что он будет принимать значение каждого из трех основных символов и невидимо дублировать их. Под этим я подразумеваю следующее: если бы у вас был цветовой код # 123, он был бы эквивалентен # 112233. Вы можете сделать это для любого цветового кода, где каждое шестнадцатеричное значение для красного, зеленого и синего является абсолютно одинаковым символом. Некоторые более распространенные сокращения:

• # 000 для черного (# 000000)
• #fff для белого (#ffffff)
• # f00 для красного (# ff0000)
• # 0f0 для зеленого (# 00ff00)
• # 00f для синего (# 00f)

---

Вывод

Надеюсь, эта статья помогла вам узнать, как на самом деле работают цветовые коды. Во многих программах, таких как Photoshop, по общему признанию проще всего будет использовать встроенные средства выбора цвета. Основная область, где этот навык пригодится, — это когда вы просматриваете некоторый исходный код CSS и хотите просто выяснить, какой это цвет, не прибегая к другому ресурсу. Независимо от того, какой метод быстрее, как веб-разработчики и дизайнеры, это то, что мы должны знать! Спасибо за прочтение. Это понятно сложная тема, поэтому давайте поговорим подробнее в комментариях!