從打字機到像素：CMYK、RGB 和建立色彩視覺化工具的旅程

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

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

但是，管理這些顏色非常具有挑戰性。每個封面必須列印四次，每種顏色列印一次：青色、洋紅色、黃色和基底色（黑色）——縮寫為 CMYK。

這意味著我必須提供四張單獨的紙，每張都用黑色墨水列印，但對應於特定的顏色。

這是我發表的其中一期：

上圖你看到的所有黃色都是我用黑色墨水在「黃色」紙上手繪的。對於膚色，我使用了一種叫做“光柵點”的東西。您可以購買不同密度黑點的床單。你可以剪下這些點並將它們應用到——在本例中，應用到「紅色」紙上。

我在一張燈台上工作 - 一個帶有內置照明的玻璃頂繪圖桌 - 這樣我就可以在正確對齊各種紙張的同時看到它們。

這非常耗時，但它激發了人們對理解顏色的終生興趣——以及打印顏色和屏幕顏色之間巨大差異！

雖然CMYK僅限於四種顏色，但它仍然相對容易掌握。我們都曾在紙上使用過色鉛筆，並且對顏色如何混合有直覺的感覺。 CMYK 是一種減色顏色模型。你從一張白紙開始，當你添加更多墨水時，你實際上是在減去光線。組合所有顏色會讓你走向黑色。如果不塗任何墨水，紙張會保持白色，因為它會反射所有光線。

當我拿到第一台電腦時，我必須了解 RGB，它與 CMYK 非常不同。 RGB 是一種用於數位螢幕的相加顏色模型。在這裡，您正在混合光線本身 - 添加更多光線會使顏色更明亮，並使您接近白色。關閉所有RGB燈（R=0，G=0，B=0），螢幕變黑，因為沒有光發出。

當時作為平面設計師，您必須校準螢幕，因為您在螢幕上看到的顏色和在列印中看到的顏色通常非常不同！

---

視覺化 RGB

RGB代表三種光源：紅、綠、藍。當燈關閉時，其值為0；當它完全開啟時，其值為255。當這些燈重疊時，它們會產生不同的顏色。

為了更好地理解 RGB 的工作原理，讓我們建立一個小工具：

---

超文本標記語言

<fieldset class="rgb">
  <label class="r">
    R:<input
      type="number"
      name="r"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="g">
    G:<input
      type="number"
      name="g"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="b">
    B:<input
      type="number"
      name="b"
      min="0"
      max="255"
      value="255"
  /></label>
  <output class="rg">R+G</output>
  <output class="rb">R+B</output>
  <output class="gb">G+B</output>
</fieldset>

風格

首先，讓我們建立一個 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 下面的數字，注意頁面背景和所有三個圓圈的重疊部分如何變化。

以上是從打字機到像素：CMYK、RGB 和建立色彩視覺化工具的旅程的詳細內容。更多資訊請關注PHP中文網其他相關文章！