Когда я был ребенком, я издавал журнал для фанатов о комиксах. Это было задолго до того, как у меня появился компьютер — он был создан с помощью пишущей машинки, бумаги и ножниц!

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

Однако управлять этими цветами было довольно сложно. Каждую обложку нужно было распечатать четыре раза, по одному для каждого цвета: голубого, пурпурного, желтого и ключевого (черного) — сокращенно CMYK.

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

Вот один из опубликованных мною выпусков:

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

Я работал над световым столом — столом для рисования со стеклянной столешницей и встроенным освещением — чтобы я мог видеть сквозь различные листы и правильно их выравнивать.

Это заняло очень много времени, но на всю жизнь пробудило интерес к пониманию цветов — и к огромной разнице между цветами на печати и на экране!

Хотя CMYK ограничен четырьмя цветами, его все равно относительно легко понять. Мы все рисовали цветными карандашами на бумаге и интуитивно чувствуем, как смешиваются цвета. CMYK — это субтрактивная цветовая модель. Вы начинаете с белого листа бумаги и, добавляя больше чернил, фактически убираете свет. Сочетание всех цветов приближает вас к черному. Если вы не наносите чернила, бумага останется белой, поскольку отражает весь свет.

Когда у меня появился первый компьютер, мне пришлось разбираться в RGB, который сильно отличается от CMYK. RGB — это аддитивная цветовая модель, используемая для цифровых экранов. Здесь вы смешиваете сам свет — добавление большего количества света делает цвета ярче и приближает вас к белому. Выключите все индикаторы RGB (R=0, G=0, B=0), и экран станет черным, потому что свет не излучается.

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

Визуализация RGB

RGB представляет собой три источника света: красный, зеленый и синий. Когда источник света выключен, его значение равно 0; когда он полностью на, его значение равно 255. Когда эти источники света перекрываются, они создают разные цвета.

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

HTML

Стили

Сначала давайте создадим сетку 9x8:

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

Это необычный размер, но это потому, что наши круги R, G и B имеют размер 5x5 и перекрываются:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

Стиль CSS для .r, .g и .b:

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

В последнее время я часто использую Grid-Area. Он позволяет разместить элемент сетки в очень конкретном месте:

начало строки/начало столбца/конец строки/конец столбца

Это будет легче визуализировать, если вы включите визуализатор сетки в Dev Tools:

Обратили ли вы внимание на три пользовательских свойства CSS: --r, --g и --b? Мы обновим их в небольшом фрагменте JS:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

Вот и все. Я добавил несколько элементов

и внес небольшие изменения… но почти забыл упомянуть самую важную строку, чтобы визуализатор работал:

режим смешивания: разница

Почитайте об этом здесь — очень интересно просматривать все режимы.

Демо

Вот Codepen. Нажмите и отредактируйте цифры под R, G и B и обратите внимание, как меняется фон страницы и перекрывающиеся части всех трех кругов.