Понимание цветовой модели RGB

Введение

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

Что такое RGB?

RGB расшифровывается как Red (Красный), Green (Зеленый) и Blue (Синий). Это аддитивная цветовая модель, что означает, что она создает цвета путем сложения света. Это отличается от того, как мы смешиваем краски, что является субтрактивным процессом.

В модели RGB:

• Красный
• Зеленый
• Синий

являются основными цветами света. Комбинируя эти три цвета с разной интенсивностью, мы можем воспроизвести широкий спектр цветов.

Как это работает

Представьте, что вы находитесь в темной комнате с тремя прожекторами: одним красным, одним зеленым и одним синим.

• Если вы включите Красный свет, стена будет выглядеть красной.
• Если вы добавите Зеленый свет, перекрывающаяся область станет Желтой.
• Если вы добавите Синий свет к красному, перекрывающаяся область станет Пурпурной (Маджента).
• Если вы смешаете Зеленый и Синий, вы получите Голубой (Циан).
• Если вы включите все три источника света на полную мощность, центр, где они все перекрываются, станет Белым.

Вот почему это называется «аддитивным» — вы начинаете с черного (без света) и добавляете свет для создания цвета.

Шкала от 0 до 255

В цифровых вычислениях каждый из трех цветов (Красный, Зеленый, Синий) обычно хранится как 8-битное целое число, что дает диапазон возможных значений от 0 до 255.

• 0 означает отсутствие света (темнота).
• 255 означает максимальную интенсивность.

Таким образом, цвет определяется тройкой чисел, например (R, G, B).

• Черный: (0, 0, 0) –
• Желтый: (255, 255, 0) – Красный + Зеленый
• Голубой (Циан): (0, 255, 255) – Зеленый + Синий
• Пурпурный (Маджента): (255, 0, 255) – Красный + Синий
• Белый: (255, 255, 255) – Красный + Зеленый + Синий

Экспериментируйте с различными комбинациями ниже.

RGB против CMYK

Вы, возможно, также слышали о CMYK (Голубой (Cyan), Пурпурный (Magenta), Желтый (Yellow), Ключевой/Черный (Key)). Основное различие заключается в том, где они используются:

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

Использование RGB в веб-дизайне

В веб-разработке и дизайне RGB является стандартным способом определения цветов. Вы часто видите его в CSS:

/* Стандартный синтаксис RGB */
.my-element {
  background-color: rgb(255, 0, 0); /* Красный */
  color: rgb(0, 0, 255); /* Синий текст */
}

/* RGB с альфа-каналом (Прозрачность) */
.transparent-box {
  background-color: rgba(0, 255, 0, 0.5); /* Полупрозрачный зеленый */
}

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

Шестнадцатеричные коды (например, #FF5733) — это просто еще один способ представления значений RGB.

• Первые две цифры представляют Красный (FF = 255).
• Следующие две представляют Зеленый (57 = 87).
• Последние две представляют Синий (33 = 51).

Заключение

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