當我還是個孩子的時候，我出版了一本關於漫畫的粉絲雜誌。那是在我擁有計算機之前很久——它是用打字機、紙和剪刀創建的！

粉絲雜誌最初是黑白的，在我的學校複印的。隨著時間的推移，隨著它取得了更大的成功，我能夠負擔得起帶有彩色封面的膠印！

然而，管理這些顏色非常具有挑戰性。每個封面必須列印四次，每種顏色列印一次：青色、洋紅色、黃色和基底色（黑色）——縮寫為 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 下面的數字，注意頁面背景和所有三個圓圈的重疊部分如何變化。