当我还是个孩子的时候，我出版了一本关于漫画的粉丝杂志。那是在我拥有计算机之前很久——它是用打字机、纸和剪刀创建的！

粉丝杂志最初是黑白的，在我的学校复印的。随着时间的推移，随着它取得了更大的成功，我能够负担得起带有彩色封面的胶印！

然而，管理这些颜色非常具有挑战性。每个封面必须打印四次，每种颜色打印一次：青色、品红色、黄色和基色（黑色）——缩写为 CMYK。

这意味着我必须提供四张单独的纸，每张都用黑色墨水打印，但对应于特定的颜色。

这是我发表的其中一期：

您在上图中看到的所有黄色都是我用黑色墨水在“黄色”纸上手绘的。对于肤色，我使用了一种叫做“光栅点”的东西。您可以购买带有不同密度黑点的床单。你可以剪下这些点并将它们应用到——在本例中，应用到“红色”纸上。

我在一张灯台上工作——一张带有内置照明的玻璃顶绘图桌——这样我就可以透过各种纸张看到它们，同时正确对齐它们。

这非常耗时，但它激发了人们对理解颜色的终生兴趣——以及打印颜色和屏幕颜色之间的巨大差异！

虽然 CMYK 仅限于四种颜色，但它仍然相对容易掌握。我们都曾在纸上使用过彩色铅笔，并且对颜色如何混合有直观的感觉。 CMYK 是一种减色颜色模型。你从一张白纸开始，当你添加更多墨水时，你实际上是在减去光线。组合所有颜色会让你走向黑色。如果不涂任何墨水，纸张会保持白色，因为它会反射所有光线。

当我拿到第一台电脑时，我必须了解 RGB，它与 CMYK 非常不同。 RGB 是一种用于数字屏幕的加法颜色模型。在这里，您正在混合光线本身 - 添加更多光线会使颜色更明亮，并使您接近白色。关闭所有RGB灯（R=0，G=0，B=0），屏幕变黑，因为没有光发出。

当时作为一名图形设计师，您必须校准屏幕，因为您在屏幕上看到的颜色和在打印中看到的颜色通常非常不同！

可视化 RGB

RGB代表三种光源：红、绿、蓝。当灯关闭时，其值为0；当它完全在上时，其值为255。当这些灯重叠时，它们会产生不同的颜色。

为了更好地理解 RGB 的工作原理，让我们构建一个小工具：

超文本标记语言

风格

首先，我们创建一个 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;
}

.r、.g 和 .b 的 CSS 为：

.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;
}

我最近经常使用网格区域。它允许您将网格项放置在非常特定的位置：

行开始/列开始/行结束/列结束

如果启用开发工具的网格可视化工具：

您注意到三个 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 下面的数字，注意页面背景和所有三个圆圈的重叠部分如何变化。